HTML 表单

HTML 表单简介

HTML 表单（Form）是用于收集用户输入的数据，并将其提交到服务器进行处理的基本工具。表单通常用于登录、注册、搜索、评论等场景。通过表单，用户可以通过不同类型的控件（如文本框、复选框、单选按钮等）与网页进行交互。

1. 表单的基本结构

HTML 表单由 <form> 元素表示，包含一个或多个表单控件（如文本框、按钮等）。表单的基本结构如下：

<form action="URL" method="method">
    <!-- 表单控件 -->
</form>

• action：指定表单提交的目标 URL。
• method：指定表单提交的数据方式，常见有：
  • GET：通过 URL 提交数据，数据附加在 URL 后（适用于查询等无副作用的操作）。
  • POST：通过请求体提交数据（适用于修改或提交敏感信息）。

2. 常用表单控件

2.1 文本输入框 <input>

用于接收单行文本输入。

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

• type="text"：指定输入框类型为文本框。
• name：定义输入字段的名称，提交表单时用于标识该字段。
• placeholder：为输入框提供占位符文本，提示用户应输入内容。

2.2 密码输入框 <input>

用于接收密码，输入内容会以星号（*）形式显示。

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

2.3 单选按钮 <input>

允许用户在多个选项中选择一个。

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

• type="radio"：定义单选按钮。
• name：相同 name 值的单选按钮属于同一组，用户只能选择其中一个。
• value：指定单选按钮的值，提交表单时会提交该值。

2.4 复选框 <input>

允许用户选择一个或多个选项。

<input type="checkbox" name="subscribe" checked> 订阅邮件

• type="checkbox"：定义复选框。
• checked：如果属性存在，表示复选框默认选中。

2.5 按钮 <button>

用于提交表单或执行其他操作。

<button type="submit">提交</button>
<button type="reset">重置</button>

• type="submit"：提交表单。
• type="reset"：重置表单，将表单控件恢复到初始状态。

2.6 选择框 <select>

用于创建下拉菜单。

<select name="country">
    <option value="us">美国</option>
    <option value="cn">中国</option>
    <option value="jp">日本</option>
</select>

• <select>：定义下拉菜单。
• <option>：定义下拉菜单的选项。
• value：定义选项的值。

2.7 多行文本框 <textarea>

用于接收多行文本输入。

<textarea name="message" rows="4" cols="50">在这里输入留言</textarea>

• rows：定义文本框的行数。
• cols：定义文本框的列数。

2.8 文件上传 <input>

用于接收文件上传。

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

• type="file"：允许用户选择一个文件进行上传。

3. 表单提交与处理

表单提交通常有两种方式：通过 GET 或 POST 方法。

3.1 GET 方法

数据通过 URL 发送，适用于查询、搜索等操作。提交的数据会显示在浏览器的地址栏中。

<form action="/search" method="GET">
    <input type="text" name="query" placeholder="搜索">
    <button type="submit">搜索</button>
</form>

提交表单时，URL 将会是：/search?query=搜索内容

3.2 POST 方法

数据通过 HTTP 请求体发送，适用于敏感信息的提交，如登录、注册等。提交的数据不会出现在 URL 中。

<form action="/login" method="POST">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
</form>

4. 表单的其他常见属性

• action：指定表单数据提交的 URL。
• method：指定数据提交的方法，常见值 GET 或 POST。
• name：为表单命名，便于通过 JavaScript 或 CSS 进行引用。
• target：定义提交后的结果如何显示，常见值：_blank（新窗口）、_self（当前窗口）等。
• enctype：指定表单数据的编码类型（常用于文件上传）。
  • application/x-www-form-urlencoded（默认值）：表单数据按键值对的形式编码。
  • multipart/form-data：用于文件上传。
  • application/json：将数据以 JSON 格式提交。

5. 示例：完整的表单

<form action="/submit" method="POST">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>

    <label for="subscribe">订阅:</label>
    <input type="checkbox" id="subscribe" name="subscribe" checked> 订阅新闻简报<br><br>

    <label for="country">选择国家:</label>
    <select id="country" name="country">
        <option value="us">美国</option>
        <option value="cn">中国</option>
        <option value="jp">日本</option>
    </select><br><br>

    <label for="message">留言:</label><br>
    <textarea id="message" name="message" rows="4" cols="50">在这里输入留言</textarea><br><br>

    <button type="submit">提交</button>
</form>

6. 表单验证

HTML5 引入了一些表单验证功能，可以直接在 HTML 中指定验证规则，避免使用 JavaScript。

• required：指定该字段为必填。
• minlength 和 maxlength：指定输入框的最小和最大输入长度。
• pattern：指定输入字段的正则表达式模式。

示例：

<form action="/submit" method="POST">
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required placeholder="请输入邮箱地址"><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" minlength="8" required placeholder="密码至少8个字符"><br><br>

    <button type="submit">提交</button>
</form>

7. 表单控件的组合使用

你可以将多个表单控件放在一起进行组合，使用 <fieldset> 标签来进行分组，<legend> 标签为每个组提供标题。

示例：

<form action="/submit" method="POST">
    <fieldset>
        <legend>个人信息</legend>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"><br><br>
    </fieldset>

    <fieldset>
        <legend>偏好设置</legend>
        <label for="newsletter">订阅新闻:</label>
        <input type="checkbox" id="newsletter" name="newsletter" checked><br><br>
    </fieldset>

    <button type="submit">提交</button>
</form>

总结

HTML 表单是收集用户输入的核心工具，通过各种表单控件（如文本框、复选框、按钮等），你可以构建功能丰富、用户友好的交互界面。HTML5 提供了很多新的表单控件和验证功能，使