HTML 表单


HTML表单示例

姓:

名:


运行 »

<form>元素

HTML <form>元素定义了一个用于收集用户输入的表单:

<form>
.
表单元素
.
</form>

HTML表单包含表单元素 .

表单元素是不同类型的输入元素,如文本字段,复选框,单选按钮,提交按钮等.


<input>元素

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

<input>元素可以通过多种方式显示,具体取决于type属性.

这里有些例子:

类型 描述
<input type ="text"> 定义单行文本输入字段
<input type ="radio"> 定义单选按钮(用于选择众多选项中的一个)
<input type ="submit"> 定义提交按钮(用于提交表单)

您将在本教程后面学到更多关于输入类型的知识.



文本输入

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

实例

<form>
  姓:<br>
  <input type="text" name="lastname"><br>
  名:<br>
  <input type="text" name="firstname">
</form>
运行 »

这就是它在浏览器中的样子:

姓:

名:

注意:表单本身不可见.另请注意,文本字段的默认宽度为20个字符.


单选按钮

<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>
运行 »

这就是上面的HTML代码将如何在浏览器中显示:



秘密

提交按钮

<input type="submit"> 定义了一个用于 将表单数据提交表单处理程序(后端处理 PHP Java Nodejs Python等)的按钮.

表单处理程序通常是一个服务器页面,其中包含用于处理输入数据的脚本.

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

实例

<form action="/action_page">
  姓:<br>
  <input type="text" name="lastname" value="zhang"><br>
  名:<br>
  <input type="text" name="firstname" value="san"><br><br>
  <input type="submit" value="提交">
</form>
运行 »

这就是上面的HTML代码将如何在浏览器中显示:

姓:

名:



动作(action)属性

action属性定义提交表单时要执行的操作.

通常,当用户单击提交按钮时,表单数据将发送到服务器上的网页.

在上面的示例中,表单数据被发送到服务器上名为"/action_page"的页面.此页面包含处理表单数据的服务器端脚本:

<form action="/action_page ">

如果省略action属性,则操作将设置为当前页面.


目标(target)属性

target属性指定提交的结果是在新的浏览器选项卡,框架还是在当前窗口中打开.

默认值为" _self ",表示表单将在当前窗口中提交.

要在新的浏览器选项卡中打开表单结果,请使用值" _blank ":

实例

<form action="/action_page" target="_blank" >
运行 »

其他合法值是" _parent "," _top "或表示iframe名称的名称.


方法(method)属性

method属性指定提交表单数据时要使用的HTTP方法( GETPOST ):

实例

<form action="/action_page" method="get" >
运行 »

或者:

实例

<form action="/action_page" method="post" >
运行 »

何时使用GET?

提交表单数据时的默认方法是GET.

但是,使用GET时,提交的表单数据将显示在页面地址字段中 :

/action_page?firstname=san&lastname=zhang

关于GET的说明:

  • 将表单数据附加到名称/值对中的URL中
  • URL的长度是有限的(约3000个字符)
  • 切勿使用GET发送敏感数据! (将在URL中显示)
  • 对于用户想要为结果添加书签的表单提交很有用
  • GET更适合非安全数据,例如Google中的查询字符串

何时使用POST?

如果表单数据包含敏感信息或个人信息,请始终使用POST. POST方法不会在页面地址字段中显示提交的表单数据.

关于POST的说明:

  • POST没有大小限制,可用于发送大量数据.
  • 使用POST的表单提交无法添加书签

名称(name)属性

每个输入字段都必须具有要提交的name属性.

如果省略name属性,则根本不会发送该输入字段的数据.

此示例仅提交"姓名"输入字段:

实例

<form action="/action_page">
  姓:<br>
  <input type="text" value="zhang"><br>
  名:<br>
  <input type="text" name="firstname" value="san"><br><br>
  <input type="submit" value="提交">
</form>
运行 »

使用<fieldset>对表单数据进行分组

<fieldset>元素用于对表单中的相关数据进行分组.

<legend>元素定义<fieldset>元素的标题.

实例

<form action="/action_page">
  <fieldset>
    <legend>个人信息:</legend>
    姓:<br>
    <input type="text" name="lastname" value="zhang"><br>
    名:<br>
    <input type="text" name="firstname" value="san"><br><br>
    <input type="submit" value="提交">
  </fieldset>
</form>
运行 »

这就是上面的HTML代码将如何在浏览器中显示:

个人信息: 姓:

名:



以下是所有<form>属性的列表:

属性 描述
accept-charset 指定提交的表单中使用的字符集(默认值:页面字符集).
action 指定提交表单的地址(url)(默认值:提交页面).
autocomplete 指定浏览器是否应自动填充表单(默认值:on).
enctype 指定提交数据的编码(默认值:是url编码的).
method 指定提交表单时使用的HTTP方法(默认值:GET).
name 指定用于标识表单的名称(对于DOM用法:document.forms.name).
novalidate 指定浏览器不应验证表单.
target 指定action属性中的地址目标(默认值:_self).

您将在下一章中了解有关表单属性的更多信息.