<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属性,那么这整个表单下面的元素都不在验证。
-->
HTML5中改良的input元素的种类
最新推荐文章于 2024-08-19 16:56:14 发布