文章来源: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"/>
<input type="date" name="dateField"/>
<input type="datetime" name="datetimeField"/>
<input type="month" name="monthField"/>
<input type="week" name="weekField"/>
<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>
<input type="text" name="comboBoxField" autofocus>
<input type="text" name="textField" placeholder="Type in here">
<input type="text" name="textField" required>
<input type="text" name="textField" pattern="[A-Z][0-9]">