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设置。

相关文章
|
28天前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
94 49
|
22天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
35 5
|
22天前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`<input type="url">` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
22天前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`<input type="tel">` 用于输入电话号码;`<input type="time">` 允许用户选择时间(不带时区);`<input type="url">` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
|
23天前
|
移动开发 HTML5
HTML5 新的 Input 类型2
`<input>` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
23天前
|
移动开发 HTML5
HTML5 新的 Input 类型3
`<input type="month">` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `<input type="number">` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
|
23天前
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`<input type="color">`允许用户通过颜色选择器选取颜色,而`<input type="date">`则提供了一个日期选择器来方便用户选择日期。
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
22天前
|
移动开发 HTML5
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。
|
1月前
|
存储 移动开发 前端开发