下载掌阅APP，畅读海量书库
立即打开
为了提高开发效率，以及达到更好的用户体验，HTML5为input元素新增了大量的属性。其中，在实际开发中用得最多的有以下5个。
autocomplete
autofocus
placeholder
required
pattern
注意，上面这些新增属性只是针对input元素，并非所有元素都有。除了上面列出的，我们在其他地方可能会看到formaction、formmethod、formtarget等。不过这些属性在实际开发中极少会用到，感兴趣的小伙伴可以自己去搜索了解一下。
在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 输入内容时效果
默认情况下，文本框是不会自动获取焦点的，必须点击文本框才会获取。我们经常可以看到很多页面一打开时，文本框就已经自动获取到了焦点，例如百度首页。在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属性删除，然后刷新一下页面，对比一下前后效果的区别，就知道它的作用是什么了。
在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属性
在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 提交时效果
在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 提交时效果