#

常见的表单元素

• form 表单，一般情况下其他表单相关元素都是它的后代元素
• input 单行文本输入框、单选框、复选框、按钮等
• textarea 多行文本框
• select option 下拉选择框
• button 按钮
• label 表单元素的标题

input 元素

input 元素有如下常见的属性

• text: 文本输入框(明文输入)
• password: 密码文本输入框
• radio: 单选框
• checkbox: 复选框
• button: 按钮
• reset: 重置
• submit: 提交表单数据给服务器
• file: 文件上传
• readonly: 只读
• disabled: 禁用
• checked: 默认选中，只有当 type 为 radio 或者 checkbox 时可用
• autofocus: 当前页面加载，自动聚焦
• name: 名字
• value: 取值
• 文档地址 https://developer。mozilla.org/zh-CN/docs/Web/HTML/Element/Input

布尔属性

常见的布尔属性有 disabled, checked, readonly, multiple, autofocus, selected

布尔属性没有属性值，写上属性名就代表使用这个属性，如果要给布尔属性设置值，写上属性名就代表使用这个属性

表单按钮

input 在表单中可以实现按钮的效果

• 普通按钮 <input type="button" value="普通按钮"/> 使用 value 属性设置按钮文字
• 重置按钮 <input type="reset" value="重置按钮"/> 重置它所属 form 的所有表单元素，包括 input, textare, select
• 提交按钮 <input type="submit" value="提交按钮"/> 提交它所属 form 的表单数据给服务器 input, textare, select

通过按钮来实现

• <button type="button">普通按钮</button>
• <button type="reset">重置按钮</button>
• <button type="submit">提交按钮</button>

input 和 label 的关系

• label 元素一般和 input 配合使用，用来解决 input 的标题
• label 可以和某个 input 绑定，点击 label 就可以激活对应的 input 变成选中

radio 使用

name 相同的 radio 才具备单选功能

checkbox 的使用

可以将 input 的 type 属性设置为 checkbox 即可变为多选框，同一种类型的 checkbox, name 值要保持一致

textarea的使用

常用的属性

• col: 列数
• rows: 行数

缩放的CSS设置

• 禁止缩放：resize: none
• 水平缩放： resize: horizontal
• 垂直缩放： resize: vertical
• 水平垂直缩放： resize: both

select和option的使用

option是select的子元素，一个option代表一个选项

select常用属性

• multiple 可以多选
• size 可以显示多少项

option常用属性

• selected 默认被选中

form常见的属性

form通常作为表单元素的父元素

• form可以将整个表单作为一个整体进行操作
• 表单重置
• 表单提交

form常见的属性

• action 用于提交表单的请求URL
• method 请求方法，默认是GET
• target 在什么地方打开URL