前端三剑客
HTML

HTML 表单

# HTML 表单

# 1. 表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 2. `<label>` 标签

<label> 标签在 HTML 中用于为用户界面中的某个控件（如文本框、下拉列表等）定义标签。它的主要目的是提升用户体验，特别是对那些使用屏幕阅读器的用户和提升可点击区域的用户。

基本用法

<label for="element_id">Label Text</label>
<input type="text" id="element_id">

1
2

在上述示例中，<label> 标签的 for 属性值与对应的控件的 id 属性值相同，这样可以将标签与控件关联起来。当用户点击标签时，焦点会自动转移到对应的控件上。

for 属性：指定关联的表单控件的 id。当用户点击标签时，焦点会转移到关联的控件上。

注意事项

将表单元素放在 <label> 标签内也能扩展表单元素的点击区域，无需额外的 id 和 for 属性。但是如果表单元素和 <label> 标签不在同一位置，可能不适用。

注意标签 “性别:” 本身没有 for 属性，因为它用于描述一组控件（多个单选按钮）。 每个单选按钮都有一个对应的 label，当用户点击“男”或“女”标签时，分别选择对应的单选按钮。

<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

1
2
3
4
5

# 3. 下拉列表（select）

下拉列表使用 <select> 标签定义，可以包含多个 <option> 标签，每个 <option> 标签定义一个选项。用户可以从下拉列表中选择一个或多个选项。

基本用法： 定义一个下拉列表，并包含多个选项。

<select name="fruits">
    <option value="apple">苹果</option>
    <option value="orange">橙子</option>
    <option value="banana">香蕉</option>
</select>

1
2
3
4
5

常用属性：

name：下拉列表的名称，用于表单提交时传递数据。
multiple：允许多选，添加该属性后用户可以选择多个选项。
size：显示的选项数量，不会改变实际的选项数量，只影响显示的数量。

选项的属性：

value：选项的值，用于表单提交时传递给服务器。
selected：默认选中的选项。

# 4. `<input>` 标签

# 4.1 `<input>` 标签简介

<input> 标签用于在表单中创建各种类型的输入控件，允许用户输入数据。它是一个空标签，常用于各种表单元素，如文本框、复选框、单选按钮、提交按钮等。

# 4.2 标签常见属性

type：指定输入控件的类型，如 text、password、radio、checkbox、submit、button 等。
name：指定输入控件的名称，在表单提交时用作键。
value：指定输入控件的初始值。
placeholder：提供输入提示，当输入框为空时显示的提示文本。
required：指定输入控件为必填项。
readonly：指定输入控件为只读。
disabled：禁用输入控件。
maxlength：设置输入控件允许的最大字符数。
size：设置输入控件的宽度（以字符数为单位）。
autocomplete：设置是否启用自动完成功能。
min 和 max：设置输入控件的最小值和最大值（适用于 number、date 等类型）。
step：设置输入控件的步长（适用于 number、range 类型）。
multiple：允许多选（适用于 file 和 email 类型）。
accept：规定文件输入应该接受的文件类型（适用于 file 类型）。

# 4.3 标签常见类型

# 1. 文本输入框 (text)

描述：text用于输入单行文本。

<!-- 输入框，用于输入用户名，必填项 -->
<input type="text" name="username" placeholder="请输入用户名" required>

1
2

placeholder：输入框的占位符文本。
required：表示该输入框为必填项。

# 2. 密码输入框 (password)

描述：password用于输入密码，输入的内容会以掩码显示。

<!-- 输入框，用于输入密码，必填项 -->
<input type="password" name="password" placeholder="请输入密码" required>

1
2

placeholder：输入框的占位符文本。
required：表示该输入框为必填项。

# 3. 单选按钮 (radio)

描述：radio用于选择单个选项，同一组的单选按钮 name 属性必须相同。

<!-- 单选按钮，用于选择性别 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

1
2
3

同一组单选按钮的 name 属性必须相同，确保只能选择一个选项。

# 4. 复选框 (checkbox)

描述：checkbox用于选择多个选项。

<!-- 将复选框放在 label 内 -->
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
<label><input type="checkbox" name="hobby" value="music" checked> 音乐</label>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>

1
2
3
4

name 属性：相同的 name 属性选中的值会作为数组提交。
value 属性：定义选中的值，提交到服务器用于标识具体选项。
checked 属性：设置复选框的默认选中状态。

# 5. 提交按钮 (submit)

描述：submit用于提交表单。

<!-- 提交按钮，用于提交表单 -->
<input type="submit" value="提交">

1
2

value：按钮显示的文本。

# 6. 重置按钮 (reset)

描述：reset用于重置表单，将所有输入框重置为初始状态。

<!-- 重置按钮，用于重置表单 -->
<input type="reset" value="重置">

1
2

value：按钮显示的文本。

# 7. 普通按钮 (button)

描述：button用于执行自定义操作。

<!-- 普通按钮，点击时触发 JavaScript 函数 -->
<input type="button" value="点击我" onclick="alert('按钮被点击')">

1
2

value：按钮显示的文本。
onclick：点击按钮时触发的 JavaScript 函数。

# 8. 隐藏字段 (hidden)

描述：hidden用于在表单中包含不需要显示给用户的数据。

<!-- 隐藏字段，用于包含不需要显示的数据 -->
<input type="hidden" name="hiddenField" value="hiddenValue">

1
2

value：隐藏字段的值。

# 9. 文件选择框 (file)

描述：file用于选择文件进行上传。

<!-- 文件选择框，用于选择文件上传 -->
<input type="file" name="fileUpload">

1
2

multiple：允许选择多个文件。
accept：规定可以选择的文件类型。

示例：

允许选择多个文件：

<input type="file" name="fileUpload" multiple>

规定接受的文件类型（例如：只允许选择图片文件）：
```
<input type="file" name="fileUpload" accept="image/*">
```
1

# 10. 数字输入框 (number)

描述：number用于输入数字，可以设置最小值、最大值和步长。

<!-- 数字输入框，用于输入数字 -->
<input type="number" name="age" min="1" max="100" step="1">

1
2

min：最小值。
max：最大值。
step：步长。

# 11. 日期选择框 (date)

描述：date用于选择日期。

<!-- 日期选择框，用于选择日期 -->
<input type="date" name="birthday">

1
2

# 12. 颜色选择器 (color)

描述：color用于选择颜色。

<!-- 颜色选择器，用于选择颜色 -->
<input type="color" name="favcolor">

1
2

# 13. 电子邮件输入框 (email)

描述：email用于输入电子邮件地址，会对输入的格式进行验证。

<!-- 电子邮件输入框，用于输入电子邮件地址 -->
<input type="email" name="email" placeholder="请输入电子邮件">

1
2

placeholder：输入框的占位符文本。

示例：
- 允许输入多个电子邮件地址：
```
<input type="email" name="email" multiple>
```
  1

# 14. 范围选择器 (range)

描述：range用于选择范围值（例如：音量、亮度）。

<!-- 范围选择器，用于选择范围值 -->
<input type="range" name="rangeInput" min="0" max="100" step="1">

1
2

min：最小值。
max：最大值。
step：步长。

# 15. 文本域 (textarea)

描述：textarea 用于输入多行文本内容。

<!-- 文本域，用于输入多行文本 -->
<textarea name="comments" placeholder="请输入您的评论" rows="4" cols="50"></textarea>

1
2

属性说明：
- placeholder：占位符文本，提示用户输入内容。
- rows：定义文本域的行数（高度）。
- cols：定义文本域的列数（宽度）。
- 文本域内的默认文本可直接写在标签内。

示例：带有默认文本的文本域：

<textarea name="comments" rows="4" cols="50">这是默认的评论内容。</textarea>

# 5. 表单综合示例

# 6. Submit和button

# 6.1 提交按钮（Submit）

<input type="submit"> 用于定义提交按钮。当用户单击提交按钮时，表单的内容会被传送到服务器进行处理。表单的 action 属性定义了服务器端处理的文件路径。

<form action="服务器处理文件" method="提交方式">
    <input type="submit" value="按钮文本">
</form>

1
2
3

action：指定表单数据提交到的服务器端处理文件。
method：定义表单数据的提交方式，常用的有 get 和 post 两种。
- get：默认提交方式，表单数据会附加在 URL 中，适用于不敏感数据的提交。例如：https://www.example.com/?name=value。
- post：表单数据包含在请求体内，适用于敏感数据的提交，如用户名和密码等。

使用 GET 方法提交表单
```
<form action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>
```
1
2
3
4
在上面的示例中，当用户在文本框内输入数据并点击提交按钮时，数据会以 GET 方法提交到 html_form_action.php 文件。提交的数据会附加在 URL 中，如 html_form_action.php?user=输入的值。
使用 POST 方法提交表单
```
<form action="html_form_action.php" method="post">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>
```
1
2
3
4
在上面的示例中，数据会以 POST 方法提交到 html_form_action.php 文件。数据包含在请求体内，不会显示在 URL 中。

# 6.1.1 综合示例

以下示例展示了如何使用 GET 和 POST 方法提交表单，以及如何使用 fieldset, legend, 和 label 标签组织表单内容。

<!-- 使用 GET 请求提交数据 -->
<form action="html_form_action.php" method="get">
    <label>Name:
        <input name="submitted-name" autocomplete="name">
    </label>
    <button type="submit">Save</button>
</form>

<!-- 使用 POST 请求提交数据 -->
<form action="html_form_action.php" method="post">
    <label>Name:
        <input name="submitted-name" autocomplete="name">
    </label>
    <button type="submit">Save</button>
</form>

<!-- 使用 fieldset, legend, 和 label 组织表单内容 -->
<form action="html_form_action.php" method="post">
    <fieldset>
        <legend>Title</legend>
        <label>
            <input type="radio" name="radio" value="option1"> Select me
        </label>
        <label>
            <input type="radio" name="radio" value="option2"> Select me too
        </label>
    </fieldset>
    <button type="submit">Submit</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

fieldset 标签：用于将表单中的相关元素进行分组。它创建了一个边框框，将相关的表单控件包围起来，便于用户理解和填写表单内容。
legend 标签：为 fieldset 标签内的内容提供标题。legend 标签通常位于 fieldset 的开头，用于描述 fieldset 的内容。

# 6.1.2 事件处理

可以通过 JavaScript 为提交按钮添加事件处理函数：

<form action="html_form_action.php" method="post">
    Username: <input type="text" name="user" id="username">
    <input type="submit" value="Submit" id="submitBtn">
</form>

<script>
    document.getElementById("submitBtn").addEventListener("click", function(event) {
        // 获取用户名输入框的值
        var username = document.getElementById("username").value;
        // 如果用户名为空，提示用户输入并阻止表单提交
        if (!username) {
            alert("请输入用户名");
            event.preventDefault(); // 阻止表单提交
        }
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在上面的示例中，当用户单击提交按钮时，会检查用户名输入框是否为空，如果为空，则会弹出提示并阻止表单提交。

# 6.2 `<button>` 按钮

<button> 标签用于创建按钮元素。按钮元素可以包含文本或图像，并且可以放置在表单中或独立使用。与 <input type="button"> 标签不同，<button> 标签可以包含嵌套的内容，例如 HTML 元素。

<button type="button|submit|reset" [其他属性]>内容</button>

type：按钮的类型，取值如下：
- button：按钮（默认）。不提交表单，只执行 JavaScript 脚本。
- submit：提交按钮。提交表单数据到服务器。
- reset：重置按钮。重置表单中的所有表单控件到它们的初始值。
其他常用属性：
- name：按钮的名称，用于表单提交时的键。
- value：按钮的值，用于表单提交时的值。
- disabled：禁用按钮，使按钮不可点击。
- autofocus：页面加载后自动聚焦到按钮上。

普通按钮

<button type="button" onclick="alert('普通按钮被点击')">普通按钮</button>

提交按钮

<form action="submit_form.php" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <button type="submit">提交</button>
</form>

1
2
3
4
5

重置按钮

<form>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <button type="reset">重置</button>
</form>

1
2
3
4
5

包含图像的按钮

<button type="button" onclick="alert('图像按钮被点击')">
    <img src="button_icon.png" alt="按钮图标"> 图像按钮
</button>

1
2
3

禁用按钮

<button type="button" disabled>禁用按钮</button>

input 和 button 的区别

内容：<button> 标签可以包含 HTML 内容（如文本、图像），而 <input type="button"> 只能包含纯文本。
行为：<button> 标签可以设置 type 属性为 submit 或 reset 来实现提交或重置表单，而 <input type="button"> 需要通过 JavaScript 实现这些行为。
默认样式：<button> 标签的默认样式受浏览器和操作系统影响较大，通常比 <input type="button"> 更丰富，但可能需要更多的 CSS 自定义样式以达到一致的外观。

# 6.2.1 事件处理

可以通过 JavaScript 为按钮添加事件处理函数：

<button type="button" id="myButton">点击我</button>

<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("按钮被点击");
    });
</script>

1
2
3
4
5
6
7

# 7. 带边框的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 8. 带有输入框和确认按钮的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 9. 带有复选框的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 10. 发送电子邮件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

编辑此页

上次更新: 2025/01/25, 22:32:05

← HTML 布局 HTML 框架→

HTML 表单

# HTML 表单

# 1. 表单和输入

# 2. <label> 标签

# 3. 下拉列表（select）

# 4. <input> 标签

# 4.1 <input> 标签简介

# 4.2 标签常见属性

# 4.3 标签常见类型

# 1. 文本输入框 (text)

# 2. 密码输入框 (password)

# 3. 单选按钮 (radio)

# 4. 复选框 (checkbox)

# 5. 提交按钮 (submit)

# 6. 重置按钮 (reset)

# 7. 普通按钮 (button)

# 8. 隐藏字段 (hidden)

# 9. 文件选择框 (file)

# 10. 数字输入框 (number)

# 11. 日期选择框 (date)

# 12. 颜色选择器 (color)

# 13. 电子邮件输入框 (email)

# 14. 范围选择器 (range)

# 15. 文本域 (textarea)

# 5. 表单综合示例

# 6. Submit和button

# 6.1 提交按钮（Submit）

# 6.1.1 综合示例

# 6.1.2 事件处理

# 6.2 <button> 按钮

# 6.2.1 事件处理

# 7. 带边框的表单

# 8. 带有输入框和确认按钮的表单

# 9. 带有复选框的表单

# 10. 发送电子邮件

# 2. `<label>` 标签

# 4. `<input>` 标签

# 4.1 `<input>` 标签简介

# 6.2 `<button>` 按钮