HTML5--表单标签input新增type值

青旅半醒 2022-06-15 12:13 316阅读 0赞

**文章内容大部分都引用于W3C，仅供笔者自己使用参考。**

# **1.input标签新增type值以及浏览器支持情况** #

![这里写图片描述][SouthEast]

--------------------

# **2.新增type值中常用的** #

## **2.1 Input 类型 - email** ##

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

> **备注：默认email只做了@匹配，对于长度，com,cn, \[ . \]等都没做处理**
> 
> **如下图所示**  
> ![这里写图片描述][SouthEast 1]

**实例**

E-mail: <input type="email" name="user_email" />

--------------------

## **2.2 Input 类型 - Date Pickers（日期选择器）** ##

**HTML5 拥有多个可供选取日期和时间的新输入类型：**

date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间（小时和分钟）
    datetime - 选取时间、日、月、年（UTC 时间）
    datetime-local - 选取时间、日、月、年（本地时间）
    下面的例子允许您从日历中选取一个日期：

> **使用场景：生日、入职日期、看病日期记录、日记等等**
> 
> **type为date时视图**
> 
> ![这里写图片描述][SouthEast 2]

**实例**

Date: <input type="date" name="user_date" />

--------------------

## **2.3 Input 类型 - search** ##

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

**实例**

Date: <input type="search" name="user_date" />

> ![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220615/af9b525215814a89b40f8c0ba2817378.png
[SouthEast 1]: /images/20220615/b1dad093527a4233ba92452c60084e3a.png
[SouthEast 2]: /images/20220615/775342ce85374256abb8c7ea831ae3bf.png
[SouthEast 3]: /images/20220615/2c12f23839ee4cc1a1c23ca8293662b9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5新增标签

HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件

﹏ヽ暗。殇╰゛Y/ 2024年02月17日 17:48/ 0 赞/ 87 阅读

相关 HTML5新增表单属性（HTML5）

HTML5新增表单属性（HTML5） <!DOCTYPE html> <html lang="en"> <head> <

梦里梦外;/ 2023年10月03日 13:31/ 0 赞/ 29 阅读

相关 HTML5新增type类型，HTML5新增属性

html5版本新增了很多类型，我们挑一些常用的进行展示：详细学习地址可以参照w3c进行学习： https://www.w3school.com.cn/html5/at

比眉伴天荒/ 2023年09月27日 13:41/ 0 赞/ 153 阅读

相关 HTML笔记：表单input标签

> 摘要：微信搜索【[三桥君][Link 1]】 > 说明：这是关于HTML5的代码笔记一、理论知识表单标签 from：表单的最外层容器 input：标

短命女/ 2023年03月04日 10:30/ 0 赞/ 170 阅读

相关前端4-2-2：Html5中input新增type属性值

在HTML5中，为input元素新增了以下一些type属性值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

￡神魔★判官ぃ/ 2022年11月15日 14:24/ 0 赞/ 152 阅读

相关 HTML5表单新增功能

1、input表单的type类型 tel 说明：此类型要求输入一个电话号码,用来验证电话号码之类的文本框，需要与pattern属性结合使用，type的值

以你之姓@/ 2022年08月03日 03:12/ 0 赞/ 265 阅读

相关 HTML5--表单标签input新增type值

文章内容大部分都引用于W3C，仅供笔者自己使用参考。 1.input标签新增type值以及浏览器支持情况 ![这里写图片描述][SouthEast] --------

青旅半醒/ 2022年06月15日 12:13/ 0 赞/ 317 阅读

相关 HTML5 input元素所有type值

[link][] Img ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

旧城等待，/ 2022年01月30日 07:11/ 0 赞/ 229 阅读

相关 html5新增标签

1、视频标签<video> IE8或者更早的IE版本不支持。 <videowidth="320"height="240"controls>

朴灿烈づ我的快乐病毒、/ 2021年12月01日 10:46/ 0 赞/ 475 阅读

相关 html其他表单和html5新增标签

邮箱表单 <input type="email" name="email" id="email" value="" /> url表单校验网址 <

一时失言乱红尘/ 2021年11月17日 03:58/ 0 赞/ 454 阅读