登录  /  注册

HTML5中新增了哪些input控件类型

青灯夜游
发布: 2022-05-30 15:33:58
原创
6533人浏览过

新增13个类型:1、color,拾色器控件;2、date,日期控件,包括年月日,但不包括时间;3、tel,电话号码控件;4、time,时间控件(不带时区);5、“datetime-local”,日期时间控件;6、search,搜索控件等等。

HTML5中新增了哪些input控件类型

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

<input> 标签规定了用户可以在其中输入数据的输入字段,该元素在

元素中使用,用来声明允许用户输入数据的 input 控件。

type 属性规定要显示的 <input> 元素的类型。

HTML5中新增的input控件类型(type 属性值)

描述
color 定义拾色器。
date 定义 date 控件(包括年、月、日,不包括时间)。
datetime 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email 定义用于 e-mail 地址的字段。
month 定义 month 和 year 控件(不带时区)。
number 定义用于输入数字的字段。
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
search 定义用于输入搜索字符串的文本字段。
tel 定义用于输入电话号码的字段。
time 定义用于输入时间的控件(不带时区)。
url 定义用于输入 URL 的字段。
week 定义 week 和 year 控件(不带时区)。

下面介绍类型:

  • color

这里写图片描述
点击时弹出颜色选择器,可以选择任意颜色

  • number
    这里写图片描述
    输入范围内的数字,可以手动输入超出范围的数字,但不能提交

  • tel
    输入电话号码,只有safari支持

  • email
    自带检测功能,提交时会检测是否包含@符,并且@符前后是否有字符

  • range
    这里写图片描述

  • url
    输入的网址必须是http://开头,并且后面必须有字符,否则不能提交

  • search

    定义用于输入搜索字符串的文本字段

  • 日期控件 - date

1.png

<input>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
  • 时间控件 - time

2.png

2-2.png

<input><input>
登录后复制
  • 日期时间控件 - datetime-local

3.png

<input>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
  • 月控件 - month

4.png

<input>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
  • 周控件 - week

5.png

<input>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
  • 日期时间控件--datetime

6.png

<input>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

说明:日期时间控件也支持min和max属性,表示可设置的最小和最大时间

7.png

<input>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

相关推荐:《html视频教程

以上就是HTML5中新增了哪些input控件类型的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号