HTML中input标签的23种type类型

简介: HTML中input标签的23种type类型
一、概述

随着html5的出现,input标签新增了多种类型,用以接收各种类型的用户输入。其中传统输入控件有10种,新增输入控件有13种。

二、传统类型

传统输入控件有10种,如下所示

text        定义单行文本输入框
password    定义密码输入框
file        定义文件上传控件
radio       定义单选按钮
checkbox    定义复选框
hidden      定义隐藏的输入字段
button      定义按钮
image       定义图像形式的提交按钮
reset       定义重置按钮,重置按钮会清除表单中的所有数据
submit      定义提交按钮,提交按钮会把表单数据发送到服务器
三、新增类型

新增输入控件有13种,如下所示。

color    定义调色板
tel      定义包含电话号码的输入域
email    定义包含email地址的输入域
url      定义包含URL地址的输入域
search   定义搜索域
number   定义包含数值的输入域
range    定义包含一定范围内数字值的输入域
date     定义选取日、月、年的输入域 
month    定义选取月、年的输入域
week     定义选取周、年的输入域
time     定义选取月、年的输入域
datetime 定义选取时间、日 月、年的输入域(UTC时间)
datetime-local 定义选取时间、日 月、年的输入域(本地时间)

ie和firefox这6种日期类型都不支持,chrome不支持datetime类型。要预设控件的日期和时间,可以用字符串设置value属性。

date                   YYYY-MM-DD
time                   hh:mm:ss.s
datetime               YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month                 YYYY-MM
week                   YYYY-Wnn
YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数,从1月的第一周开始是1,直到52

该类型的value特性格式还可以用在min和max的特性里,用来创建时间跨度。step可以用来设置移动的刻度。chrome不支持该类型的step设置。

相关文章
|
24天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
26 1
|
9天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
11 2
|
13天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
20 1
|
21天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
24天前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
9 0
HTML5中的语义化标签有哪些?
|
27天前
|
存储 移动开发 前端开发
html的常用标签
【4月更文挑战第1天】html的常用标签
22 4
|
1月前
如何在HTML中添加标签
如何在HTML中添加标签【2月更文挑战第26天】
34 5
|
1月前
HTML标签
【2月更文挑战第16天】HTML标签。
22 3
|
1月前
|
移动开发 搜索推荐 HTML5
HTML语义化标签
HTML语义化标签