HTML(6)——表单
目录
input标签基本使用
input标签占位
单选框radio
上传文件file
下拉菜单
文本域
label标签
按钮
input标签基本使用
input标签type属性值不同，则功能不同
<input type="...">
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
input标签占位
<input type="..." placeholder="提示信息">,文本框和密码框都可使用。
单选框radio
| 属性名 | 作用 | 说明 |
|---|---|---|
| name | 控件名称 | 控件分组，同组只能选中一个 |
| checked | 默认选中 | 属性名和属性值相同，简写为一个单词 |
上传文件file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type="file" multiple>
下拉菜单
标签：select嵌套option,select是下拉菜单整体，option是菜单的每一项,select表示默认选中，否则默认选中第一个。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>怀化</option>
</select>
文本域
作用：多行输入文本的表单控件
标签：textarea,双标签
label标签
作用：网页中，某个标签的说明文本，可以增大表单控件的点击范围。
写法一：
label标签只包裹内容，不包裹表单控件。
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
写法二：
使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>
按钮
标签：
<button type="">按钮</button>
| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合JavaScript使用 |
需要放到form表单标签中才可使用