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

表单标签

标签

描述

<form>

定义供用户输入的表单

<input>

定义输入域

<textarea>

定义文本域 (一个多行的输入控件)

<label>

定义一个控制的标签

<fieldset>

定义域

<legend>

定义域的标题

<select>

定义一个选择列表

<optgroup>

定义选项组

<option>

定义下拉列表中的选项

<button>

定义一个按钮

<isindex>

已废弃。有<input>代替。

 

实例

文本域(Text fields)

本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

密码域

本例演示如何创建 HTML 的密码域。

（可以在本页底端找到更多实例。）

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form>

  <input>

  <input>

</form>

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name:

<input type="text"name="firstname">

<br>

Last name:

<input type="text"name="lastname">

</form>

浏览器显示如下：

窗体顶端

First name: Lastname:

窗体底端

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>

<input type="radio"name="sex" value="male"> Male

<input type="radio"name="sex" value="female"> Female

</form>

浏览器显示如下：

窗体顶端

Male Female

窗体底端

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>

<inputtype="checkbox" name="bike">

I have a bike

<br>

<inputtype="checkbox" name="car">

I have a car

</form>

浏览器显示如下：

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp"method="get">

Username:

<input type="text" name="user">

<input type="submit"value="Submit">

</form>

浏览器显示如下：

窗体顶端

Username:

窗体底端

假如你再上面的文本框内键入几个字母，并且点击确认按钮，那么输入数据会被传送到指向的页面。那一页将显示出输入的结果。

 

窗体顶端

I have abike I have a car