表单标签

表单标签用于构建表单的整体结构和元素关联，确保数据正确收集与提交。

form标签

基本结构

<form action="/submit" method="POST">
    <!-- 表单元素 -->
    <input type="text" name="username">
    <button type="submit">提交</button>
</form>

form是表单容器，所有表单元素必须放在form内部（或通过form属性关联）。

fieldset与legend

分组容器

<form>
    <fieldset>
        <legend>基本信息</legend>
        <input type="text" name="name">
        <input type="email" name="email">
    </fieldset>

    <fieldset>
        <legend>联系方式</legend>
        <input type="tel" name="phone">
        <input type="text" name="address">
    </fieldset>
</form>

fieldset属性

<!-- 禁用整个分组 -->
<fieldset disabled>
    <legend>禁用的分组</legend>
    <input type="text" name="field">
</fieldset>

label标签

标签关联

<!-- 方式一：for绑定id -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方式二：包裹关联 -->
<label>
    用户名：<input type="text" name="username">
</label>

label关联后，点击标签文本可聚焦对应输入框，提升用户体验。

label作用

• 提升可访问性：屏幕阅读器正确读取
• 提升用户体验：点击标签聚焦输入
• 明确表意：说明输入框用途

表单元素标签汇总

完整表单结构示例

<form action="/register" method="POST">
    <fieldset>
        <legend>注册信息</legend>

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

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </fieldset>

    <fieldset>
        <legend>个人偏好</legend>

        <label>
            <input type="checkbox" name="subscribe" value="yes">
            接收邮件通知
        </label>

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

    <button type="submit">注册</button>
</form>

要点总结

1. form容器：表单元素需放在form内部
2. 分组清晰：使用fieldset/legend组织复杂表单
3. label关联：必须关联输入框提升可访问性
4. id唯一：label绑定的id值不能重复