目录
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表单标签中才可使用