表单

\

元素

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

元素定义 HTML 表单： 实例 . form elements .

HTML 表单包含表单元素。

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

元素是最重要的表单元素。

元素有很多形态，根据不同的 type 属性。

这是本章中使用的类型：
类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）

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

定义用于文本输入的单行输入字段：
实例

First name:

Last name:

元素

最重要的表单元素是 元素。

元素根据不同的 type 属性，可以变化为多种形态。

注释：下一章讲解所有 HTML 输入类型。
元素（下拉列表）

元素定义下拉列表：
实例

Volvo Saab Fiat Audi

亲自试一试

元素定义待选择的选项。

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

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

Fiat

亲自试一试
元素

元素定义多行输入字段（文本域）：
实例

The cat was playing in the garden.

亲自试一试

以上 HTML 代码在浏览器中显示为：

The cat was playing in the garden.

元素

元素定义可点击的按钮：
实例

Click Me!

亲自试一试

以上 HTML 代码在浏览器中显示为：
HTML5 表单元素

HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

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

元素为 元素规定预定义选项列表。

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

元素的 list 属性必须引用 元素的 id 属性。
实例

通过 设置预定义值的 元素：

输入类型：text

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

First name:

Last name:

亲自试一试

以上 HTML 代码在浏览器中看上去是这样的：
First name:

Last name:
输入类型：password

定义密码字段：
实例

User name:

User password:

亲自试一试

以上 HTML 代码在浏览器中看上去是这样的：
User name:

User password:

注释：password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
输入类型：submit

定义提交表单数据至表单处理程序的按钮。

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

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

First name:

Last name:

亲自试一试

以上 HTML 代码在浏览器中看上去是这样的：
First name:

Last name:

如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本：
实例

First name:

Last name:

亲自试一试
Input Type: radio

定义单选按钮。

Radio buttons let a user select ONLY ONE of a limited number of choices:
实例

Male
Female

亲自试一试

以上 HTML 代码在浏览器中看上去是这样的：
Male

Female
Input Type: checkbox

定义复选框。

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

I have a bike
I have a car

亲自试一试

以上 HTML 代码在浏览器中看上去是这样的：
I have a bike

I have a car
Input Type: button

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

亲自试一试

以上 HTML 代码在浏览器中看上去是这样的：
HTML5 输入类型

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

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

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

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

您能够对数字做出限制。

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

Quantity (between 1 and 5):

亲自试一试
输入限制

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

您将在下一章学到更多有关输入限制的知识。
实例

Quantity:

亲自试一试
输入类型：date

用于应该包含日期的输入字段。

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

Birthday:

亲自试一试

您可以向输入添加限制：
实例

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:

亲自试一试
输入类型：color

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

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

Select your favorite color:

亲自试一试
输入类型：range

用于应该包含一定范围内的值的输入字段。

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

亲自试一试

您能够使用如下属性来规定限制：min、max、step、value。
输入类型：month

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

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

Birthday (month and year):

亲自试一试
输入类型：week

允许用户选择周和年。

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

Select a week:

亲自试一试
输入类型：time

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

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

Select a time:

亲自试一试
输入类型：datetime

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

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

Birthday (date and time):

亲自试一试
输入类型：datetime-local

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

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

Birthday (date and time):

亲自试一试
输入类型：email

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

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

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

E-mail:

亲自试一试
输入类型：search

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

Search Google:

亲自试一试
输入类型：tel

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

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

Telephone:

亲自试一试
输入类型：url

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

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

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

Add your homepage:

亲自试一试

HTML 表单元素
HTML 输入属性

VUE 进阶教程
HTML 参考手册
HTML 实例
HTML 测验