轻松上手,快乐学习!

HTML Forms


HTML 表单用于搜集不同类型的用户输入。


实例






亲自试一试 »

<form> 元素

HTML <form> 表单用于收集用户输入。

<form>
.
form elements
.
</form>

<form> 元素定义 HTML 表单。

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。


<input> 元素

HTML <input> 元素是最重要的表单元素。

<input> 元素有很多形态,根据不同的 type 属性。

这是本章中使用的类型:

类型 描述
<input type="text"> 定义常规文本输入。
<input type="radio"> 定义单选按钮输入(选择多个选择之一)
<input type="checkbox"> 定义提交按钮(提交表单)
<input type="submit"> 显示提交按钮(用于提交表单)
<input type="button"> 显示可单击的按钮

注释:您稍后将在本教程学到更多有关输入类型的知识。


文本输入

<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>
亲自试一试 »

在浏览器中看起来是这样的:

First name:

Last name:

注释: 表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。


<label> 元素

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

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

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

<label> 元素还可以帮助那些很难单击很小区域(例如单选按钮或复选框)的用户,因为当用户单击 <label> 元素中的文本时,它会切换单选按钮/复选框。

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


单选按钮输入

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

单选按钮允许用户在有限数量的选项中选择其中之一:

实例

带有单选按钮的表单:

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>
亲自试一试 »

单选按钮在浏览器看起来是这样的:




复选框

<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"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

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

实例

带有提交按钮的表单:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
亲自试一试 »

在浏览器中看起来是这样的:

First name:

Last name:



Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。

如果省略 name 属性,则根本不会发送输入字段的值。

实例

本例只会提交 "First name" 输入字段:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>
亲自试一试 »

HTML 实验

学习训练

练习题:

在下表添加一个 input 字段,类型为 "button" 值为 "OK"。

<form>
<>
</form>

开始练习