HTML 表单

HTML 表单用于收集用户输入。用户输入通常会被发送到服务器进行处理。

实例






亲自试一试

<form> 元素

HTML <form> 元素用于创建收集用户输入的 HTML 表单：

<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 type="text"> 定义了用于文本输入的单行输入字段。

实例

一个包含文本输入字段的表单：

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

亲自试一试

上面的 HTML 代码在浏览器中会显示为：

First name:

Last name:

注意：表单本身是不可见的。同时请注意，输入字段的默认宽度是 20 个字符。

<label> 元素

注意上面示例中 <label> 元素的用法。

<label> 标签为许多表单元素定义了一个标签。

<label> 元素对于屏幕阅读器用户很有用，因为当用户聚焦到输入元素时，屏幕阅读器会大声读出标签内容。

<label> 元素也帮助那些难以点击非常小区域（例如单选按钮或复选框）的用户 —— 因为当用户点击 <label> 元素内的文本时，它会切换对应的单选按钮/复选框。

<label> 标签的 for 属性应该等于 <input> 元素的 id 属性，以便将它们绑定在一起。

单选按钮

<input type="radio"> 定义了一个单选按钮。

单选按钮允许用户从有限数量的选项中选择一个。

实例

一个包含单选按钮的表单：

<p>选择你最喜欢的 Web 语言：</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

亲自试一试

上面的 HTML 代码在浏览器中会显示为：

选择你最喜欢的 Web 语言：



复选框

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

复选框允许用户从有限数量的选项中选择零个或多个。

实例

一个包含复选框的表单：

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

亲自试一试

上面的 HTML 代码在浏览器中会显示为：



提交按钮

<input type="submit"> 定义了一个用于将表单数据提交给表单处理程序的按钮。

表单处理程序通常是服务器上的一个文件，其中包含用于处理输入数据的脚本。

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

实例

一个包含提交按钮的表单：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form>

亲自试一试

上面的 HTML 代码在浏览器中会显示为：

First name:

Last name:


<input> 的 name 属性

请注意，每个输入字段必须具有 name 属性才能被提交。

如果省略了 name 属性，输入字段的值将完全不会被发送。

实例

此例将不会提交“名”输入字段的值：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="Bill"><br><br>
  <input type="submit" value="提交">
</form>

亲自试一试