文章目录
一、fieldset + legend二、必须输入required 输入提示placeholder三、input 类型3.1 password3.2 email3.3 url3.4 tel3.5 number3.6 hidden3.7 下拉列表分组3.8 file3.9 data3.10 time 类型3.11 color
四、其他属性4.1 maxlength 限制最大输入字符4.2 readonly 只读4.3 disabled 禁用4.4 pattern 定义正则规则4.5 多值提交，在name上加 []4.6 自定义列表 datalist4.7 信息栏效果 fieldest lgend4.8 打开或关闭历史记录 autocomplate
一、fieldset + legend
<body>
<form action="get" action="1.php">
<fieldset>
<legend>注册信息
</legend>
<input type="text">
</fieldset>
</form>
</body>
效果：
二、必须输入required 输入提示placeholder
<input type="text" name="title" required placeholder="请输入">
效果：
三、input 类型
3.1 password
在移动端 会调出安全键盘
3.2 email
3.3 url
3.4 tel
3.5 number
在移动端的时候，会弹出数字键盘
3.6 hidden
隐藏表单
<type type="hidden"></type>隐藏表单检查
隐藏表单，不占用空间，可以提交到后台
效果：
3.7 下拉列表分组
<select name="category[]">
<optgroup label="新闻">
<option value="">新闻
</option>
<option value="">游戏
</option>
</optgroup>
<optgroup label="娱乐">
<option value="">吃饭
</option>
<option value="">睡觉
</option>
</optgroup>
</select>
效果：
3.8 file
文件上传需要在form上指定： enctype=“multipart/form-data” 多个文件上传需要指定：multiple name处需要加上 [] 号
<form action="1.php" method="POST" enctype="multipart/form-data">
<input type="file" name="images[]" multiple>
</form>
3.9 data
<input type="date">
在移动端使用此属性： 安卓机(OPPO r11s): IPhoneX:
3.10 time 类型
<input type="time">
安卓机(OPPO r11s): IPhoneX效果：
3.11 color
<input type="color"><br>
效果：
四、其他属性
4.1 maxlength 限制最大输入字符
4.2 readonly 只读
不能修改，可以提交到后台
4.3 disabled 禁用
不可修改，不能提交到后天
4.4 pattern 定义正则规则
<input type="text" pattern="[a-z]{5}" required>
解读：只能输入a-z 并且是5位 效果：
补充：oninvalid HTML DOM oninvalid事件（input元素内的值为无效值时触发的事件）
<input type
="text" pattern
="[a-z]{5}" required oninvalid
="invalid('用户名只能是英文,且只有五位')">
<input type
="submit">
<script
>
function invalid(msg
){
alert(msg
);
}
</script
>
解读：当输入的值不匹配，且点击提交时会触发 oninvalid事件 弹出警告框
4.5 多值提交，在name上加 []
效果：
4.6 自定义列表 datalist
<input type="text" list="lesson">
<datalist id="lesson">
<option value="mysql"></option>
<option value="js">脚本语言
</option>
<option value="css">层叠样式表
</option>
</datalist>
效果:
4.7 信息栏效果 fieldest lgend
<fieldset>
<legend>注册信息
</legend>
<input type="text" name="title" required placeholder="请输入">
<button>提交
</button>
</fieldset>
效果：
4.8 打开或关闭历史记录 autocomplate
<form action="" autocomplete="off">
<fieldset>
<legend>注册信息
</legend>
<input type="text" name="title" required placeholder="请输入">
</fieldset>
<button>提交
</button>
</form>
打开:on 关闭:off
