你知道 html5 新增 input 类型有哪些吗?

HTML5 中新增的 元素类型非常丰富,以下是一些常用的类型及其示例:

1、email - 用于输入电子邮件地址。

<input type="email" name="user_email">

2、url - 用于输入 URL 地址。

<input type="url" name="user_website">

3、number - 用于输入数值。

<input type="number" name="quantity" min="1" max="100">

4、range - 用于创建滑块控件,通常用于选择数值范围。

<input type="range" name="volume" min="0" max="100">

5、color - 用于选择颜色,直接可以调出现成的拾色器。

<input type="color" name="color_picker">

6、date - 用于输入日期类型 [ 年 / 月 / 日 ]

<input type="date" name="date_picker">

7、month - 用于输入月份类型[ 年 / 月 ]

<input type="month" name="month_picker">

8、week - 用于输入周类型[ 年 / 周 ]

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

9、time - 用于输入时间类型

<input type="time" name="time_picker">

10、search - 用于搜索框。

<input type="search" name="search_box">

11、tel - 用于输入电话号码。

<input type="tel" name="phone_number">

12、file - 用于上传文件。

<input type="file" name="file_upload">

除了上述类型外,还有一些比较特殊的类型,例如 datetime-localdatetime 等,不过它们的浏览器支持情况可能有限,需要根据具体情况选择使用。

13、datetime-local类型的输入框可以让用户选择日期和时间,并将其表示为本地时间(也就是用户当前所在的时区)。

它输入格式为 yyyy-mm-dd T hh:mm:ss,其中 T 表示日期和时间之间的分隔符。

<label for="datetime">选择日期和时间:</label>
<input type="datetime-local" id="datetime" name="datetime">

14、datetime类型的输入框与datetime-local类型类似,但是它表示的是一个具有时区信息的日期和时间。

它输入格式为 yyyy-mm-dd T hh:mm:ss TZD,其中TZD表示时区信息。

<label for="datetime">选择日期和时间:</label>
<input type="datetime" id="datetime" name="datetime">

datetime-localdatetime 类型的输入框,有些浏览器不支持,所以在使用时需要进行兼容性检测。


[1] 阅读原文

大家好!我是 Just,这里是[ 设计师工作日常 ],求点赞求关注!!!

相关推荐

  1. 知道Web框架哪些?

    2024-01-28 21:22:01       50 阅读
  2. 知道数据库哪些约束

    2024-01-28 21:22:01       41 阅读
  3. HTML5新增元素

    2024-01-28 21:22:01       76 阅读
  4. HTML5 Input 验证身份证

    2024-01-28 21:22:01       27 阅读
  5. 探索HTML5Input类型:重塑表单交互的未来

    2024-01-28 21:22:01       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-28 21:22:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-28 21:22:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-28 21:22:01       82 阅读
  4. Python语言-面向对象

    2024-01-28 21:22:01       91 阅读

热门阅读

  1. 7-2 求二叉树的叶子结点个数

    2024-01-28 21:22:01       52 阅读
  2. 微服务面试题

    2024-01-28 21:22:01       59 阅读
  3. 言传身留:NLP技术引领机器翻译革新

    2024-01-28 21:22:01       41 阅读
  4. Python Appium组件使用详解

    2024-01-28 21:22:01       52 阅读
  5. 更新最近可以使用的 ip归属地免费api

    2024-01-28 21:22:01       54 阅读
  6. 软考 系统分析师系列知识点之范围管理(1)

    2024-01-28 21:22:01       55 阅读
  7. leetcode-移除链表元素

    2024-01-28 21:22:01       52 阅读
  8. leetcode-2846、560、239、76

    2024-01-28 21:22:01       53 阅读
  9. C 练习实例46-宏#define命令练习

    2024-01-28 21:22:01       57 阅读
  10. Python类变量和实例变量

    2024-01-28 21:22:01       49 阅读
  11. CCF-CSP 202309-1 坐标变换(其一)

    2024-01-28 21:22:01       50 阅读
  12. C++继承

    C++继承

    2024-01-28 21:22:01      57 阅读