表单（补充）

表单元素

• <form action="/" method="post">
  • action: 指定当表单提交时，数据发送到的 URL。这里的 / 表示发送到当前页面。
  • method: 指定向服务器发送表单数据的方法。post 表示将数据作为请求体发送，适用于提交数据。

文本输入框

• <label for="name">用户名:</label>

  • for: 与后面的输入框关联，提供了可用的可访问性支持。
  • 内容: "用户名"，这是表单输入的提示说明。

• <input type="text" id="name" name="name" required>

  • type: 指定输入框的类型，这里是文本类型。
  • id: 唯一标识该输入框，允许与 <label> 映射。
  • name: 提交表单时发送给服务器的参数名。
  • required: 表示该字段为必填项，用户必须填写该字段才能提交表单。

密码输入框

• <label for="password">密码:</label>
  • for: 与密码输入框关联，提供了可用的可访问性支持。
• <input type="password" id="password" name="password" required>
  • type: 指定输入框的类型，这里是密码类型，输入内容会被隐藏。
  • id: 唯一标识该密码输入框。
  • name: 提交表单时发送的参数名。
  • required: 表示该字段为必填项。

单选按钮

• <label>性别:</label>

  • 提示用户选择性别的标签。

• <input type="radio" id="male" name="gender" value="male" checked>

  • type: 单选按钮的类型，用户只能选择一个选项。
  • id: 唯一标识该单选按钮。
  • name: 所有男性和女性选项共享的名称，确保只能选择一个值。
  • value: 表示提交的值。
  • checked: 默认选中该单选项。

• <input type="radio" id="female" name="gender" value="female">

  • 同上，代表女性选项。

复选框

• <input type="checkbox" id="subscribe" name="subscribe" checked>

  • type: 复选框类型，允许用户选择或不选择。
  • id: 唯一标识该复选框。
  • name: 提交表单时发送给服务器的参数名。
  • checked: 默认选中该复选框，表示用户希望订阅推送信息。

• <label for="subscribe">订阅推送信息</label>

  • 说明复选框的功能，提供可访问性的支持。

下拉列表

• <label for="country">国家:</label>

  • 提示用户选择国家的标签。

• <select id="country" name="country">

  • id: 唯一标识下拉列表。
  • name: 提交表单时发送给服务器的参数名。

• <option value="cn">CN</option>

  • 每个选项的value表示当用户选择该选项时提交的值。

提交按钮

• <input type="submit" value="提交">
  • type: 指定输入类型为提交按钮。
  • value: 提交按钮上显示的文本，在本例中为“提交”。

这个表单的设计允许用户输入用户名和密码，选择性别和国家，以及选择是否订阅推送信息。所有字段都可以通过所述的 ID 和 name 属性来识别，便于后端处理表单数据。