Html5中form表单元素和属性总结
?
1)?????????email:email类型的输入框,在提交表单时,会验证输入的email是否为合法的email格式,多数浏览器还不能对email做出完美的判断,仅能判断是否有@符号,以及@符号前后是否有字符
2)?????????url:url类型的输入框,在提交表单时,会验证输入的url是否为合法的url;多数浏览器校验时会判断输入值是否以http://开头
3)?????????number:只能输入数字类型的输入框,
属性
值
描述
max
number
规定允许的最大值
min
number
规定允许的最小值
step
number
规定合法的数字间隔(如果?step="3",则合法的数是?-3,0,3,6?等)
value
number
规定默认值
?
4)?????????range:相当于可限定最大最小值的number输入框
5)?????????datepickers(date,month,week,time,datetime,datetime-local):日期时间选择器
6)?????????search:搜索框,显示为普通文本,具有清除功能
7)?????????color:点击可调用出系统颜色选取窗口
8)?????????datalist:规定输入域的选项列表,格式如下:
Webpage: <input type="url"?list="url_list"?name="link" />
<datalist id="url_list">
<option label="3" value="http://www.360.cn" />
<option label="b" value="http://www.baidu.com" />
<option label="q" value="http://www.qq.com" />
</datalist>
在需要引用datalist的输入域中增加list=”xxx”,其中xxx为dataList的id
9)?????????keygen:
10)?????output:
autocomplete:相当于ie里边的自动完成功能,而不是百度等搜索引擎的联想提示功能
novalidate:指定表单是否验证
1)?????????placeholder:占位符属性(类似于hint),在输入区域为空或者不处于焦点时显示,以前只能用javascript实现
<input type="numbers" name="numbers"??placeholder="请输入有效的数字" />
2)?????????autofocus:页面加载完毕后,输入域自动获取焦点,适用于所有input输入
<input type="text" name="user_name"??/>
3)?????????form:规定属于域所属于的一个或者多个表单(form),属于多个form用空格分隔
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
4)?????????表单重写属性
formaction:重写表单的action属性
formenctype:重写表单的enctype属性
formmethod:重写表单的method属性
formnovalidate:重写表单的novalidate属性
formtarget:重写表单的target属性
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
重写这些属性,对于创建不同的提交按钮特别有用
5)?????????Height和width属性:用于input类型为image的输入框,显示图片的宽度、高度
<input type="image" src="img_submit.gif"?width="99"
?height="99"
?/>
?
6)?????????List属性:使用该属性可以使输入域显示datalist中定义的选项列表,适用于text、search、url、telephone、email、datepickers、number、range、color
示例前面已经有了
7)?????????Min、max、step属性:为数字(number、range)、日期类型(datepickers)的输入域设定限制
Min:规定输入域所允许的最小值
Max:规定输入域所允许的最大值
Step:为输入域规定合法的数字间隔(如果?step="3",则合法的数是?-3,0,3,6?等)
8)?????????Multiple属性:这个不是html5的新属性,但是其功能有所扩展,适用于email和file这两种输入域。用于email时多个email之间用逗号分隔,用于file时一次可选择多个文件
?
9)?????????Novalidate:适用于form和text, search, url, telephone, email, password, date pickers, range以及?color等input输入域,用于form时代表form提交时不做验证,用于input输入域时代表提交form时对该输入域不做验证
?
10)?????Pattern:自定义正则表达式来验证表单输入项,适用于text, search, url, telephone, email?以及password。
<input type="text" name="zip" id="zip" placeholder="5 digits" pattern="\d{5}" title="The zip code should consist of five numbers only">
?????????如上所示:将只能输入5位数字的邮编
11)?????Required:标明该输入项为必填项,适用于text, search, url, telephone, email, password, date pickers, number, checkbox, radio?以及?file
?