表单

1. `<form>` 标签

<form> 标签用于创建 HTML 表单，表单用于收集用户输入的数据。表单可以包含各种输入控件，如文本框、复选框、单选按钮、下拉列表等。

1.1 基本语法

1<form action="URL" method="GET|POST" enctype="enctype" target="target" onsubmit="onsubmit" novalidate autocomplete="on|off">
2  <!-- 表单控件 -->
3</form>

action：指定表单提交的 URL。当用户提交表单时，数据将被发送到这个 URL。
method：指定表单数据的提交方式，常用的有 GET 和 POST。
- GET：表单数据会附加在 URL 之后，适合传递少量数据。
- POST：表单数据会包含在 HTTP 请求体中，适合传递大量数据或敏感信息。
enctype：指定表单数据的编码类型。当表单中包含文件上传时，必须设置为 multipart/form-data。
target：指定提交表单后在何处打开响应。值可以是 _self（默认值，当前窗口）、_blank（新窗口）、_parent（父窗口）、_top（顶级窗口）。
onsubmit：在表单提交时执行的脚本，例如用于表单验证。
novalidate：禁用 HTML5 的表单验证功能。
autocomplete：控制浏览器是否自动填充表单字段。值为 on（允许自动填充）或 off（禁用自动填充）。

1.2 HTML4 和 HTML5 的区别

HTML4：<form> 标签的属性较少，主要依赖 action 和 method。
HTML5：新增了一些属性，如 autocomplete、novalidate 等，增强了表单的功能和用户体验。

2. 输入控件 `<input>`

<input> 标签是表单中最常用的控件，用于创建各种类型的输入字段。

2.1 基本语法

1<input type="text" name="username" value="默认值" placeholder="提示信息" autofocus disabled readonly required pattern="正则表达式" min="最小值" max="最大值" minlength="最小长度" maxlength="最大长度">

type：指定输入控件的类型，如 text、password、radio、checkbox 等。
name：指定输入控件的名称，用于表单提交时标识该字段。
value：指定输入控件的默认值。
placeholder：提供输入框的提示信息，用户输入时消失。
autofocus：页面加载时自动聚焦到该输入框。
disabled：禁用输入框，用户无法编辑，且不会被提交。
readonly：输入框内容只读，用户无法修改，但可以被提交。
required：指定输入字段为必填项。
pattern：指定输入字段的正则表达式验证规则。
min 和 max：限制输入字段的最小值和最大值。
minlength 和 maxlength：限制输入字段的最小长度和最大长度。

2.2 常见的输入类型

2.2.1 文本输入 (`type="text"`)

1<input type="text" name="username" placeholder="请输入用户名">

2.2.2 密码输入 (`type="password"`)

1<input type="password" name="password" placeholder="请输入密码">

输入内容会被隐藏，显示为圆点或星号。

2.2.3 单选按钮 (`type="radio"`)

1<input type="radio" name="gender" value="male"> 男
2<input type="radio" name="gender" value="female"> 女

name：相同的 name 值表示这些单选按钮属于同一组，用户只能选择其中一个。
value：指定选中时提交的值。

2.2.4 复选框 (`type="checkbox"`)

1<input type="checkbox" name="hobby" value="reading"> 阅读
2<input type="checkbox" name="hobby" value="sports"> 运动

name：相同的 name 值表示这些复选框属于同一组，用户可以选择多个。
value：指定选中时提交的值。

2.2.5 文件上传 (`type="file"`)

1<input type="file" name="file">

允许用户上传文件。

2.2.6 提交按钮 (`type="submit"`)

1<input type="submit" value="提交">

点击后提交表单。

2.2.7 重置按钮 (`type="reset"`)

1<input type="reset" value="重置">

点击后重置表单中的所有输入字段。

2.3 HTML5 新增的输入类型

2.3.1 电子邮件 (`type="email"`)

1<input type="email" name="email" placeholder="请输入电子邮件">

自动验证输入内容是否为有效的电子邮件格式。

2.3.2 数字 (`type="number"`)

1<input type="number" name="age" min="1" max="100">

限制输入为数字，并可以设置最小值和最大值。

2.3.3 日期 (`type="date"`)

1<input type="date" name="birthday">

提供日期选择器。

2.3.4 颜色 (`type="color"`)

1<input type="color" name="favcolor">

提供颜色选择器。

2.3.5 范围 (`type="range"`)

1<input type="range" name="volume" min="0" max="100">

提供一个滑动条，用户可以选择一个范围内的值。

2.4 `<input>` 的其他重要属性

2.4.1 `disabled` 属性

作用：disabled 属性用于禁用表单控件，使其不可用且不可编辑。被禁用的控件不会被提交。
示例：

1<input type="text" name="username" value="默认值" disabled>

2.4.2 `readonly` 属性

作用：readonly 属性用于将输入框设置为只读状态，用户可以查看内容，但不能修改。与 disabled 不同的是，readonly 的字段仍然可以被提交。
示例：

1<input type="text" name="username" value="默认值" readonly>

2.4.3 `disabled` 和 `readonly` 的区别

disabled：
- 禁用输入框，用户无法编辑。
- 输入框的内容不会被提交。
- 通常用于临时禁用某些字段，例如在某些条件下才允许用户编辑。
readonly：
- 输入框内容只读，用户无法修改。
- 输入框的内容仍然可以被提交。
- 适用于需要显示固定数据，但不允许用户修改的场景。

2.4.4 示例：结合 `disabled` 和 `readonly`

 1<form action="submit.php" method="POST">
 2  <label for="username">用户名：</label>
 3  <input type="text" id="username" name="username" value="默认值" readonly><br><br>
 4
 5  <label for="password">密码：</label>
 6  <input type="password" id="password" name="password" disabled><br><br>
 7
 8  <label for="email">电子邮件：</label>
 9  <input type="email" id="email" name="email" placeholder="请输入电子邮件" required><br><br>
10
11  <input type="submit" value="提交">
12</form>

在这个表单中：

用户名输入框是只读的，用户可以看到但不能修改内容，提交时会发送该字段。
密码输入框被禁用，用户无法编辑，提交时不会发送该字段。
电子邮件输入框是必填项，用户必须输入有效的电子邮件地址。

3. 其他表单控件

3.1 `<textarea>` 多行文本输入

1<textarea name="message" rows="10" cols="30">默认文本</textarea>

rows：指定文本区域的行数。
cols：指定文本区域的列数。

3.2 `<select>` 下拉列表

1<select name="cars" multiple>
2  <option value="volvo">Volvo</option>
3  <option value="saab">Saab</option>
4  <option value="mercedes">Mercedes</option>
5  <option value="audi">Audi</option>
6</select>

multiple: 允许用户选择多个选项。
name：指定下拉列表的名称。
value：每个 <option> 的 value 属性指定选中时提交的值。

3.3 `<button>` 按钮

1<button type="submit">提交</button>
2<button type="reset">重置</button>
3<button type="button">普通按钮</button>

type：指定按钮的类型，submit 用于提交表单，reset 用于重置表单，button 用于普通按钮。

3.4 `<datalist>` 提供下拉选项

1<input list="browsers" name="browser">
2<datalist id="browsers">
3  <option value="Chrome">
4  <option value="Firefox">
5  <option value="Safari">
6</datalist>

3.5 `<output>` 显示计算结果

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2  <input type="number" id="a" name="a" value="50">
3  +<input type="number" id="b" name="b" value="50">
4  =<output name="result">100</output>
5</form>

4. 表单验证

4.1 HTML5 新增的验证属性

required：指定输入字段为必填项。
pattern：指定输入字段的正则表达式验证规则。
min 和 max：限制输入字段的最小值和最大值。
minlength 和 maxlength：限制输入字段的最小长度和最大长度。

4.2 示例

1<input type="text" name="username" required minlength="3" maxlength="10">
2<input type="email" name="email" required>
3<input type="number" name="age" min="18" max="100">

5. 表单的布局和样式

5.1 `<label>` 标签

<label> 标签用于为表单控件提供标签，提升用户体验。

1<label for="username">用户名:</label>
2<input type="text" id="username" name="username">

for：指定与 label 关联的表单控件的 id。

<label> 也可以直接包裹表单控件，而无需使用 for 属性。这种方式同样可以实现点击 <label> 让表单控件获得焦点的效果。

1<label>
2  <input type="checkbox" name="agree"> 我同意条款
3</label>

点击“我同意条款”文字或复选框时，复选框的状态会改变。

5.2 `<fieldset>` 和 `<legend>` 标签

<fieldset> 标签用于将表单中的相关元素分组，<legend> 标签用于定义分组的标题。

1<fieldset>
2  <legend>用户信息</legend>
3  <label for="username">用户名:</label>
4  <input type="text" id="username" name="username">
5  <label for="password">密码:</label>
6  <input type="password" id="password" name="password">
7</fieldset>

6. 总结

<form> 标签用于创建表单，action 和 method 是基本属性。

7. 单词总结

一、HTML标签（Tags）

<form> - 表单容器
<input> - 输入控件
<select> - 下拉菜单
<option> - 下拉选项
<textarea> - 多行文本域
<fieldset> - 表单分组
<legend> - 分组标题
<label> - 标签关联
<button> - 按钮

二、Input类型（Type属性值）

text - 文本输入
password - 密码输入
radio - 单选按钮
checkbox - 复选框
submit - 提交按钮
file - 文件上传
hidden - 隐藏字段
email - 邮箱验证
date - 日期选择

三、关键属性（Attributes）

action - 数据提交地址
method - 提交方法（GET/POST）
name - 数据标识名称
value - 默认值
placeholder - 输入提示
required - 必填验证
rows/cols - 文本域行列数
enctype - 编码类型（如文件上传）

四、其他相关术语

Validation - 表单验证
Data submission - 数据提交
Browser DevTools - 浏览器开发者工具
Security - 安全性（如POST加密）

表单

1. <form> 标签

1.1 基本语法

1.2 HTML4 和 HTML5 的区别

2. 输入控件 <input>

2.1 基本语法

2.2 常见的输入类型

2.2.1 文本输入 (type="text")

2.2.2 密码输入 (type="password")

2.2.3 单选按钮 (type="radio")

2.2.4 复选框 (type="checkbox")

2.2.5 文件上传 (type="file")

2.2.6 提交按钮 (type="submit")

2.2.7 重置按钮 (type="reset")

2.3 HTML5 新增的输入类型

2.3.1 电子邮件 (type="email")

2.3.2 数字 (type="number")

2.3.3 日期 (type="date")

2.3.4 颜色 (type="color")

2.3.5 范围 (type="range")

2.4 <input> 的其他重要属性

2.4.1 disabled 属性

2.4.2 readonly 属性

2.4.3 disabled 和 readonly 的区别

2.4.4 示例：结合 disabled 和 readonly