HTML5 input常见新增类型及属性

1. url类型、email、tel类型

说明：当输入非url、email的字符串时，浏览器会自动提醒。

<form action="/example/html5/demo_form.asp">
   <input type="url">
   <input type="submit" value="提交">
</form>

2. number类型。

说明：只能输入数字，min表示数字的最小值，max为最大值，step为点击加减按钮时每次增减的数值。

<form action="/example/html5/demo_form.asp">
   <input type="number" min="2" max="10" step="2">
   <input type="submit" value="提交">
</form>

3. range类型

说明：其他属性同number类型一致，step表现为每滑动一步的数值。

<form action="/example/html5/demo_form.asp">
   <input type="range" min="2" max="10" step="2">
   <input type="submit" value="提交">
</form>

4. search类型

说明：在输入内容后，有×可以直接清空输入内容，其他与text类型一致。

<form action="/example/html5/demo_form.asp">
    <input type="search">
    <input type="submit" value="提交">
</form>

5. date、month、week、time、datetime、datetime-local类型

说明：date为取年月日，month为取年月，以此类推。

<form action="/example/html5/demo_form.asp">
   <input type="date">
    <input type="submit" value="提交">
</form>

6. color类型

说明：用于选择颜色。

<form action="/example/html5/demo_form.asp">
   <input type="color">
    <input type="submit" value="提交">
</form>

6. autocomplete属性

说明：此属性默认开启，作用为可以自动完成该input内容的填写。注意：只有在该input有name属性、是一个完整的表单时，才会自动生效。

<form action="/example/html5/demo_form.asp">
    <input type="text" autocomplete="on" name="tel">
    <input type="submit" value="提交">
</form>

7. autofocus属性

说明：进入页面后，焦点自动在该input。

<form action="/example/html5/demo_form.asp">
    <input type="text" autofocus name="tel">
    <input type="submit" value="提交">
</form>

8. pattern属性

说明：该属性值为一个正则，只能输入符合该正则的内容，否则会提示输入符合要求的字符。

<form>
   <input type="text" name="tel" pattern="/\d+/">
   <input type="submit" value="提交">
</form>