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属性，那么这整个表单下面的元素都不在验证。-->