7 HTML5中改良的input元素的种类（下）

在HTML5中，除了form表单元素增加了一些好用的属性外，大幅度增加与改良input元素的种类，可以简单地使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能。

对于不支持新增input元素的浏览器来说， 统一将这些input元素视为text类型，另外，HTML5中也没有规定这些元素在各浏览中的外观形式， 所以同样的input元素在不同的浏览器中可能会有不同的外观。

Search
search类型的input元素是一种专门用来输入搜索关键词的文本框。 Search类型与text类型仅仅在外观上有区别，在Safari 4浏览器中， 它的外观为操作系统默认的圆角矩形文本框， 但这个外观可以用CSS 样式进行改写。在其他浏览中，它的外观暂与text类型的文本框外观相同，但可以用css样式进行改写。

13.png

Tel
被设计为用来输入电话号码的专用文本框，它没有特殊的校验规则，不强制输入数字，因为许多电话号码通常都带有其它文字，但开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。

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

Email
是一种专门用来输入email地址的文本框, 提交时如果该文本框中内容不是email地址格式的文字则不允许提交，但是它并不检查该email地址是否存在，提交时该文本框可以为空，除非加了required属性。Email类型的文本框还具有一个multiple 属性，它允许在该文本框中输入一个串以逗号分隔的email地址。当然并不强制要求用户输入该email地址列表。

Datetime, date, month, week, time, datetime-local
datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框， 并且在提交时对输入的日期格式进行有效检查。
date类型的input元素是深受开发者喜爱的一种元素，以日历的形式方便用户输入。
month类型的input元素是一种专门用来输入月份的文本框，并且在提交时对输入的月份格式进行有效检查。
week类型的input元素是一种专门用来输入周号的文本框，并且在提交时对输入的周号格式进行有效检查。它可能是一个简单的输入文本框，允许用户输入一个数字，也可能更复杂更精确。它的格式类型似于“2014-W10”，代表2014年第10周。
time类型的input元素是一种专门用来输入时间的文本框，并且在提交时对输入的时间格式进行有效检查。它的外观取决于浏览器，可能是简单的文本框， 只是提交时检查是否在其中输入了有效的时间，也可能以时钟形式出现， 还可以携带时区。
datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时对输入的日期和时间格式进行有效检查。

14.png

Number
number类型的input元素是一种专门用来输入数字的文本框，并且在提交时检查输入的内容是否为数字。它具有min、max与step属性。

15.png

Range
是一种只允许输入一段范围内数值的文本框，它具有min、max与step属性，默认范围是0与100。

16.png

Color
用来选择颜色，它提供了一个颜色选择器。

File
文件选择文本框， 与HTML4最大的不同是，可以通过指定multiple属性，一次选择多个文件， value属性的值为用逗号分隔的一个或多个文件名。 同时，通过把MIME类型指定给accept属性，可以限制选择文件的种类。

在HTML5追加了新的output元素， 也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能。其中output元素定义不同类型的输出，比如计算结果或脚本的输出。output元素必须从属于某个表单， 写在表单的内部，或者对它添加form属性，目前，只被Opera 10浏览器支持。output结合range元素使用代码如下：

17.png

在开发阶段我们可能想把表单临时提交一下， 又不想让它进行表单中所有元素内容的有效性检查，有两种方法可以取消表单验证。一种是在form元素中使用novalidate属性， 让整个表单验证全都失效， 另一种是利用input元素中使用formnovalidate属性，让指定的单个input元素验证失效。

<meta charset="utf-8">

<form  action="demo.php">
    <input type="text" name="username"><br>
    
    search: <input formnovalidate="false" type="search" name="ser"> <br>
    tel: <input formnovalidate type="tel" name="num" title="只能输入10位数字" pattern="^((\+86)|(86))?(13)\d{9}$"><br>
    <br>
    url: <input formnovalidate type="url"  name="url"><br>
    
    email:<input formnovalidate type="email" name="email"><br>
    
    Datetime:<input formnovalidate type="datetime" name="datetime"><br>
    date<input  formnovalidate type="date" name="date" value="2015-01-22"><br>
    month<input formnovalidate  type="month" name="month" value="2015-02"><br>
    week <input formnovalidate type="week" name="week" value="2015-W10"><br>
    time <input  formnovalidate type="time" name="time" value="11:11"><br>
    datetime-local<input formnovalidate type="datetime-local" value="2015-01-10 11:11:11" name="local"><br>

    number:<input type="number" min="0" max="20" step="3" name="number"> <br>
    range:<input type="range" onchange="document.getElementById('num').value=this.value" value="50" min="0" max="100" step="5" name="range"> 
    <output id="num">50</output><br>
    color: <input type="color" name="color"> <br>
    file: <input type="file" multiple accept="image/*" name="pic"><br>
    <br>
    <input type="submit" name="dosubmit" value="提交">
</form>