html5 表单

表单主要的输入类型

Input typeIEFirefoxOperaChromeSafariemailNo4.09.010.0NourlNo4.09.010.0NonumberNoNo9.07.0NorangeNoNo9.04.04.0Date pickersNoNo9.010.0NosearchNo4.011.010.0NocolorNoNo11.0NoNo   

Input 类型 - Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

• date - 选取日、月、年
• month - 选取月、年
• week - 选取周和年
• time - 选取时间（小时和分钟）
• datetime - 选取时间、日、月、年（UTC 时间）
• datetime-local - 选取时间、日、月、年（本地时间）

表单元素

dataList元素

类似于一个下拉框

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

<span style="font-size:18px;">Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3School" value="http://www.W3School.com.cn" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist></span>

keygen 元素

加密工具

<span style="font-size:18px;"><form action="demo_form.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form></span>

返回的是加密的字符串

HTML5 的新的表单属性

新的 form 属性：

• autocomplete
• novalidate

新的 input 属性：

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和 width
• list
• min, max 和 step
• multiple
• pattern (regexp)
• placeholder
• required

autocomplete

autocomplete="on/off"     on 表示自动之前的记录值，off表示不自动填充上次记录值
 

autofocus 属性

<input type="text" name="user_name" autofocus="autofocus" />

页面展示的时候自动获取焦点,如果同时有两个，默认第一个得到焦点

form

<span style="font-size:18px;"><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" /></span>

通常的只会提交form表单范围内的，在input中使用新的form属性，也能一起提交


list属性

当有datalist的时候，类似于上面的下拉框

multiple属性

当input上传文件的时候multiple=“multiple”,用于type 等于email或者file，type=“file”是上传文件，加了这一行，只能选择一个文件

novalidate 属性

novalidate =“novalidate ”加了则一行，之前的email，url等校验无效

pattern 属性

正则校验

<span style="font-size:18px;"><input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" /></span>

placeholder 属性

类似于value的属性，但是不会提交，只是提示

required 属性

校验非空