HTML5中改良的input元素的种类

 

 <style>input[type="search"]{-webkit-appearance:textfield;}</style>  
<form action="demo.php">
	keywords: <input name="keywords" type="search" /><br />
	tel:<input name="phone" title="只能输入10个数字其他不行" pattern="^\d{10}$" type="tel" />  <br />
	url: <input formnovalidate="" name="url" title="请正确输入url" type="url" /><br />
	email: <input name="email" required="" type="email" /><br />
	Datetime:<input name="datetime" type="datetime" /><br />
	date:<input name="date" type="date" /><br />
	month:<input name="month" type="month" /><br />
	week:<input name="week" type="week" /><br />
	time:<input name="time" type="time" /><br />
	datetime-local:<input name="datetime-local" type="datetime-local" /><br />
	number:<input name="number" min="1" step="2" max="11" type="number" /><br />
	range:<input value="0" name="range" min="1" step="2" max="11" type="range" /><output id="num">0</output><br />
	color:<input name="color" value="#f00" type="color" /><br />
	file:<input name="pic" multiple="multiple" accept="image/*" type="file" /><br />
	<br />
	<br />
	 <input name="submit" value="提交" type="submit" /> 
</form>        <!--
 看了有不懂的地方可以加入《php html5技术群》提问, 有专门老师辅导 群号364702379 文明讨论技术,  不得发广告
 以上是html5新增的标签， 我们一个个来分析。 你可以先用最新版的IE浏览器，记着要最新版本的， 或者用谷歌浏览器打开看看效果
 1.keywords 是搜索框 其实跟input框没什么区别
 2.tel 电话号码框 可以在 pattern 里面指定正则表达式限制这个框输入规则， 出错时 title中提示错误文字
 3.url只能输入网址  
 4.email邮箱 
 5.Datetime,date,month,week,time,datetime-local 这几个日历标签，点击时可以看到自动出来日历控件。
 6.number 标签是只能输入数字的， min和max 可以指定输入数字的范围 setp是限制数据的步长，每次加多少减多少
 7.range 标签是一个滑块标签标签属性跟上面数字一样，但滑块需要显示数字时需要配合output标签 指定 onChange事件
 8.color 颜色标签
 9.file标签跟html4中的一模一样， 不同的是可以通过multiple属性 变成上传时可以多选，accept="image/*" 指定值上传 图片格式， 可以限制只传某些格式
 11.可以在input标签中添加 required属性表示这个标签不能为空
 11.如果在input 标签中添加 formnovalidate 属性可以取消自带的验证， 当前这个标签就不再验证 但 required 还会起作用
 12.如果在form中添加novalidate属性，那么这整个表单下面的元素都不在验证。
-->