IT课程 HTML基础 013_表单和用户输入
表单
HTML 表单（Form）是 HTML 中非常重要的一部分，它能让用户在网页上输入信息，并将信息提交到服务器。
示例：
<form action="/submit" method="post"> <!-- 表单元素在这里 --></form><form>元素定义了用户输入数据的区域，并且可以包含不同类型的输入元素，如文本域<textarea>、下拉列表<select>、单选框<radio>、复选框<checkbox>和按钮<button>等。
表单属性：
action：定义表单数据提交到服务器后的处理文件的 URL。method：定义数据发送到服务器所使用的HTTP方法，常用的值有 “get” 和 “post”。name： 用于指定表单的名称。表单名称用于标识表单，并在服务器端处理表单数据时使用。enctype：用于指定表单数据的编码方式。表单数据可以使用application/x-www-form-urlencoded或multipart/form-data编码方式。autocomplete：用于指定是否启用表单的自动完成功能。如果设置为on，则浏览器将会自动填充表单中之前输入过的数据。novalidate：用于指定是否验证表单数据。如果设置为on，则表单数据在提交之前将不会进行验证。
[!小结]
- form 表单本身并不可见。
文本字段
在表单中，我们经常需要用户输入字母、数字等文本内容。这可以通过<input>元素完成，其type属性设置为 “text”。
示例：
<form>姓名: <input type="text" name="name"><br>年龄: <input type="text" name="age"></form>效果：
[!小结]
- 在大多数浏览器中，文本域的默认宽度是 20 个字符。
密码字段
如果你需要用户输入密码，可以将<input>元素的type属性设置为 “password”，输入的内容会被隐藏起来。
示例：
<form>密码: <input type="password" name="pwd"></form>效果：
[!小结]
- 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
单选按钮（Radio Buttons）
单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type属性值为 “radio”。
示例：
<form action="">性别：<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女</form>效果：
[!小结]
- 单选按钮的
name属性值必须相同，否则它们将不会属于同一个组。checked属性用于指定单选框是否默认选中。
复选框（Checkboxes）
复选框可以选取一个或多个选项，使用 <input type="checkbox"> 定义
示例：
<form> 您使用过的APP： <input type="checkbox" name="app" value="jd">京东 <input type="checkbox" name="app" value="wechat">微信 <input type="checkbox" name="app" value="qq">QQ <input type="checkbox" name="app" value="douyin">抖音</form>效果：
[!小结]
checked属性用于指定复选框是否默认选中。
下拉列表（select）
下拉列表可以让用户从多个选项中选择一个。它由<select>元素创建，并使用<option>元素来定义选项。
示例：
<form action=""> 请选择您的国家： <select name="country"> <option value="china">中国</option> <option value="us">美国</option> <option value="japan">日本</option> </select></form>效果：
[!小结]
selected属性用于指定下拉列表的默认选项。disabled属性用于指定下拉列表是否可用。- 可以使用
size属性来指定下拉列表中可见选项的数量。
提交按钮（Submit、Reset、Button）
表单通常需要一个按钮来提交或确认用户的输入。submit、reset 和 button 都是 HTML 中的表单按钮元素。
| 类型 | 属性 | 功能 | 使用场景 |
|---|---|---|---|
| submit | type="submit" | 提交表单数据 | 提交登录表单、提交注册表单等 |
| reset | type="reset" | 重置表单数据 | 重置搜索表单、重置购物车等 |
| button | type="button" | 无 | 通常配合JavaScript使用 执行操作、跳转页面等 |
| image | type="image" | 使用图像来表示按钮 | 执行操作、跳转页面等 |
示例：
<form action="/submit" method="post"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <button type="button" value="确认按钮">确认按钮</button> <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="图像按钮" width="50" height="50"></form>效果：
[!小结]
- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.zhaojian.net/?page=1，这里的 page=1 就是 get 方法提交的数据。
表单元素及属性
| 元素 | 类型 | 描述 | 属性 |
|---|---|---|---|
form | 表单 | 表单的容器元素。它指定表单的名称、提交方式和提交地址。 | name、action、method、enctype、accept-charset、target、autocomplete、novalidate |
input | 输入 | 表单中最常用的元素。它可以接收各种类型的用户输入，例如文本、数字、日期等。 | type、name、value、placeholder、disabled、readonly、autocomplete、required、pattern、min、max、step |
textarea | 输入 | 用于接收多行用户输入。 | name、cols、rows |
select | 选择 | 用于接收用户选择，它可以包含多个选项。 | name、multiple、size |
option | 选择 | 用于 select 元素中，定义可供选择的选项。 | value、selected |
radio | 选择 | 用于接收单选用户输入。它可以包含多个单选框。 | name、value、checked |
checkbox | 选择 | 用于接收多选用户输入。它可以包含多个复选框。 | name、value、checked |
submit | 按钮 | 用于提交表单。 | value |
reset | 按钮 | 用于重置表单。 | value |
button | 按钮 | 用于创建按钮。它可以用于提交表单、重置表单、或执行其他操作。 | type、name、value |
label | 标签 | 用于为输入元素提供标签。标签可以帮助用户理解输入元素的用途。 | for |
fieldset | 分组 | 用于将表单元素分组。 | name、legend |
legend | 标题 | 用于为 fieldset 元素提供标题。 | |
optgroup | 分组 | 用于将选项分组。 | label |