HTML表单

The <form> Element

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

<form>
.
form 元素
.
</form>

HTML表单包含表单元素。

表单元素是不同类型的输入元素，如文本框、复选框、单选按钮、提交按钮等。

<input> 元素

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

<input> 元素可以以多种方式显示，这取决于类型属性。

这里有一些例子：

Type Description
<input type="text"> 定义一个单行文本输入字段
<input type="radio"> 定义单选按钮（用于选择许多选项之一）
<input type="submit"> 定义提交按钮（提交表单）

在本教程后面，您将学习更多有关输入类型的知识。

Text Input(文本输入)

<input type="text"> 定义文本输入的一个单行输入字段：

<form>
  名字:<br>
  <input type="text" name="firstname">
  <br>
  姓氏:<br>
  <input type="text" name="lastname">
</form>

让我试试

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

Radio Button Input（单选按钮输入）

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

单选按钮让用户选择一个有限数量的选择：

<form>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其他
</form>

让我试试

Submit Button（提交按钮）

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

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

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

<form action="action_page.php">
  名字:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  姓氏:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

让我试试

Action 属性

Action属性定义在提交表单时要执行的操作。

通常，当用户单击提交按钮时，表单数据将网页内容发送到服务器上。

在上面的例子中，表单数据是送到在服务器上被称为"action_page.php"的页面。此页包含处理表单数据的服务器端脚本：

<form action="action_page.php">

如果省略了操作属性，则将操作设置为当前页。

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

Note: GET 发送敏感信息时不可使用! GET 最适合短，非敏感，一定量数据，因为它有大小限制太。

什么时候使用POST?

如果表单数据包含敏感或个人信息，则总是使用POST。POST方法在页地址字段中不显示提交的表单数据.

POST没有大小限制，可以用来发送大量的数据。

Name 属性

每个输入字段必须具有要提交的名称属性。

如果省略名称属性，则将不发送该输入字段的数据。

此示例只提交“姓氏”输入字段：

<form action="action_page.php">
  名字:<br>
  <input type="text" value="Mickey">
  <br>
  姓氏:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

让我试试

使用<fieldset>给表单数据分组

<fieldset> 元素用于将相关数据以表单形式分组。

<legend> 元素为 <fieldset> 元素定义了一个标题。

<form action="action_page.php">
  <fieldset>
    <legend>个人信息:</legend>
    名字:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    姓氏:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

让我试试

这里是<form>属性的列表：

属性 描述
accept-charset 指定用于提交表单的字符集（默认页面的字符集）
action 指定提交表单的地址（URL）（默认：提交页）。
autocomplete 指定浏览器是否应该自动完成表单（默认:on）。
enctype 指定提交数据的编码 (默认: url-encoded)。
method 当提交表单时指定的HTTP方法 (默认: GET).
name 指定用于标识窗体的名称 (DOM 使用:document.forms.name)
novalidate 定浏览器不验证表单
target 指定动作属性中的地址的目标. (默认:`_self`)