首页 > 技术文章 > HTML5 input 新增与改良类型

loadchow 2017-02-25 14:09 原文

1.Url类型

   url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。

<input type="url" value="http://www.baidu.com"/>

2.email类型

   email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是email地址格式的文字则不允许提交,但是并不检查email地址是否存在。提交时该文本框可以为空,除非加上required属性。email类型的文本框具有一个mutiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。

<input type="email" value="sss@qq.com" required="必填项"/>

3.date类型

   date类型的input元素以日历形式方便用户输入。

<input type="date" value="2010-01-01"/>

 4.time类型

    time类型的input元素是一种专门用来输入时间的文本框,并且在提交时对输入时间的有效性进行检查。 

<input type="time" value="10:00"/>

5.datetime-local类型

   datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框,并且在提交时对输入的日期和时间进行有效性的检查。

<input type="datetime-local" value="2010-03-10T10:00:15"/>

6.month类型

  month类型的input元素是一种专门用来输入月份的文本框,并且在提交时对输入的月份的有效性进行检查。

<input tyep="month" value="2013-10"/>

7.week类型

   week类型的input元素是一种专门用来输入周号的文本框,并且在提交时对输入的周号的有效性进行检查。

<input type="week" value="2013-W40"/>

8.日期与时间类型的新增元素的属性

   HTML5新增的用于输入日期与时间的元素都具有一个step属性,可用于在用户鼠标单击调整按钮或从日历中选择日期时对选择值的限定。另外,在使用这些用于输入日期与时间的元素时,可以通过使用min属性与max属性来限定输入值的范围。

   另外,除了datetime-local元素之外,所有HTML5中新增的用于输入日期和时间的元素都具又一个valueAsDate 属性,用于设置或获取UTC日期和时间。所有用于输入日期和时间的元素都具有一个valueAsNumber属性,用于设置或获取元素中所设置的日期和时间被转换后的整数值(自1970-1-1 0:0:0秒所经过的毫秒数)。

9.number类型

   number类型的input元素是一种专门用来输入数字的文本框,并且在提交时进行检查,检查其中内容是否为数字,如果其中内容不为数字,则将文本框中的内容作为空白进行提交。同时number类型也具有min、max、与step属性。

<input type="number" value="20" min="10" max="100" step="5"/>

10.range类型

    range类型的input元素是一种只允许输入一段范围内的数值的文本框,具有min属性与max属性,可以设定最小值与最大值(默认为0到100),也具有step属性,可以指定每次拖动的步幅。

<input type="range" value="25" min="0" max="100" step="5"/>

11.search类型

     search类型的input元素是一种专门用来输入搜索关键词的文本框。

12.tel类型

     tel类型的input元素被设计为用来输入电话号码的专用文本框。

13.color类型

     color类型的input元素用于选取颜色,其提供了一个颜色选取器。

推荐阅读