表单元素

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：取值

type类型的其他取值和input的其他属性查看文档

布尔属性（boolean attributes）

常见的布尔属性有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：默认被选中

form常见的属性

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

• form可以将整个表单作为一个整体来进行操作;
• 比如对整个表单进行重置;
• 比如对整个表单的数据进行提交;

form常见的属性

• action：用于提交表单数据的请求URL
• method：请求方法（get和post），默认是get
• target：在什么地方打开URL（参考a元素的target）

请求方式的对比