HTML | 名称属性

在 HTML 表单中，使用 <input> 标签来创建不同类型的输入字段，例如文本输入、单选按钮、多选框等。

但是，当我们需要向服务器发送表单数据时，我们需要对表单中的每个输入字段进行命名。这时就需要使用 name 属性。该属性用于将表单输入字段的值与一个名称关联起来，以便在处理表单时能够识别和调用这些表单数据。

以下是一个常见的表单示例，其中包含文本输入、单选按钮和多选框。每个输入字段都有一个唯一的 name 属性：

<form action="/submit-form" method="POST">
  <label>姓名:</label>
  <input type="text" name="name">

  <br>

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

  <br>

  <label>爱好:</label>
  <label>篮球 <input type="checkbox" name="hobby" value="basketball"></label>
  <label>足球 <input type="checkbox" name="hobby" value="football"></label>
  <label>羽毛球 <input type="checkbox" name="hobby" value="badminton"></label>
  
  <br>

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

在上述示例中，文本输入字段具有 name 属性 name，该属性将表单值与名称“name”关联。单选按钮和多选框使用相同的名称 gender 和 hobby 来标识它们，并根据 value 属性的值来决定何时选中它们。

在处理表单时，我们可以通过表单的名称属性来获取表单数据，例如：

const name = document.forms[0].elements.name.value;
const gender = document.forms[0].elements.gender.value;
const hobbies = document.forms[0].elements.hobby.filter(el => el.checked).map(el => el.value);

在这种情况下，名称属性使我们能够识别和获取特定表单字段的值，并将其用于进一步的处理。

总之，在 HTML 表单中，名称属性非常重要。它们使我们能够有效地捕获和处理表单数据。如果您正在编写网站的表单，请务必使用名称属性为每个输入字段命名。