生僻标签 fieldset 与 legend 的用法详解

生僻标签 fieldset 与 legend 是 HTML 中的一对标签，用于将一组相关控件集合起来，并用标题表示该组控件的用途或含义。下面是该标签的详细用法：

fieldset 标签

<fieldset> 标签用来将表单中的相关内容进行分组，常用于在表单中进行分组校验；该标签常与 <legend> 标签搭配使用。

语法

<fieldset>
    <legend>分组描述</legend>
    <!-- 表单控件... -->
</fieldset>

属性

<fieldset> 标签的属性列表如下：

• disabled：如果该属性被设置，整个分组将被禁用，并将禁用其中的所有控件。该属性主要用于表单内容和处理逻辑分离的场景。
• form：用于设置分组所属的表单，常用于跨文档操作表单。
• name：用于分组的名字，由客户端提交表单时被用作服务器端数据处理的标识，与 <input> 标签的 name 属性类似。

legend 标签

<legend> 标签用于为 <fieldset> 标签定义一个标题，该标题通常会在分组框架的上部展示。

语法

<fieldset>
    <legend>分组描述</legend>
    <!-- 表单控件... -->
</fieldset>

属性

<legend> 标签的属性列表如下：

• accesskey: 为标题指定一个作为快捷键的字母
• align: 指定标题的对齐方式，可选值：left, right, center

用例示例：

用法一：为表单添加分组框架

<form>
    <fieldset>
        <legend>注册表单</legend>
        <label>用户名：<input type="text" /></label><br />
        <label>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" /></label><br />
        <label>确认密码：<input type="password" /></label><br />
        <label>邮&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" /></label><br />
    </fieldset>
    <button type="submit">提交</button>
</form>

上述代码会将用户名、密码、确认密码和电子邮件地址分组，并将这些输入域包含在一个带有标题的框架中，使得表单设计更加清晰明了，同时开发者也能够方便处理这些数据。

用法二：禁用表单中的分组

<fieldset disabled>
    <legend>商品详情</legend>
    <table>
        <tr>
            <td>商品名称：</td>
            <td>...</td>
        </tr>
        <tr>
            <td>价格：</td>
            <td>...</td>
        </tr>
        <tr>
            <td>库存：</td>
            <td>...</td>
        </tr>
    </table>
</fieldset>

上述代码会将一个商品的详细信息包括商品名称、价格、库存等依据功能进行分组，同时将分组框架禁用，并禁用组内的所有输入控件，让用户无法对组内进行修改。

希望上述解释对您有帮助！