一、增型表单标签
HTML5中，新标准把文本框提示信息、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能直接加入新的表单标签中。 但在众多现代浏览器中，最新版本的Opera浏览器对新型表单的支持才最为完美。
- Number类型input标签
<input type="number" name="demoNumber" min="1" max="100" step="1"/>
name:标识表单提交时的key值min:标识当前输入框输入的最小值max:标识当前输入框输入的最大值step:标识点击增大/减小的时候，增加/减小的步长
- Email类型input标签
<input type="email" name="email" placeholder="请输入注册邮箱"/>
当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式。
- URL类型的input标签
<input type="url" placeholder="请输入网址" name="url"/>
- Tel类型的input标签
<input type="tel" placeholder="输入电话" name="phone"/>
- range类型的input标签
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0"/>
此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准，用户输入可感知体验非常好。另外此标签可以跟表单新增加的output标签一块使用，达到一个联动的效果。
<form oninput="output.value=parseInt(range.value)"/>
<input type="range" min="0" max="100" step="5" name="range" value="0"/>
<output name="output">0<output/>
</form>
- 新的日期、时间、月份、星期input标签
Web项目开发，一定会遇到相关的js日期控件，在HTML5中新加入的表单属性将会使Web开发变得更加简洁。
<input type="date" name="datedemo"/>
相关的日期属性还包括：month、time、week、datetime-local、datetime。
- 颜色选择input标签
<input type="color" name="colordemo"/>
- input标签自动完成功能
有的项目会要求实现自动完成或者输入提示功能，在HTML5的支持下将变得简单。
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
<option value="实验楼" ></option>
<option value="HTML5" ></option>
<option value="input标签" ></option>
</datalist>
二、HTML5表单新属性
1、 input表单新增加的特有属性
- autofocus：属性，demo:<input type="text" autofocus="autofocus"/>此属性可以设置当前页面中input标签加载完毕后获得焦点。
- max、min、step：这些上面介绍过，都是跟数字相关。
- placeholder：提示信息属性。
- multiple：用于文件上传控件，设置此属性后，允许多个文件。
- required：校验属性。设置了required属性后预示着当前文本框在提交前必须有数据输入，而这一切都是由浏览器自动完成。还添加了pattern正则表达式校验：
<input type="text" autofocus="autofocus" required pattern="\d+"/>
- form：另外一个较大的改进就是增加了form属性，也就是说，任何一个标签都可以指定它所属于一个表单，而不是必须在其中进行包裹了。
<input type="text" form="demoform" name="demo"/>
2、 form表单新增加的属性
novalidate：属性规定在提交表单时不应该验证form或input域。
<form action="" method="POST" novalidate="true"></form>
autocomplete：属性规定form或input域应该拥有自动完成功能。
三、综合实例
<fieldset>
<legend>表单演示：最新Opera浏览器支持效果良好</legend>
<form action="" method="POST" id="form1" oninput="output.value=parseInt(range.value)">
<input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填项测试" />
<input type="number" name="demoNumber" min="1" max="100" step="2" />
<input type="email" placeholder="请输入邮箱" name="mail" />
<input type="url" name="url" placeholder="输入正确的网址" />
<br />
日期：<input type="datetime" name="time" />
颜色：<input type="color" name="color" /><br />
<br />
<input type="range" min="0" max="50" step="5" name="range" value="0" />
<output name="output">0</output>
<br />
<input type="submit" value="提交表单" />
</form>
表单外的input标签：
<input type="text" form="form1" name="demo" />
</fieldset>
