HTML 输入类型

收藏496

阅读974

更新时间2025-07-15

前言:

本章描述 <input> 元素的输入类型。

本章描述 元素的输入类型。

输入类型: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

运行实例 »

以上 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:

运行实例 »

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号