HTML5 INPUT新增属性

最新推荐文章于 2024-10-06 08:44:47 发布

lgd5979

最新推荐文章于 2024-10-06 08:44:47 发布

阅读量5.8k

点赞数 1

分类专栏：前端文章标签： input html5 html action list 浏览器

本文链接：https://blog.csdn.net/lgd5979/article/details/7035042

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML5的input标签新增了很多属性，也是让大家非常兴奋的一件事，用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性，使得html和js的分工更明确了，使用起来十分舒畅。

我们先看下input新增了的属性：

新增属性一：autoconmplete

autoconmplete可以赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候，浏览器能把用户写过的值自动填写在相应的input框里。

现在很多网站都实现了这个功能，不过基本都是用php来实现的。用了这个属性，无疑可以减少很多前端和后台的交流量和工作量。

新增属性二：autofocus

autofocus 可以赋值为 autofocus，也就是在页面加载完成的时候自动聚焦到这个input标签，自然 type="hidden"的时候是不能用的。这个也是一个比较常见的效果，至今为止的实现方法是用js。在页面加载完时执行聚焦操作，现在也被一个属性搞定了。

可以想象，一个页面至多只有一个input标签会设置 autofocus，否则必然不会达到预期效果。因为不可能同事聚焦在两个input上。

新增属性三：required

input的有一个强力新增属性，免去验证的麻烦。可以赋值为 required。

比如用户注册页面的用户名和密码都是必填的，只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。

注意：这里required属性是需要用户来填写的，所以TYPE是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。

新增属性四：placeholder

这个新增属性也是非常使用，用在type= text email等等类型的时候，提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。是一种比较常见的效果：

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>test</title>
   </head>
<body>
<form method="" action="">
<p>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></p>
<p>Address: <input type="email" name="address" placeholder="john@example.net"></p>

</form>
</body>
</html>

新增属性五：新增list属性---联想框效果

这个属性显示类似于百度搜索框那种联想框效果，也是非常实用的一个属性。

注意从这个属性使用的特点：需要有对应的datalist标签；datalist子标签option支持 value和lable两个属性；list的属性值要和datalist的id一致。

使用示例（opera支持）

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>test</title>
   </head>
<body>
<form method="" action="">
Homepage: <input name="hp" type="url" list="hpurls">
<datalist id="hpurls">
<option value="http://www.google.com/" label="Google">
<option value="http://www.reddit.com/" label="Reddit">
</datalist>
</form>
</body>
</html>