HTML 表单

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

<form>元素

HTML表单用于收集用户输入。
<form>元素定义HTML表单：
实例

<form>
 .
form elements
 .
</form>

HTML表单包含表单元素

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

<input>元素

<input>元素时最重要的表单元素。
<input>元素有很多形态，根据不同的type属性。
这是本章使用的类型：

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

文本输入

**<input type="text">定义用于文本输入的单行输入字段：
实例

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

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

单选按钮输入

<input type="radio">定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
实例

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

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

提交按钮

<input type="submit">定义用于向表单处理程序(form-handler)提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的action属性中指定：
实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

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

Action属性

action属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到web服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略action属性，则action会被设置为当前页面。

Method属性

method属性规定在提交表单时所用的HTTP方法(GET和POST)：

<form action="action_page.php" method="GET">

或:

<form action="action_page.php" method="POST">

何时使用GET?

您能够使用GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用GET时，表单数据在页面地址中是可以见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释:GET最合适少量数据的提交。浏览器会设定容量限制。

何时使用POST？

您应该是POST：
如果表单在更新数据，或者包含敏感信息（例如密码）。
POST的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

Name属性

如果要正确地被提交，每个输入字段必须设置一个name属性。
本例只会提交"Last name"输入字段：
实例

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

用<fieldest>组合表单数据

<fieldest>元素组合表单中的相关数据
<legend>元素为<fieldest>元素定义标题
实例：

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

HTML Form属性

HTML<form>元素，已设置所有可能的属性，是这样的：

实例

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form> 

下面是<form>属性的列表：