form表单

form表单

---

form表单是一个包含表单元素的区域，允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。是前后端交互的重要标签。

表单下常常包含以下标签：

1. input：输入，选择或发出指令
2. textarea：文本域，用于输入大批量的数据
3. select：下拉选择框
4. button：按钮
5. label：提示标签

---

form常用属性

1. name：规定表单的名称。
2. action：规定当提交表单时，向何处发送表单数据。默认为当前页面
3. method：规定如何发送表单数据（即提交方式，常用get或post），默认get

---

input标签

用于输入，选择或发出指令。根据其type属性值的不同，呈现不同的状态，具体如下：

1. text：文本输入框，常用属性如下

   1. placeholder：提示文本
   2. value：默认值
   3. name：名称
   4. readonly：只读，布尔属性
   5. required：必须输入，布尔属性
   6. disabled：不可用，布尔属性，input,select,textarea的通用属性
   7. minlength：最小长度，提交时判定
   8. maxlength：最大可输入的长度
   9. pattern：正则匹配
   10. antocomplete ：自动记录输入，以后输入时可以自动选择完成。可选值为on/off，默认on

   其中的value,name,readonly,required,disabled是input,select,textarea的通用属性，但属性value,name的含义可能会有不同

2. password：密码输入框，属性和text一样，主要区别是，会自动隐藏输入的内容

3. button：普通按钮，通常用来触发脚本代码，常用属性value，表示按钮的提示文字

4. submit：提交按钮，用来将表单数据提交到后台。常用属性同普通按钮

5. radio：单选按钮，常用属性如下：

   1. name：名称，必须有，相同name的单选会作为一组，会相互排斥
   2. checked：默认选中，布尔属性
   3. value：选项对应的值

   <form>
       <input type="radio" name="sex" checked>男
       <input type="radio" name="sex">女 <br>
       <input type="radio" name="age">1-8
       <input type="radio" name="age">9-18
       <input type="radio" name="age" checked>18+
   </form>
   

   
   其中name="sex"的和name="age"的是不同的两组单选按钮，而男和女由于其name都为sex，所以属于同一组，会互斥

6. checkbox：复选按钮，基本和单选按钮一样，只是多选按钮中相同name的不会再互斥，但相同name的还是作为同一组

7. file：文件上传按钮

8. image：图片按钮，作用同提交按钮一样，只是用属性src替换了value，表示图片地址

9. reset：重置按钮，将表单所有组件输入的内容全部还原为初始状态。常用属性同普通按钮

---

textarea 标签

文本域，用于输入大批量的文本，属性和用法大致和文本框一样，主要区别如下：

• 其是双标签，所以默认内容不再是写在value属性中，而是直接写再标签里。
• 自有属性col（列数）和row（行数），这两个主要用于调整文本域大小，不会限制输入的文本。

---

select标签

下拉选择框，其选项写在子标签option中，常见属性如下：

1. multiple：多选，布尔属性
2. size：显示的选项数

option标签的value属性表示选项对应的值

---

button标签

按钮，在form中使用时有提交功能，和<input type="submit">的功能一样。
标签的文本即是按钮的提示文字

---

label标签

提示标签，主要用于提示后面组件的含义/作用

属性for的值是：要提示的组件的id