表单就是用来收集信息，填入数据的。就像我们在生活中填的调查表，保险单等。表单元素允许我们在页面里填入信息、选择对应信息等，下面我们就来学习一下，也做出来一个表单。
首先要先了解表单元素，通过元素才能做出大概轮廓，再用属性来设置需求。
一、表单元素
- form：定义供用户输入的表单。
- fieldset：定义域。即输入区加有文字的边框。
- legend：定义域的标题，即边框上的文字。
- label：定义一个控制的标签。即输入框前的文字。
- input：定义输入域，可设置type属性。
- textarea：定义文本框，默认可通过鼠标拖动调整 大小。
- button：定义按钮。
- select：定义选择列表，下拉的选择列表。
- optgroup：下拉列表的分类标签
- option：下拉列表中的选项。
在了解完元素之后，了解下表单的属性，为了做出更加丰富完美的表单。
二、表单属性
| aside | 侧边栏 |
| get post | 发送表单数据常用值 |
| readonly | 只读属性 |
| disabled | 禁用属性 |
| action | 表示向何处发送表单数据：action="目标网页" |
| type | 指定元素的类型 |
| name | 指定表单元素的名称 |
| value | 元素的提交值：value(type为radio时必须指定一个值) |
| size | 指定表单元素的初始宽度：size(type为text或passwork时,表单元素的大 小以字符为单位,对于其他类型,宽度以像素为单位) |
| maxlength minlength | 输入的最大字符数和最小字符数(type为text或passwork时)： maxlength、minlength |
| checked | type为radio或checkbox时,指定按钮默认被选中 |
| placeholder | input类型文本框内容提示(hint)：placeholder="内容提示语"(提示语默认 显示,当文本框中输入内容时提示语消失) |
| required | 规定文本框填写不能为空,否则不允许用户提交表单 |
| pattern | 用户输入的内容必须符合正则表达式所指的规则,否则无法提交表单 (pattern="正则表达式")： ①昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}" |
先大致了解每个属性的作用，下面会详细解释到每个元素、属性的用法、作用、效果。
三、表单的组成（重要）
3.1表单域（form）
1）定义：表单域是一个包含表单元素的区域。
在 HTML 标签中，<form>窗体顶端标签用于定义表单域，以实现用户信息的收集和传递。
<form>窗体顶端会把它范围内的表单元素信息提交给 服务器.
2）语法格式：
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>
3）相关属性：
- action：url地址 ； 指定接收并处理表单的数据的服务器程序的url地址。
- method：“get” “post” ；表单的提交方式。
- get：从服务器获取数据，数据长度有限制，安全性低，容易被第三方看见，能缓存 。
- post：向服务器提交数据，数据长度不限，安全性高，不能缓存，（一般情况下推荐）。
- name：名称 ；表单名称。
3.2<input>属性
1）定义：在表单元素中<input>标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段
拥有很多种形式。
2）语法格式：
<input type="属性值" />3）属性
| 属性值 | 描述 |
| button | 可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段,该字段中字符被掩盖 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有设置数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字，用户可在其中输入文本默认宽度为二十个字符（size） |
除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
| name | 用户自定义 | 定义input元素名称 |
| value | 用户自定义 | 规定input元素的值 |
| checked | checked | 规定input元素首次加载被选中 |
| maxlength | 正整数 | 规定输入文字中字符的最大程度 |
1）文本框
语法：
<input type="text(文本框)" name="text" maxlength="最大长度值" minlength="
最小长度值"> <tr>
<th>所在地区</th>
<th align="left">
<input type="text" placeholder="北京思密达">
</th>
</tr>placeholder 是提示文本
2）密码框
<input type="password(密码框)" name="passwork" maxlength="最大长度值"
minlength="最小长度值">3）复选框
<input type="checkbox" id="checkbox1" name="checkbox" value="复选框">单身
<input type="checkbox" id="checkbox2" name="checkbox" value="复选框">已婚
<input type="checkbox" id="checkbox3" name="checkbox" value="复选框">离婚示例：
<tr>
<th>喜欢的类型</th>
<th align="left">
<input type="checkbox" id="checkbox1" name="checkbox" value="复选框">可爱的
<input type="checkbox" id="checkbox2" name="checkbox" value="复选框">小鲜肉
<input type="checkbox" id="checkbox3" name="checkbox" value="复选框">老腊肉
</th>
</tr>4）单选框
<input type="radio" id="radio" name="radio" value="单选按钮">男
<input type="radio" id="radio2" name="radio" value="单选按钮">女
5）邮箱
<input type="email" name="email">6）网址
<input type="url(网址)" name="userUrl">type="url" 属性用于指定这是一个网址输入框，这样浏览器可以对输入的值进行验证。如 果用户输入的值不是有效的网址格式，浏览器会显示一个错误提示
7）数字
可以使用 标签和 type="number" 属性来创建一个数字 输入框。这个输入框将限制用户输入的内容只能是数字，同时也提供了一些控制输入值范 围的属性，例如 min 和 max 属性，用于设置允许输入的最小值和最大值，以及 step 属性， 用于设置每次增加或减少的步长。
<input type="number" name="number" min="允许的最小值" max="允许的最
大值" step="合法的数字间隔">8）滑块
可以使用 <input> 标签和 type="range" 属性来创建一个滑块控
件。滑块控件可以让用户通过拖动滑块来选择一个数值，这个数值可以是整数或浮点数，
也可以设置最小值、最大值和步长。
<input type="range" name="range" min="允许的最小值" max="允许的最大值
" step="合法的数字间隔">9）搜索框
可以使用 <input> 标签和 type="search" 属性来创建一个搜索
框控件。搜索框控件可以让用户输入关键词，然后通过提交表单或者监听 onsearch 事件来
触发搜索操作。
<input type="search(搜索框)" name="sousuo">10）隐藏域
隐藏域是一种在 HTML 表单中隐藏输入控件的方法。隐藏域的作用是在表
单提交时向服务器传递一些数据，这些数据不需要用户进行手动输入或选择，而是由开发
者在 HTML 代码中提前设置好的。
<input type="hidden(隐藏域)" value="666" name="userID">11）重置按钮
重置按钮（Reset）是 HTML 表单中的一个按钮，用于将输入框、文本域
等表单元素的值恢复为默认值。当用户在填写表单时，一些输入值可能已经被修改，而用
户希望还原为初始状态时，可以使用重置按钮。
<input type="reset" name="butReset" value="reset 按钮">12）提交按钮
提交按钮（Submit）是 HTML 表单中的一个按钮，用于提交表单数据。
当用户填写完表单后，点击提交按钮，表单数据就会被发送给服务器进行处理。
<input type="submit" name="butSubmit" value="submit 按钮">13）、普通按钮
普通按钮（Button）是 HTML 表单中的一个按钮，与提交按钮不同，它 没有预定义的行为。相当于一个可自定义操作的按钮。
<input type="button" name="butButton" value="button 按钮">3.3<label>标签
（1）定义：<label> 标签为 input 元素定义标注（标签）。用于绑定一个表单
元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的
表单元素上,用来增加用户体验.
（2）语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />（3）核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。
3.4<select> 表单元素
（1）使用: 如果有多个选项让用户选择，并且想要节约页面空间时，下拉列表框使用 <select> 元素，并在元素内添加 <option> 元素作为选项。其具有size属性，一旦给size属性，<select>元素会自动生成列表数组。
<select name=”select” id=”select” >
<option value="year">--请选择年份--</option>
<option value="year">2001</option>
<option value="year">2002</option>
<option value="year">2003</option>
<option value="year">2004</option>
</select>
“optgroup” 是 HTML 中用于对下拉列表中的选项进行分组的标签。
使用 “optgroup” 可以使下拉菜单更加清晰和有条理。它允许你将相关的选项组合在一起，并为每个组提供一个标签。
<select>
<optgroup label="天津">
<option>包子</option>
<option>麻花</option>
</optgroup>
</select>
<select>
<optgroup label="北京">
<option selected="selected">烤鸭</option>
<option>炸酱面</option>
</optgroup>
</select>
3.5 <textarea> 表单元素
（1）定义：
<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。框的大小可以用鼠标调大小
（2）语法：
<textarea name="showText" cols="显示的列数" rows="显示的行数">文本内
容</textarea>通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显
示的行数”我们在实际开发中不会使用，都是用 CSS 来改变大小。
案例：
<th>自我介绍</th>
<th align="left">
<textarea name="showText" cols="20" rows="2"></textarea>
</th>
学到了吧
