HTML 零基础教程：HTML 表单 (<form>) 深入指南

表单 (<form>) 是 Web 网页中与用户进行交互、收集数据（如登录信息、搜索查询、评论内容等）的强大机制。掌握表单的使用，是构建动态和功能性网站的关键一步。

一、 表单的骨架：<form> 标签

<form> 标签是所有表单控件的容器。它本身不显示任何内容，但定义了数据被收集后如何处理和发送到服务器。

核心属性

action数据提交地址。 指定表单数据将被发送到的服务器 URL。/submit_data.php

method数据提交方式。 定义浏览器如何发送数据给服务器。GET 或 POST

1. method 属性详解

• GET：

  • 将表单数据附加到 URL 的末尾，以问号 ? 分隔。

  • 适用于： 搜索查询、简单请求等，不涉及敏感或大量数据。

  • 特点： 浏览器会将数据暴露在 URL 中，且数据量有限制。

• POST：

  • 将表单数据放在 HTTP 请求的“正文”中发送。

  • 适用于： 敏感数据（密码）、文件上传、大量文本输入。

  • 特点： 数据不会显示在 URL 中，数据量几乎没有限制。

基本结构示例：

<form action="/login" method="POST">
    </form>

二、 表单最重要的元素：<input> 标签

<input> 标签是表单中最常用的元素，用于收集用户的各种数据。它是一个空标签，通过 type 属性来定义其行为和外观。

<input> 标签是表单中最常用的元素，用于收集用户的各种数据。它是一个空标签，通过 type 属性来定义其行为和外观。

输入控件的通用属性：

• name： 必须属性。 用于在数据提交时识别该字段（服务器端根据 name 来获取数据）。

• value： 定义输入字段的默认值或按钮上显示的文本。

• placeholder： 输入框中的提示文本，用户输入时消失。

• required： 布尔属性。要求用户必须填写此字段才能提交表单。

三、 其他常用表单控件

除了 <input> 之外，还有一些专门用于处理复杂输入的标签：

1. 多行文本输入：<textarea>

用于用户输入大段文字的区域（如评论或反馈）。

<label for="feedback">您的意见:</label>
<textarea id="feedback" name="comment" rows="5" cols="40" placeholder="请在这里输入您的反馈..."></textarea>

2. 下拉列表：<select> 和 <option>

<select> 定义下拉列表，<option> 定义列表中的每个可选项。

<label for="city">选择城市:</label>
<select id="city" name="location">
    <option value="bj">北京</option>
    <option value="sh" selected>上海</option> <option value="gz">广州</option>
</select>

3. 标签和关联：<label>

<label> 标签用于为表单控件定义文字描述。点击标签文字时，相关的输入框会被激活，这极大地改善了用户体验和无障碍性。

• 如何关联： 将 <label> 的 for 属性设置为与其关联控件的 id 属性相同的值。

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

完整的表单示例代码

这是一个包含基本输入控件的注册表单示例：

<form action="/register" method="POST">

    <p>
        <label for="uname">用户名:</label>
        <input type="text" id="uname" name="user_name" required>
    </p>

    <p>
        <label for="upass">密码:</label>
        <input type="password" id="upass" name="user_password" placeholder="至少6位" required>
    </p>

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

    <p>
        <label for="intro">自我介绍:</label>
        <textarea id="intro" name="introduction" rows="4"></textarea>
    </p>

    <p>
        <input type="submit" value="立即注册">
    </p>

</form>