1.input的type类型的新增,search和tel这两个,search知识对普通的input增加了些样式而已,而tel是和input的text样式完全一样的,只不过可以通过pattern去用正则判断输入的内容。判断是在点击提交按钮的时候,出现下面的错误展示情况,加上title可以展示对应你想提示的错误文案
<! DOCTYPE HTML>
<Meta charset="utf-8">
<!--chromo是不能实现search的,所以要加段css-->
<style> input[type="search"] {-webkit-appearance:textfield;} </style>
<form id="login" action="login.PHP" method="get">
<input type="'submit" name="username" value="admin" autofocus /><br>
<!--电话号码的这个type和普通的一样,就是可以通过pattern来进行正则判断验证, 可以用title来指定错误提示-->
tel:<input type="tel" name="num" pattern="^\d{10}$" title="请输入10位数字">
<input form="login" formaction="a.PHP" formmethod="post" type="submit" name="dosubmit" value="登录" />
</form>
2.url和email类型
这两个属性不用像tel一样要自己加pattern来判断,他们两个类型是自己就加好判断的。
url类型展示如下
url:<input type="url" required name="url">
email:<input type="email" required name="email">
required字段的错误提示如下:
3.关于时间的类型,这些其实在不支持html5的地方其实就是一个文本输入框
datetime:<input type="datetime" name="datetime"><br>
date:<input type="date" name="date" value="2016-08-03"><br>
month:<input type="month" name="month" value="2016-08"><br>
week:<input type="week" name="week" value="2016-W10"><br>
time:<input type="time" name="time" value="11:11"><br>
datetime-local:<input type="datetime-local" name="datetime-local" value="2016-01-01T00:00"><br>
展示效果如下,鼠标转中哪个就可以使用哪个,可以通过加value属性,然后按照固定的格式来初始化这些属性的默认值
4.number,range
ps:在form标签里面加上novalidate属性就能不验证就进行跳转
<form novalidate action="login.PHP" method="get">
同理,如果在表单项里面加上formnovalidate,就能取消单个input的验证
然后number类型
number:<input type="number" name="number"><br>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。