购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.2 input元素的新增属性

为了提高开发效率,以及达到更好的用户体验,HTML5为input元素新增了大量的属性。其中,在实际开发中用得最多的有以下5个。

autocomplete

autofocus

placeholder

required

pattern

注意,上面这些新增属性只是针对input元素,并非所有元素都有。除了上面列出的,我们在其他地方可能会看到formaction、formmethod、formtarget等。不过这些属性在实际开发中极少会用到,感兴趣的小伙伴可以自己去搜索了解一下。

3.2.1 autocomplete属性

在HTML5中,我们可以使用autocomplete属性来实现文本框的自动提示功能。

语法

<input type="text" autocomplete="on或off" />

说明

autocomplete属性有两个属性值:on和off。on表示开启,off表示关闭。

autocomplete属性一般都是结合datalist元素来实现自动提示功能。

autocomplete属性适用于所有文本框型的input元素,包括text、password、email、url、tel等。

举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form method="post">

<input type="text" autocomplete="on" list="tips" />

<datalist id="tips">

<option value="HTML"></option>

<option value="CSS"></option>

<option value="JavaScript"></option>

<option value="Vue.js"></option>

<option value="React.js"></option>

<option value="Angular.js"></option>

</datalist>

</form>

</body>

</html>

浏览器预览效果如图3-6所示。

图3-6 默认效果

分析

从外观上来看,这个文本框跟普通文本框没有任何区别。当我们输入内容时,文本框会自动匹配datalist元素中的选项并且弹出匹配列表,效果如图3-7所示。

图3-7 输入内容时效果

3.2.2 autofocus属性

默认情况下,文本框是不会自动获取焦点的,必须点击文本框才会获取。我们经常可以看到很多页面一打开时,文本框就已经自动获取到了焦点,例如百度首页。在HTML5之前,都是使用JavaScript的focus()方法来实现的,这种方式相对来说比较麻烦。

在HTML5中,我们可以使用autofocus属性来实现文本框自动获取焦点。

语法

<input type="text" autofocus="autofocus" />

说明

autofocus只有一个属性值:autofocus。当然,你也可以直接简写为:<input type="text"autofocus />。

autofocus属性也适用于所有文本框型的input元素,包括text、password、email、url、tel等。

举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form method="post">

<input type="text" autofocus />

</form>

</body>

</html>

浏览器预览效果如图3-8所示。

图3-8 autofocus属性

分析

小伙伴们把autofocus属性删除,然后刷新一下页面,对比一下前后效果的区别,就知道它的作用是什么了。

3.2.3 placeholder属性

在HTML5中,我们可以使用placeholder属性为文本框添加提示内容。

语法

<input type="text" placeholder="提示内容" />

说明

placeholder属性适用于所有文本框型的input元素,包括text、password、email、url、tel等。

举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form method="post">

<input type="text" placeholder="请输入账号" /><br/>

<input type="text" placeholder="请输入密码" />

</form>

</body>

</html>

浏览器预览效果如图3-9所示。

图3-9 placeholder属性

3.2.4 required属性

在HTML5中,我们可以使用required属性来定义文本框输入内容不能为空。如果文本框为空,则不允许提交。

语法

<input type="text" required="required" />

说明

required只有一个属性值:required。当然,你也可以简写为:<input type="text" required />。

required属性适用于所有文本框型的input元素,包括text、password、email、url、tel等。

举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form method="post">

<input type="text" required /><br/>

<input type="submit" value="提交" />

</form>

</body>

</html>

浏览器预览效果如图3-10所示。

图3-10 默认效果

分析

如果文本框为空,点击【提交】按钮后,会弹出提示框,效果如图3-11所示。

图3-11 提交时效果

3.2.5 pattern属性

在HTML5中,我们可以使用pattern属性来为文本框添加验证功能。

语法

<input type="text" pattern="正则表达式" />

说明

pattern属性取值是一个正则表达式。正则表达式内容比较多,不了解的小伙伴可以参考绿叶学习网开源的正则表达式教程,这里就不再详细展开介绍了。

此外,email、url、tel这3个类型的input元素,本质上都内置了pattern属性,因此它们会自动进行相关匹配验证。

举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<form method="post">

<input type="text" pattern="^[a-zA-Z]\w{4,9}$" /><br/>

<input type="submit" value="提交"/>

</form>

</body>

</html>

浏览器预览效果如图3-12所示。

图3-12 默认效果

分析

pattern="^[a-zA-Z]\w{4,9}$"表示文本框的内容必须符合“以字母开头,包含字母、数字或下划线,并且长度在5~10之间”的规则。如果不符合条件,则会弹出提示框,如图3-13所示。

图3-13 提交时效果 oRs8Xqb1bwCI+yIkbjnGMzVPtrNPg1l5ocBnb5bCDly7YdYgrL5N33f1cWawJStq

点击中间区域
呼出菜单
上一章
目录
下一章
×