placeholder属性
模糊显示提示文字信息。
<html>
<head>
<title>
placeholder demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--placeholder：模糊显示提示文字-->
姓名：<input type="text" placeholder="请输入姓名"><br/>
性别：<input type="text">
</body>
</html>
list属性
可输入的下拉菜单。
<html>
<head>
<title>
list demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--list：可输入的下拉菜单，与datalist、option搭配使用-->
<input type="text" list="greetings">
<datalist id="greetings">
<option>数学</option>
<option>语文</option>
<option>英语</option>
</datalist>
</body>
</html>
autocomplete属性
<html>
<head>
<title>
autocomplete demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--启用自动完成功能的表单-->
<form action="http://www.baidu.com" method="get" autocomplete="on">
Bob: <input type="text" name="fname" /><br />
Tom: <input type="text" name="lname" /><br />
<!--off:关闭自动完成功能-->
Mary: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
</body>
</html>
pattern属性
验证正则规则格式，若格式与规则不匹配则显示提示信息且无法提交。
<html>
<head>
<title>
pattern demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form method="POST" action="http://localhost:5000/api/formtest/pattern">
<!--pattern：验证正则规则格式吗，不匹配格式显示提示信息且无法提交-->
<input type="text" pattern="[a-z]{3}" name="pattern">
<input type="submit" value="提交">
</body>
</html>
网友评论