HTML 表单

HTML 表单包含交互组件,用于收集用户输入,向服务器提交数据。本文介绍 HTML form 表单的基本用法和实例。

HTML 表单包含交互组件,用于收集用户输入,向服务器提交数据。本文介绍 HTML form 表单的基本用法和实例。

<form> 元素

HTML <form> 元素是一个容器元素,用于为用户输入创建 HTML 表单:

<form>
  <!-- 这里是 form 元素 -->
</form>

<form> 元素中可以包含不同类型的输入元素,比如:文本字段,复选框,单选按钮,提交按钮等。

章节 HTML 表单元素介绍了所有的表单元素。

<input> 元素

HTML <input> 元素是最常用的表单元素,一个 <input> 元素可以根据 type 属性显示为不同的输入组件。

几种常见的输入类型:

类型 描述
<input type="text"> 显示单行文本输入字段
<input type="radio"> 显示一个单选按钮(多选一)
<input type="checkbox"> 显示一个复选框(可选多个)
<input type="submit"> 显示提交按钮,用于提交表单
<input type="button"> 显示一个可点击的按钮

章节 HTML 输入类型介绍了 <input> 元素的所有的的输入类型。

文本字段

<input type="text"> 定义了单行输入框。

带有文本输入字段的表单:

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" /><br />
  <label for="age">年龄:</label><br />
  <input type="text" id="age" name="age" />
</form>

! 注意: 表单元素本身不可见(除非你为其添加边框或者背景色)。另,输入字段的默认宽度为 20 个字符。

<label> 元素

<label> 标签为表单元素定义了一个标签,用来指示输入元素的用户。

<label> 元素对屏幕阅读器用户很有用,因为当用户关注输入元素时,屏幕阅读器会大声读出标签内容。

当用户点击 <label> 的文本时,浏览器的焦点会自动跳到对应的表单输入元素。

<label> 标签通过 for 属性值(某个 <input> 元素的 id)绑定了对应的 <input> 元素。

例如上一小节的例子中,<label for="name">姓名:</label><input type="text" id="name" name="name" /> 绑定在一起的,因为 <label> 的属性 for="name"<input> 的属性 id="name" 是一致的。这样,当用户点击文本 ”姓名:“的时候,浏览器的焦点会自动跳到输入框中,以方便用户输入姓名。

单选按钮

<input type="radio"> 定义了一个单选按钮。单选按钮让用户可以从有限数量的选项中选择一个。

带有单选按钮的表单:

<form>
  <input type="radio" id="male" name="gender" value="男" />
  <label for="male">Male</label><br />
  <input type="radio" id="female" name="gender" value="女" />
  <label for="female">Female</label><br />
  <input type="radio" id="other" name="gender" value="保密" />
  <label for="other">Other</label>
</form>

复选框

<input type="checkbox"> 定义了一个复选框。

复选框让用户可以从有限数量的选项中选择零个或多个选项。

带有复选框的表单:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="自行车" />
  <label for="vehicle1">我有一辆自行车</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="汽车" />
  <label for="vehicle2">我有一辆车</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="船" />
  <label for="vehicle3">我有一条船</label>
</form>

提交按钮

<input type="submit"> 定一个了表单提交按钮,用来向服务器上的表单处理程序提交数据。

表单处理程序通常是服务器上的一个文件,带有用于用户输入的数据,比如保存一个新用户、修改用户的姓名等。

表单处理程序在表单的 action 属性中指定。

带有提交按钮的表单:

<form action="/action_page.php">
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" value="张三" /><br />
  <label for="age">年龄:</label><br />
  <input type="text" id="age" name="age" value="20" /><br /><br />
  <input type="submit" value="Submit" />
</form>

<input>name 属性

每个输入字段都应该有一个 name 属性,用来表示向服务器发送的数据字段,比如:age, nickname 等。

name 属性一般使用英文字母,否则可能会有编码上的麻烦,比如乱码。

如果省略 name 属性,就不会向服务器发送词输入字段的值。

此示例不会提交 name 输入字段的值:

<form action="/action_page.php">
  <label for="name">姓名</label><br />
  <input type="text" id="name" value="张三" /><br /><br />
  <input type="submit" value="Submit" />
</form>

目录

  1. HTML 表单属性说明

    本章介绍了 HTML form 元素的不同属性以及具体的用法。
  2. HTML 表单元素

    本章介绍了所有 HTML 表单元素,以及每种元素的具体用法。
  3. HTML input 元素的不同类型

    本章介绍了 HTML input 元素的所有的类型和具体的用法。
  4. HTML input 元素属性介绍

    本文介绍了 HTML input 元素的不同属性,以及各个属性的适用场景和用法。