placeholder:输入框提示文本(占位符)
autofocus:自动获取焦点
autocomplete:输入框缓存提示(默认:on 开启缓存提示)
required:输入框不能为空(属性值和属性名相同可以省略不写属性值)
multiple:可以选择上传多个文件
novalidate:关闭表单自动验证功能 (只能加给form标签)
pattern:自动验证时,要匹配的正则表达式
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="" novalidate> <!--novalidate:关闭表单自动验证功能-->
<fieldset>
<legend>表单属性</legend>
<label>
用户名: <input type="text" name="userName" placeholder="请输入用户名..." autofocus="autofocus" autocomplete="on" required>
<input type="file" multiple> <!--multiple:可以选择上传多个文件-->
<!--placeholder:输入框提示文本(占位符)
autofocus:自动获取焦点
autocomplete:输入框缓存提示(默认:on 开启缓存提示)
required:输入框不能为空(属性值和属性名相同可以省略不写属性值)
multiple:可以选择上传多个文件
novalidate:关闭表单自动验证功能 (只能加给form标签)
pattern:自动验证时,要匹配的正则表达式
-->
</label>
<label>
电话:<input type="tel" pattern="1\d{10}"> <!--pattern:自动验证时,要匹配的正则表达式-->
</label>
<input type="submit">
</fieldset>
</form>
</body>
</html>