持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情
表单元素
HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单。常见的表单元素有：
- form：表单, 一般情况下，其他表单相关元素都是它的后代元素
- input：单行文本输入框、单选框、复选框、按钮等元素
- textarea：多行文本框
- select、option：下拉选择框
- button：按钮
- label：表单元素的标题
input元素
表单元素使用最多的是input元素，input元素有如下常见的属性:
-
type：input的类型。
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
- radio：单选框
- checkbox：复选框
- button：按钮
- reset：重置
- submit：提交表单数据给服务器
- file：文件上传
-
readonly：只读
-
disabled：禁用
-
checked：默认被选中。只有当type为radio或checkbox时可用。
-
autofocus：当页面加载时，自动聚焦
-
name：名字。在提交数据给服务器时，可用于区分数据类型
-
value：取值
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected。布尔属性可以没有属性值，写上属性名就代表使用这个属性。如果要给布尔属性设值，值就是属性名本身。
表单按钮
表单可以实现按钮效果：
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
我们也可以通过按钮来实现。
input和label
label元素一般跟input配合使用，用来表示input的标题。labe可以跟某个input绑定，点击label就可以激活对应的input变成选中。
radio使用
我们可以将type类型设置为radio变成单选框。name值相同的radio才具备单选功能。
checkbox的使用
我们可以将type类型设置为checkbox变成多选框。属于同一种类型的checkbox，name值要保持一致。
textarea的使用
textarea的常用属性:
- cols：列数
- rows：行数
缩放的CSS设置:
- 禁止缩放：resize: none
- 水平缩放：resize: horizontal
- 垂直缩放：resize: vertical
- 水平垂直缩放：resize: both
select和option
option是select的子元素，一个option代表一个选项。
select常用属性：
- multiple：可以多选
- size：显示多少项
option常用属性：
- selected：默认被选中
