Fieldset name 属性

在 HTML 中，<fieldset> 元素用于将表单内的相关元素分组在一起，并使用<legend>元素为这个组添加标题。<fieldset> 元素通常用于创建表单的不同部分，使用户更容易理解表单的结构和内容。

为什么使用 Fieldset name 属性？

使用<fieldset> 元素和<legend>元素可以提高表单的可访问性和用户体验。通过将相关元素分组在一起，并为这个组添加标题，用户可以更清晰地了解表单的结构和内容。这对于长表单特别有用，因为用户可以更轻松地导航和填写表单。

如何使用 Fieldset name 属性？

要使用<fieldset> 元素和<legend>元素，首先在表单中包裹需要分组的元素。然后使用<legend>元素为这个组添加标题。例如：

// www.javascriptcn.com code example
<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>Shipping Address</legend>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
    <label for="city">City:</label>
    <input type="text" id="city" name="city">
    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip">
  </fieldset>
</form>

在上面的示例中，我们将联系信息和送货地址分别放在两个<fieldset>元素中，并使用<legend>元素为每个组添加标题。

Fieldset name 属性的注意事项

• name 属性用于为<fieldset>元素指定一个名称，这个名称可以在提交表单时用于标识这个字段组。不过，name属性已经在 HTML5 中被废弃，不推荐在新项目中使用。可以使用其他属性或 JavaScript 来实现相同的功能。

• <fieldset> 元素可以包含任意数量的表单元素，包括文本框、复选框、单选框、下拉列表等。在一个表单中可以有多个<fieldset>元素，用于将表单内容分组。

• <fieldset> 元素本身并不会影响表单的样式，可以使用 CSS 来自定义<fieldset>元素的外观，比如边框、背景色等。

总结

使用<fieldset>元素和<legend>元素可以帮助提高表单的可访问性和用户体验，特别是对于长表单来说。通过将相关元素分组并添加标题，用户可以更清晰地了解表单的结构和内容，从而更轻松地填写表单。虽然name属性已经被废弃，但<fieldset>元素仍然是一个非常有用的 HTML 元素，建议在构建表单时合理使用。