HTML 表单

基本概念

• <form> 用于创建表单区域，常用于收集用户输入的数据。
• 表单中通常会配合 <input>、<label>、<button> 等标签一起使用。

常见表单控件

• type="text"：单行文本输入框
• type="password"：密码输入框
• type="radio"：单选框
• type="checkbox"：多选框
• type="submit"：提交按钮

常见属性

• placeholder：输入框提示文字
• id：元素唯一标识
• for：让 label 和指定表单控件关联
• name：表单字段名称，单选框同组时通常设置相同的 name
• value：按钮或表单项的值
• action：表单提交地址

课堂示例代码

<form>
  <label>用户名：</label>
  <input type="text" placeholder="请输入用户名">
  <br>
  <br>

  <label for="password">密码：</label>
  <input type="password" id="password" placeholder="请输入密码">
  <br>
  <br>

  <label>性别：</label>
  <input type="radio" name="gender"> 男
  <input type="radio" name="gender"> 女
  <input type="radio" name="gender"> 其他
  <br>
  <br>

  <label>爱好：</label>
  <input type="checkbox" name="hobby"> 唱歌
  <input type="checkbox" name="hobby"> 跳舞
  <input type="checkbox" name="hobby"> rap
  <input type="checkbox" name="hobby"> 篮球
  <br>
  <br>

  <input type="submit" value="提交">
</form>

<form action="#"></form>

知识点总结

• 表单是前端中收集用户输入的重要方式。
• 单选框一般通过相同的 name 实现互斥选择。
• 多选框允许用户选择多个选项。
• label 可以提升表单的可读性和可用性。

复习表达

HTML 表单主要通过 form 标签创建，用于收集用户输入信息。表单中常见的控件有文本框、密码框、单选框、多选框和提交按钮。实际开发中通常会配合 label、name、placeholder、value、action 等属性一起使用，其中单选框一般通过相同的 name 来实现同组互斥选择。