HTML5 对于input标签的优化

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">

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>

HTML5 对于input标签的优化

相关文章