HTML表单

• HTML 表单
  • 一、HTML 表单
    • 1.1 <form> 元素
    • 1.2 <input> 元素
    • 1.3 组合表单数据 <fieldset>
  • 二、HTML 表单属性
    • 2.1 Target 属性
    • 2.2 Autocomplete 属性
    • 2.3 Novalidate 属性
  • 三、HTML 表单元素
    • 3.1 <select> 元素（下拉列表）
    • 3.2 <textarea> 元素
    • 3.3 <button> 元素
    • 3.4 HTML5 <datalist> 元素
  • 四、HTML <input> 输入类型
    • 4.1 类型：text
    • 4.2 类型：password
    • 4.3 类型：submit
    • 4.4 类型: radio
    • 4.4 类型: checkbox
    • 4.5 类型: button
    • 4.6 HTML5 输入类型
    • 4.7 类型:number
    • 4.8 类型：date
    • 4.9 类型：color
    • 4.10 类型：range
    • 4.11 类型：month
    • 4.12 类型：week
    • 4.13 类型：time
    • 4.14 类型：datetime
    • 4.15 类型：datetime-local
    • 4.16 类型：email
    • 4.17 类型：search
    • 4.18 类型：tel
    • 4.19 类型：url
  • 五、HTML 输入属性
    • 5.1 value 属性
    • 5.2 readonly 属性
    • 5.3 disabled 属性
    • 5.4 size 属性
    • 5.5 maxlength 属性
    • 5.6 HTML5 属性
    • 5.7 autocomplete 属性
    • 5.8 novalidate 属性
    • 5.9 autofocus 属性
    • 5.10 form 属性
    • 5.11 formaction 属性
    • 5.12 formenctype 属性
    • 5.13 formmethod 属性
    • 5.14 formnovalidate 属性
    • 5.15 formtarget 属性
    • 5.16 height 和 width 属性
    • 5.17 min 和 max 属性
    • 5.18 multiple 属性
    • 5.19 pattern 属性
    • 5.20 placeholder 属性
    • 5.21 required 属性
    • 5.22 step 属性

HTML 表单

一、HTML 表单

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

<form>属性列表：

属性	描述
accept-charset	规定用于表单提交的字符编码。（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定表单是否应打开自动完成（填写）功能。（默认：开启）。
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method=“post”）。（默认：url-encoded）。
method	规定发送表单数据时要使用的 HTTP 方法。（默认：GET）。
name	规定表单名称。（对于 DOM 使用：document.forms.name）。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定 action 属性中地址的目标（默认：_self）。

1.1 <form> 元素

定义 HTML 表单：

<form></form>

HTML 表单包含表单元素:

• input 元素
• 复选框
• 单选按钮
• 提交按钮

Action 属性

定义在提交表单时执行的动作:

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

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

Method 属性
规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

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

GET：

• 以名称/值对的形式将表单数据追加到 URL
• 适合少量数据的提交。
• URL 的长度受到限制（2048 个字符）
• 将结果添加为书签的表单提交很有用
• 适用于非安全数据

POST：

• 安全性更好，在页面地址栏中被提交的数据是不可见的。
• 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
• POST 没有大小限制，可用于发送大量数据。
• 带有 POST 的表单提交无法添加书签

1.2 <input> 元素

根据不同的 type 属性，有多种形态。
文本字段的默认宽度是 20 个字符。

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

文本输入：

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

First name:

Last name:

单选按钮输入
在有限数量的选项中选择其中之一：

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

Male
Female

提交按钮

定义用于向表单处理程序（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>

First name:

Last name:

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性：

<input type="text" name="lastname" value="Mouse" />

1.3 组合表单数据 <fieldset>

<fieldset> 元素组合表单中的相关数据
<legend> 元素为 元素定义标题。

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

二、HTML 表单属性

2.1 Target 属性

规定提交表单后在何处显示响应。
可设置：

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

默认值为 _self，在当前窗口中打开。

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

2.2 Autocomplete 属性

规定表单是否应打开自动完成功能。
浏览器会根据用户之前输入的值自动填写值。

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

2.3 Novalidate 属性

布尔属性。(如果已设置，它规定提交时不应验证表单数据。)

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

三、HTML 表单元素

3.1 <select> 元素（下拉列表）

<option> 元素定义待选择的选项。
首个选项显示为被选选项。
添加 selected 属性来定义预定义选项。

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

Volvo Saab Fiat Audi

3.2 <textarea> 元素

定义多行输入字段（文本域）：

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

The cat was playing in the garden.

3.3 <button> 元素

定义可点击的按钮：

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

Click Me!

3.4 HTML5 <datalist> 元素

为 <input> 元素规定预定义选项列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性:

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

四、HTML <input> 输入类型

输入限制：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

4.1 类型：text

定义供文本输入的单行输入字段：

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

4.2 类型：password

定义密码字段（被做掩码处理（显示为星号或实心圆））：

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

4.3 类型：submit

定义提交表单数据至表单处理程序的按钮。
省略了提交按钮的 value 属性，那么该按钮将获得默认文本：

<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" />
  <!-- <input type="submit"  value="Submit"/> -->
</form>

4.4 类型: radio

定义单选按钮。

4.4 类型: checkbox

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

4.5 类型: button

定义按钮。

4.6 HTML5 输入类型

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

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

4.7 类型:number

用于应该包含数字值的输入字段

<input type="number" name="quantity" min="1" max="5" />

4.8 类型：date

应该包含日期的输入字段：

<form>
  Birthday:
  <input type="date" name="bday" />
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31" /><br />
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02" /><br />
</form>

4.9 类型：color

应该包含颜色的输入字段。

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

4.10 类型：range

用于应该包含一定范围内的值的输入字段。
属性：min、max、step、value。

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

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

4.11 类型：month

允许用户选择月份和年份。

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

4.12 类型：week

允许用户选择周和年。

<input type="week" name="week_year" />

4.13 类型：time

允许用户选择时间（无时区）。

<input type="time" name="usr_time" />

4.14 类型：datetime

允许用户选择日期和时间（有时区）。

<input type="datetime" name="bdaytime" />

4.15 类型：datetime-local

允许用户选择日期和时间（无时区）。

<input type="datetime-local" name="bdaytime" />

4.16 类型：email

用于应该包含电子邮件地址的输入字段。

<input type="email" name="email" />

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

4.17 类型：search

用于搜索字段（搜索字段的表现类似常规文本字段）

<input type="search" name="googlesearch" />

4.18 类型：tel

用于应该包含电话号码的输入字段。

<input type="tel" name="usrtel" />

4.19 类型：url

用于应该包含 URL 地址的输入字段。

<input type="url" name="homepage" />

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

五、HTML 输入属性

5.1 value 属性

规定输入字段的初始值：

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

5.2 readonly 属性

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

<input type="text" name="firstname" value="Bill" readonly />

5.3 disabled 属性

规定输入字段是禁用的。
被禁用的元素是不可用、不可点击的、不会被提交。

<input type="text" name="firstname" value="Bill" disabled />

5.4 size 属性

规定输入字段的尺寸（以字符计），输入框的大小：

<input type="text" name="firstname" value="Bill" size="40" />

5.5 maxlength 属性

规定输入字段允许的最大长度,：

<input type="text" name="firstname" maxlength="10" /><input
  type="text"
  name="firstname"
  maxlength="10"
/>

输入控件不会接受超过所允许数的字符。

5.6 HTML5 属性

<input> ：

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

<form>:

• autocomplete
• novalidate

5.7 autocomplete 属性

form 和 input 都有

规定表单或输入字段是否应该自动完成。
浏览器会基于用户之前的输入值自动填写值。

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

5.8 novalidate 属性

在提交表单时不对表单数据进行验证。

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

5.9 autofocus 属性

布尔属性。
自动获得焦点。

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

5.10 form 属性

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

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

5.11 formaction 属性

规定当提交表单时处理该输入控件的文件的 URL。
覆盖 <form> 元素的 action 属性。

不同按钮对应不同的提交

<form action="action_page.php">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

5.12 formenctype 属性

规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）

<input type="submit" formenctype="multipart/form-data"

5.13 formmethod 属性

向 action URL 发送表单数据（form-data）的 HTTP 方法。

<input
  type="submit"
  formmethod="post"
  formaction="demo_post.asp"
  value="Submit using POST"
/>

5.14 formnovalidate 属性

规定在提交表单时不对 <input> 元素进行验证。

<input type="submit" formnovalidate value="Submit without validation" />

5.15 formtarget 属性

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

<input type="submit" formtarget="_blank" value="Submit to a new window" />

5.16 height 和 width 属性

规定 <input> 元素的高度和宽度。
仅用于 <input type=“image”>。

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

5.17 min 和 max 属性

规定 <input> 元素的最小值和最大值。

输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

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

5.18 multiple 属性

允许用户在 <input> 元素中输入一个以上的值。
适用类型：email 和 file。

Select images: <input type="file" name="img" multiple />

5.19 pattern 属性

规定用于检查 <input> 元素值的正则表达式。
适用：text、search、url、tel、email、and password。

<input
  type="text"
  name="country_code"
  pattern="[A-Za-z]{3}"
  title="Three letter country code"
/>

5.20 placeholder 属性

规定用以描述输入字段预期值的提示。
适用：text、search、url、tel、email 以及 password。

<input type="text" name="fname" placeholder="First name" />

5.21 required 属性

规定在提交表单之前必须填写输入字段。
适用：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

Username: <input type="text" name="usrname" required />

5.22 step 属性

规定 <input> 元素的合法数字间隔。
适用：number、range、date、datetime、datetime-local、month、time 以及 week。

<input type="number" name="points" step="3" />