H5基础（3）-HTML5增强型表单标签

增强型表单标签

1.1：Number类型input标签

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

name: 标识表单提交时的key值

min: 标识当前输入框输入的最小值

max: 标识当前输入框输入的最大值

step: 标识点击增大/减小的时候，增加/减小的步长

1.2：Email类型input标签

<input type="url" placeholder="请输入网址" name="url"/>

1.3：Tel类型的input标签

<input type="tel" placeholder="输入电话" name="phone"/>

1.4：URL类型的input标签

<input type="url" placeholder="请输入网址" name="url"/>

1.5：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>

1.6： 新的日期、时间、月份、星期input标签

<input type="date" name="datedemo"/>

相关的日期属性还包括：month、time、week、datetime-local、datetime

1.7：颜色选择input标签

<input type="color" name="colordemo"/>

1.8：input标签自动完成功能

<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表单新属性

2.1：input表单新增加的特有属性

• autofocus属性，demo:<input type="text" autofocus="autofocus"/>此属性可以设置当前页面中input标签加载完毕后获得焦点。
• max、min、step：这些上面介绍过，都是跟数字相关。
• placeholder：占位符，提示信息属性。
• multiple：用于文件上传控件，设置此属性后，允许多个文件。
• 校验属性：设置了required属性后预示着当前文本框在提交前必须有数据输入，而这一切都是由浏览器自动完成。还添加了pattern正则表达式校验：

<input type="text" autofocus="autofocus" required pattern="\d+"/>

• 另外一个较大的改进就是增加了form属性，也就是说，任何一个标签都可以指定它所属于一个表单，而不是必须在中进行包裹了。

<input type="text" form="demoform" name="demo"/>

2.2：form表单新增加的属性

• novalidate属性规定在提交表单时不应该验证 form或input域

<form action="" method="POST" novalidate="true"></form>

• autocomplete属性规定form或input域应该拥有自动完成功能

表单事件

3.1：oninput事件：
用户输入出发，在input和textarea元素的值发生改变时触发；
3.2：onchange事件：
还可以作用于keygen和select元素；
两者区别：oninput事件在元素值发生变换时立即触发； onchange 在元素失去焦点时触发；