HTML 表单和输入
HTML表单（form）用于收集各种各样的用户输入。
 |
试一个 |
文本框
本例演示了如何在HTML页面上创建文本输入框，让用户输入文本。
密码框
本例演示了如何在HTML页面上创建密码框。
（本页底部提供了更多示例）
表单
表单（form）是一个容纳表单元素的区域。
表单元素指的是表单里那些允许用户输入信息的元素（如文本框、多行文本框、下拉菜单、单选按钮、复选框等等）。
表单是用<form>标签来定义的。
| <form> . 输入元素 . </form> |
<input>标签
<input>是最常用的表单标签。你可以通过<input>标签的type属性来指定输入类型。下面介绍几种最常用的输入类型。
文本框
文本框允许用户输入字母、数字等等。
| <form> 名字： <input type="text" name="firstname" /> <br /> 姓氏： <input type="text" name="lastname" /> </form> |
在浏览器中的显示效果为：
注意：表单本身是不可见的。还要注意的是，在大多数浏览器中，文本框的默认宽度为20个字符。
单选按钮
单选按钮允许用户在给定的多个候选项中选择一项。
| <form> <input type="radio" name="sex" value="male" />男 <br /> <input type="radio" name="sex" value="female" />女 </form> |
在浏览器中的显示效果为：
注意：用户只能选择一项。
复选框
复选框允许用户在给定的多个候选项中选择一项或多项。
| <form> 我有自行车: <input type="checkbox" name="vehicle" value="Bike" /> <br /> 我有汽车: <input type="checkbox" name="vehicle" value="Car" /> <br /> 我有飞机: <input type="checkbox" name="vehicle" value="Airplane" /> </form> |
在浏览器中的显示效果为：
action属性和submit按钮
当用户点击“提交”按钮时，表单内容将被发送给服务器。<form>标签的action属性用于指定把表单内容发送给哪个页面。一般来说，action属性里指定的那个页面将对收到的输入内容做某些处理。
| <form name="input" action="html_form_submit.php" method="get"> 用户名： <input type="text" name="user" /> <input type="submit" value="提交" /> </form> |
在浏览器中的显示效果为：
如果你在上面的文本框中输入一些字符，并点击“提交”按钮，浏览器将把你输入的内容发送给名为“form_submit.php”的页面。该页面将把收到的内容显示出来。
表单元素示例
复选框
本例演示了如何在HTML页面中创建复选框。用户可以选择或取消选择复选框。
单选按钮
本例演示了如何在HTML页面中创建单选按钮。
简单的下拉菜单
本例演示了如何在HTML页面中创建一个简单的下拉菜单。下拉菜单是一个可选择的列表。
另一个下拉菜单
本例演示了如何创建一个带默认选项的下拉菜单。
多行文本框
本例演示了如何创建一个多行文本框。用户可以在多行文本框中输入文本。多行文本框没有输入字符数的限制。
创建按钮
本例演示了如何创建按钮。你可以自定义按钮上显示的文本。
控件组
本例演示了如何在多个表单元素周围绘制边框并显示标题。
完整表单示例
带有文本框和提交按钮的表单
本例演示了如何创建一个包含两个文本框与一个提交按钮的表单。
带有复选框的表单
本例演示了如何创建一个包含三个复选框与一个提交按钮的表单。
带有单选按钮的表单
本例演示了如何创建一个包含两个单选按钮与一个提交按钮的表单。
从表单发出电子邮件
本例演示了如何创建一个能发出电子邮件的表单。
表单标签
| 标签 | 描述 |
|---|---|
| <form> | 定义表单 |
| <input> | 定义输入控件 |
| <textarea> | 定义多行文本框 |
| <label> | 定义一个控件的文本标签（label） |
| <fieldset> | 定义控件组 |
| <legend> | 定义控件组标题 |
| <select> | 定义下拉菜单 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉菜单中的选项 |
| <button> | 定义按钮 |
| <isindex> | 被弃用的，请用<input>替代 |