目录
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"><labelfor="man">男</label>
写法二:
使用label标签包裹文字和表单控件,不需要属性
<label><input type="radio">女</label>
按钮
标签:
<button type="">按钮</button>
| type属性值 | 说明 | 
|---|---|
| submit | 提交按钮,点击后可以提交数据到后台(默认功能) | 
| reset | 重置按钮,点击后将表单控件恢复默认值 | 
| button | 普通按钮,默认没有功能,一般配合JavaScript使用 | 
需要放到form表单标签中才可使用