HTML5 form input 文本框新加的类型

文章来源：http://tutorials.jenkov.com/html5/doctype.html

                 https://www.w3.org/TR/2014/REC-HTML5-20141028/

新增一些文本框校验类型：即对一个文本框输入值进行校验，代替以前写的Java script。

  而且大部分带有一个×字，删除文本框的内容非常方便，

一、浏览器支持
     有的浏览器不支持，如果你的浏览不支持，哪么就当成一个简单的文本输入框。

    新增的input （文本框）在文本框输入的内容可以进行校验，以前需要写一大堆JavaScript来判断，现在方便多了。

二、分类

1、Email 类型:检查文本框中输入的email 格式是否对

<input type="email" name="emailField"/>

2、URL 类型：检查文本框中输入的url是否是一个有效的url.

<input type="url" name="urlField"/>  

3、 数字类型两种显示格式

    (1) 就是用上下箭头来增加和减少数字值。

         number 类型：检查文本框中输入的number是否是一个有效的数字

<input type="number" name="numberField"/>

<input type="number" name="numberField"
    min="10" max="20" step="2" />

    

（2）用一个”进度条“来增加和减少数字值，用一个button按钮可以看见变化值。

<input type="range" name="rangeField"/>

 <input type="button" onclick="alert(document.getElementById('rangeField').value);" value="See Range Value">

  

4、tel类型：检查文本框中输入的电话号码格式是否对.

<input type="tel" name="telField"/>

5、搜索：在自己的网页放一个百度的搜索框，输入查询值，可以直接进入百度的结果页，方便多了，不用我们去点击百度站，然后再点击查询。                

<input type="search" name="searchField"/>

<form action="http://www.baidu.com/search" method="get">
 <label>百度: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

6、日期格式:看着日期小控件做得真漂亮.

 （1）日期--年,月，日

<input type="date" name="dateField"/>

     

（2）时间---小时，分钟       

<input type="date" name="dateField"/>

   

 （3）日期+时间  年月日，小时.分钟

     

<input type="datetime" name="datetimeField"/>

 （4）年，月      

<input type="month" name="monthField"/>

 （5）年，周：一年由多少周组成    

<input type="week" name="weekField"/>       

  

7、颜色：调用本地的调色板，选中颜色放入到文本框中

<input type="color" name="colorField"/>

8、下拉框以前 combox 当前框值不能改，还需在下拉框设置一个空格，麻烦，所以现在当前文本框可以写值，也不用设置空格。

<input type="text" name="comboBoxField" list="comboBoxList">
<datalist id="comboBoxList">
    <option label="AA"> AA
    <option label="BB">BB
    <option label="CC">CC
</datalist>

<select NAME="TEMP" οnchange="KK.innerText =this.options[this.selectedIndex].value">
<option value></option>
<option value="AAAAAA">AAAAAA</option>
<option value="BBBBBB">BBBBBB</option>
<option value="CCCCCC">CCCCCC</option>
</select>

三、  New Attributes

   1、autofocus  :一进入页面时有一个文本框获得焦点（光标所在点），可以用在form 表单下的所有类型。

<input type="text" name="comboBoxField" autofocus>

2、placeholder:一进入页面时文本框的默认值，可以用在form表单下可以进入文本输入的所有类型。

<input type="text" name="textField" placeholder="Type in here">

3、required：为必填项

<input type="text" name="textField" required>

4、 multiple  :表示可以同时多选多个文件上传

          http://www.108js.com/article/article7/70103.html?id=563

5、pattern：可以用正则表达式限制输入的值

<input type="text" name="textField" pattern="[A-Z][0-9]">

6、autocomplete：表示可以记忆以前的几项，可以直接选择输入，很方便，网站大量采用这种方法。