HTML表单标签作用:收集用户信息,例如登录、注册、搜索等场景。
1. input标签
语法:<input type="...">
input标签type属性值不同,则功能不同。
占位文本
作用:提示信息
<input type="..." placeholder="提示信息">
2. 单选框radio
单选radio需要通过name属性来分组。
html
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
3.多选框checkbox
多选框也叫复选框,默认选中:checked。
html
<input type="checkbox" checked">内容
4. 上传文件file
默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能。
html
<input type="file" multiple>
5. 下拉菜单
语法:标签:select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项。
html
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
6. 文本域
作用:多行输入文本的表单控件。
标签:<textarea>默认提示文字</textarea>
7. label标签
作用:网页中,某个标签的说明文本
增大点击范围:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。
- 写法1:
label标签只包裹内容,不包裹表单控件。
设置label标签的for属性值和表单控件的id属性值相同。
html
<input type="radio" id="man"><label for="man">男</label>
- 写法2:
使用label标签包裹文字和表单控件,不需要属性。
html
<label><input type="radio">女</label>
8. 按钮button标签
语法:<button type="">按钮</button>
type属性值: