Html5新增和改良的input元素

本文详细介绍了HTML5中的各种表单输入类型,包括URL、Email、Date等,每种类型都附带了示例代码,展示了如何使用这些输入类型来增强网页表单的功能性和用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

url类型

专门用来输入url地址的文本框。
提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。

<input type="url" name="url" value="http://www.baidu.com">

email类型

(1)专门用来输入email地址的文本框。
(2)提交时如果该文本框中内容不是email地址格式的文字,则不允许提交,但是并不检查email地址是否存在。
(3)具有一个multiple属性:允许在该文本框中输入以逗号分隔的email地址.

<input type="email" name="email1" value="124564677@qq.com">

date类型

以日历的形式方便用户输入。

<input type="date" name="date1" value="2010-10-02">

这里写图片描述


month类型

专门用来输入月份的文本框,并且在提交时对输入的月份的有效性进行检查。

<input type="month" name="month1" value="2010-10">

这里写图片描述


time类型

(1)专门用来输入时间的文本框,并且在提交时对输入时间的有效性进行检查。
(2)外观取决于浏览器,可能是简单的文本框,并且在提交时检查是否在其中输入了有效的时间。也可能以时钟形式出现,还允许携带时区。

<input type="time" name="time1" value="10:00">

这里写图片描述


datetime-local类型

专门用来输入本地日期和时间的文本框,并且在提交时对输入的日期和时间进行有效性检查。

<input type="datetime-local" name="datetime-local1">

这里写图片描述


week类型

专门用来输入周号的文本框,并且在提交时对输入的周号的有效性进行检查。

<input type="week" name="week1">

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值