html5表单新增type属性实例详解

1. text

 用户名: <input type="text"> <br>

2. password

密码: <input type="password"> <br>

3. email(需要注意)

email 提供了默认的电子邮箱的完整验证,要求必须包含@符号,同时必须包含服务器名称
如果不能满足验证,则会阻止当前提交

邮箱: <input type="email"> <br>

4. tel(需要注意)

tel 它并不是用来实现验证,它的本质目的是为了能够在移动端打开数字键盘,意味着数组键盘
限制了用户只能输入数字,在pc端看不了,只能在移动端看.
如何查看效果: qq发送文件 >> 手机端使用qq来接收 >> 使用手机浏览器来查看

电话: <input type="tel"> <br>

5. url(需要注意)

只能输入合法的网址: 必须包含 http://

网址: <input type="url"> <br>

6. number(需要注意)

只能输入数字(包含小数点),不能输入其他的
max:最大值
min:最小值
value:默认值

数量: <input type="number" value="60" max="100" min="100"> <br>

7. search

search: 提供人性化的输入体验,右边会有一个小×,不用我们手动删除

    请输入商品名称: <input type="search"><br>

8. range

range : 范围
max:最大值
min:最小最
value:默认值

范围: <input type="range" max="100" min="0" value="10"> <br>

9. color

颜色: <input type="color"> <br>

10. time

time: 时间: 时分秒

时间: <input type="time"><br>

11. date

date: 日期:年月日

日期: <input type="date"><br>

12. datetime(注意)

datetime: 时间日期: 只有苹果手机的Safari支持

时间日期: <input type="datetime"><br>

13. datetime-local(注意)

datetime-local :日期和时间

日期时间: <input type="datetime-local"><br>

14. month

月份: <input type="month"><br>

15. week

星期: <input type="week"><br>