HTML5 input类型

​ 在Web应用开发过程中,表单是页面上非常重要的一项内容,用户可以输入的大部分内容都是在表单中完成的,客户端与服务器端的交互在大多数情况下也是通过表单完成.

HTML5之前版本 支持的少数input输入类型:

文本域:<input type="text">  定义单行输入字段,用于在表单中输入字母 数字等内容.默认宽度为20个字符
单选按钮:<input type="radio"> 定义单选按钮,用于从若干给定的选项中选取其一,常与其他类型的输入框构		成一组使用
复选框:<input type="checkbox"> 定义复选框,用于从若干给定的选择中选取一个或若干个选项.
下拉列表:<select><option> 定义下拉列表,提供多个可选的项,select元素必须与option元素配合使用
密码域:<input type="password"> 定义密码字段,用于输入密码,输入的内容会以"点"或*的形式出现,即		  被"掩码"
提交按钮:<input type="submit"> 定义提交按钮,用于将表单数据发送到服务器
可点击按钮:<input type="button"> 定义普通可点击按钮,多数情况下,用于通过javascript启动脚本
图像按钮:<input type="image"> 定义图像形式的提交按钮.用户可以通过选择不同的图像来自定义这种按钮			的样式
隐藏域:<input type="hidden"> 定义隐藏的输入字段
重置按钮L:<input type="reset"> 定义重置按钮.用户可以通过单击重置按钮以清除表单中的所有数据
文件域:<input type="file"> 定义输入字段和"浏览"按钮,用于上传文件

HTML5增加了多个输入型表单控件,通过使用这些新的元素,可以实现更好的输入控制和验证

1.email类型

​ email类型的input元素是一种专门用于输入email地址的文本框,在提交表单的时候,会自动验证email输入框的信息.如果不是一个有效的电子邮件地址,则该输入框不允许提交该表单

​ 在HTML4的Web表单中,采用的是这种纯文本框来输入email地址.从用户体验角度分析,很难看出这种输入框有什么变化,因为多数支持HTML5的新版浏览器只是简单地将email地址输入框显示为与纯文本框完全相同.

<input type="email" name="user_email">

​ 如果将email类型的input元素用在手机浏览器中,则会更加凸显优势.例如,如果使用iPhone或iPad中的Safari浏览器浏览包含email输入框的网页,Safari浏览器会通过改变触摸屏键盘来配合该输入框,在触摸屏键盘中添加"@“和”."键已方便用户输入

2.url类型

​ url类型的input元素提供用于输入url地址这类特殊的文本框.当提交表单时,如果所输入的内容是url地址格式的文本,则会提交数据到服务器,如果不是url地址格式的文本,则不允许提交.

<input type="url" name="user_url">

3.number类型

​ number类型的input元素提供用于输入数值的文本框.用户还可以设定对所接受的数字的限制,包括规定允许的最大值和最小值 合法的数字间隔或默认值等.如果所输入的数字不在限定 范围之内,则会出现错误提示.

number类型的属性
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔(如果step="4",则合法的数是 -4 0 4 8等)
value 规定默认值

4.range类型

​ range类型的input元素提供用于输入包含一定范围内数字值的文本框,在网页中显示为滑动条.用户还可以设定对所接受的数字的限制,包括规定允许的最大值和最小值 合法的数字间隔或默认值等.如果所输入的数字不在限定范围之内,则会出现错误提示.

​ range类型的属性与number类型的属性是完全相同的.这两种类型的不同在于外观表现上,支持range类型的浏览器都会将其显示为滑块的样式,而不支持range类型的浏览器则会将其显示为普通的文本框

5.日期选择器类型

​ 日期选择器(date pickers)是网页中经常要用到的一种控件,在HTML5之前版本中,并没有提供任何形式的日期选择器控件,多采用一些JavaScript框架来实现日期选择器控件的功能,例如jquery UI ,YUI等,在具体使用时会比较麻烦.

​ HTML5提供了多个可用于选取日期和时间段输入类型,即6种日期选择器控件,分别用于选择以下日期格式:日期,月,星期,时间,日期+时间,日期+时间+时区.

日期选择器类型
<input type="date"> 选取日 月 年
<input type="month"> 选取月 年
<input type="week"> 选取周 年
<input type="time"> 选取时间(小时和分钟)
<input type="datetime"> 选取时间 日 月 年(UTC时间)
<input type="datetime-local"> 选取时间 日 月 年(本地时间)

##UTC 是universal time coordinate 的英文缩写,即"协调世界时",是由国际无线电咨询委员会规定和推荐,并由国际时间局(BIH)负责保持的以秒为基础的时间标度.简单地说,UTC时间就是0失去的时间,而本地时间即地方时间.例如,北京时间 为早上8点,则UTC时间为0点,即UTC时间比北京时间晚8小时

6.search类型

​ search类型的input元素提供用于输入搜索关键词的文本框.在外观上看起来,search类型的input元素与普通的text类型只是稍微有区别,但实现起来不是那么容易.

​ search类型提供的搜索框不只是Google或百度的搜索框,而是任意网站即任意网页中的任意一个搜索框.目前大多数网站的搜索框都是用的方式来实现的,即采用纯文本的文本框,而HTML5中定义了专用于搜索框的search类型.

7.tel类型

​ tel类型的input元素提供专门用于输入电话号码的文本框.它并不限定只输入数字,因为很多号码还包含其他字符(如 + - () 等)

8.color类型

​ color类型的input元素提供专门用于输入颜色的文本框.当color类型文本框获取焦点后,会自动调用系统的颜色窗口,包括苹果系统也能弹出相应的系统色盘.