HTML 表单HTML 表单用于搜集不同类型的用户输入。 <form> 元素 HTML 表单用于收集用户输入。 <for

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

<form> 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

HTML 表单包含表单元素。

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

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 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
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>

这段代码 First name 将不会提交，因为没有设置name属性。

用 <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

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

<form action="/demo/demo_form.asp">
<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 属性

<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>

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

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为 _self，这意味着响应将在当前窗口中打开。

示例

此处，提交的结果将在新的浏览器标签中打开：

<form action="/action_page.php" target="_blank">

Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

启用自动填写的表单：

<form action="/action_page.php" autocomplete="on">

Novalidate 属性

novalidate 属性是一个布尔属性。默认不设置。如果已设置，它规定提交时不应验证表单数据。

未设置 novalidate 属性的表单：

<form action="/action_page.php" novalidate>

<select> 元素（下拉列表）

<select> 元素定义下拉列表：

示例

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

效果

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

<option value="fiat" selected>Fiat</option>

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

效果：

<button> 元素

<button> 元素定义可点击的按钮：

示例

<button type="button" onclick="alert('Hello World!')">点击我！</button>

HTML5 表单元素

HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

效果：

<input>输入类型

输入类型：text

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

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

效果：

输入类型：password

<input type="password"> 定义密码字段：

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

效果：

输入类型：submit

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

表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序（form-handler）：

示例：

<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>

效果：

Input Type: radio

<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: checkbox

<input type="checkbox"> 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

Input Type: button

<input type="button> 定义按钮。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 输入类型

HTML5 增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

示例：

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

输入类型：date

<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持，日期选择器会出现输入字段中。

<form>
  生日:
  <input type="date" name="bday">
</form>

效果：

Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date"。

输入类型：color

<input type="color"> 用于应该包含颜色的输入字段。

根据浏览器支持，颜色选择器会出现输入字段中。

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

ie浏览器不支持type="color"。

输入类型：range

<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持，输入字段能够显示为滑块控件。

<form>
  <input type="range" name="points" min="0" max="10">
</form>

还能够使用这些属性来规定限制：min、max、step、value。

IE9 及早期版本不支持 type="range"。

输入类型：month

<input type="month"> 允许用户选择月份和年份。

根据浏览器支持，日期选择器会出现输入字段中。

示例:

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

注释： Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="month"。

输入类型：week

<input type="week"> 允许用户选择周和年。

根据浏览器支持，日期选择器会出现输入字段中。

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

输入类型：time

<input type="time"> 允许用户选择时间（无时区）。

根据浏览器支持，时间选择器会出现输入字段中。

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

注释： Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="time"。

输入类型：datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）。

根据浏览器支持，日期选择器会出现输入字段中。

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

输入类型：datetime-local

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

根据浏览器支持，日期选择器会出现输入字段中。

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Firefox 或者 Internet Explorer 不支持 type="datetime-local"。

输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

<form>
  E-mail:
  <input type="email" name="email">
</form>

输入类型：search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持，在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

<input>输入属性

value 属性

value 属性规定输入字段的初始值：

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

效果：

readonly 属性

readonly 属性规定输入字段为只读（不能修改）：

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

readonly 属性不需要值。它等同于 readonly="readonly"。

disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

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

disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性

size 属性规定输入字段的尺寸（以字符计）：

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

效果：

maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

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

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。

该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

HTML5 属性

HTML5 为 <input> 增加了如下属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step

并为 <form> 增加如需属性：

autocomplete
novalidate

autocomplete 属性

autocomplete 属性规定表单或输入字段是否应该自动完成。

当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。

autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

自动完成开启的 HTML 表单（某个输入字段为 off）：

示例

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

上面的例子,表单的自动完成功能是打开的，但是 e-mail 字段的自动完成功能是关闭的。

novalidate 属性

novalidate 属性属于 <form> 属性。

如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

示例

指示表单在被提交时不进行验证：

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

autofocus 属性

autofocus 属性是布尔属性。

如果设置，则规定当页面加载时元素应该自动获得焦点。

示例

使 "First name" 输入字段在页面加载时自动获得焦点：

First name:<input type="text" name="fname" autofocus>

form 属性

form 属性规定 <input> 元素所属的一个或多个表单。

提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

输入字段位于 HTML 表单之外（但仍属表单）： 不太懂。。。。

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>

 Last name: <input type="text" name="lname" form="form1">

formaction 属性

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"。

拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理员身份提交" />
</form>

formnovalidate 属性

novalidate 属性是布尔属性。

如果设置，则规定在提交表单时不对 <input> 元素进行验证。

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

示例

拥有两个提交按钮的表单（验证和不验证）：

<form action="/example/html5/demo_form.asp" method="get">
  E-mail: <input type="email" name="userid" /><br />
  <input type="submit" value="提交" /><br />
  <input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
</form>

formtarget 属性

formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

formtarget 属性会覆盖 <form> 元素的 target 属性。

formtarget 属性可与 type="submit" 和 type="image" 使用。

示例

这个表单有两个提交按钮，对应不同的目标窗口：

<form action="/example/html5/demo_form.asp" method="get">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" />
    <input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form>

height 和 width 属性

height 和 width 属性规定 <input> 元素的高度和宽度。

height 和 width 属性仅用于 <input type="image">。

注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

示例

把图像定义为提交按钮，并设置 height 和 width 属性：

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list 属性

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

示例

使用 <datalist> 设置预定义值的 <input> 元素：

<form action="/action_page.php">
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit" value="Submit">
</form>

Safari 12.0（或更早版本）不支持 datalist 标签。

min 和 max 属性

min 和 max 属性规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

示例

具有最小和最大值的 <input> 元素：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

multiple 属性

multiple 属性是布尔属性。

如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

示例

接受多个值的文件上传字段：

<form action="/example/html5/demo_form.asp" method="get">
    选择图片：<input type="file" name="img" multiple="multiple" />
    <input type="submit" />
</form>

pattern 属性

pattern 属性规定用于检查元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

提示：请使用全局的 title 属性对模式进行描述以帮助用户。

提示：请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。

示例

只能包含三个字母的输入字段（无数字或特殊字符）：

<form action="/example/html5/demo_form.asp" method="get">
    国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
                    title="三个字母的国家代码" />
    <input type="submit" />
</form>

placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

示例

拥有占位符文本的输入字段：

<form action="/example/html5/demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="Search W3School" />
    <input type="submit" />
</form>

效果：

required 属性

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

示例

<form action="/example/html5/demo_form.asp" method="get">
    Name: <input type="text" name="usr_name" required="required" />
    <input type="submit" value="提交" />
</form>

step 属性

step 属性规定元素的合法数字间隔。

示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。

提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

<form action="/example/html5/demo_form.asp" method="get">
    <input type="number" name="points" step="3" />
    <input type="submit" />
</form>

HTML Input form* 属性

form 属性

input 的 form 属性规定 <input> 元素所属的表单。

此属性的值必须等于它所属的 <form> 元素的 id 属性。

示例

<p>form 属性指定输入元素所属的表单。</p>

<form action="/demo/html/action_page.php" id="form1">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <input type="submit" value="提交">
</form>

<p>下面的 "Last name" 字段在 form 元素之外，但仍是表单的一部分。</p>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

在提交表单的时候 Last 也会被提交到表单里。

formenctype 属性

input 的 formenctype 属性指定提交时应如何编码表单数据（仅适用于 method="post" 的表单）。

注释：此属性将覆盖 <form> 元素的 enctype 属性。

formenctype 属性适用于以下输入类型：submit 和 image。

示例

<form action="/demo/html/demo_post_enctype.asp" method="post">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

formmethod 属性

input 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法。

注释：此属性将覆盖 <form> 元素的 method 属性。

formmethod 属性适用于以下输入类型：submit 和 image。

表单数据可以作为 URL 变量（method="get"）或作为 HTTP post 事务（method="post"）发送。

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

示例

<form action="/action_page.php" method="get">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

HTML 表单

<form> 元素

HTML 表单包含表单元素。

Action 属性

Method 属性

何时使用 GET？

何时使用 POST？

关于 GET 的注意事项：

关于 POST 的注意事项：

Name 属性

用 <fieldset> 组合表单数据

HTML Form 属性

Target 属性

Autocomplete 属性

Novalidate 属性

<select> 元素（下拉列表）

<textarea> 元素

<button> 元素

HTML5 表单元素

HTML5 <datalist> 元素

**<input>**输入类型

输入类型：text

输入类型：password

输入类型：submit

Input Type: radio

Input Type: checkbox

Input Type: button

HTML5 输入类型

输入类型：number

输入类型：date

输入类型：color

输入类型：range

输入类型：month

输入类型：week

输入类型：time

输入类型：datetime

输入类型：datetime-local

输入类型：email

输入类型：search

输入类型：tel

输入类型：url

**<input>**输入属性

value 属性

readonly 属性

disabled 属性

size 属性

maxlength 属性

HTML5 属性

autocomplete 属性

novalidate 属性

autofocus 属性

form 属性

formaction 属性

formnovalidate 属性

formtarget 属性

height 和 width 属性

list 属性

min 和 max 属性

multiple 属性

pattern 属性

placeholder 属性

required 属性

step 属性

HTML Input form* 属性

form 属性

formenctype 属性

formmethod 属性

关于 GET 的注意事项：

关于 POST 的注意事项：

<input>输入类型

<input>输入属性