跟KingDZ学HTML5之九 HTML5新的 Input 种类
好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果。
HTML5中新增加了很多 Input 的种类。
1.<input type="search"> 查询文本框
2.<input type="number"> 数字文本框
3.<input type="range"> 滑动条
4.<input type="color"> 颜色文本框
5.<input type="tel"> 电话号码文本框
6.<input type="url"> 网站文本框
7.<input type="email"> 电子邮箱文本框
下面这几个都是时间的选择器。
8.<input type="date"> 选取日、月、年
9.<input type="month"> 选取月、年
10.<input type="week"> 选取周和年
11.<input type="time"> 选取时间(小时和分钟)
12.<input type="datetime"> 选取时间、日、月、年(UTC 时间)
13.<input type="datetime-local">选取时间、日、月、年(本地时间)
好了,大家先简单的看一下,一会给大家演示每一个的效果,大家就应该熟悉了
哦,对了,先给大家展示一个目前浏览器对这些 input 的支持情况
input 种类 | IE | FF | Opero | Chrome |
search | 不支持 | 不支持 | 不支持 | 不支持 |
number | 不支持 | 不支持 | 9.0以上 | 不支持 |
range | 不支持 | 不支持 | 9.0以上 | 4.0以上 |
color | 不支持 | 不支持 | 不支持 | 不支持 |
tel | 不支持 | 不支持 | 9.0以上 | 不支持 |
url | 不支持 | 不支持 | 9.0以上 | 不支持 |
不支持 | 不支持 | 9.0以上 | 不支持 | |
时间 | 不支持 | 不支持 | 9.0以上 | 不支持 |
大家惊讶了吧,竟然支持率这么低。我也无奈了。
好了,给大家每个都简单的介绍一下吧。
1>Search
Search类型的input元素是一种专门用来输入搜索关键词的文本框的文本框
<input type="search" list="searchlist" autocomplete="on" /><datalist id="searchlist"><option value="http://www.cnblogs.com" label="博客园" /><option value="http://www.cnblogs.com/hihell" label="kingDZ" /></datalist>
简单的例子,效果图
好了,介绍几个,咱们以前没见到过的属性。
list="searchlist"
这个 list 你可以理解成 数据源,然后下面声明一个 datalist 即可 记住 ID 一定要等于 searchlist 啊 。
autocomplete="on"
自动补充完整,你自已可以测试一下 ,他有两个值 on/off
autofocus = "autofocus" or ""
这个代表着 焦点落在 这个标签上。
required = "required" or ""
是否为必填项。
placeholder 提示信息 写上之后
placeholder = “请选择网址”
2>number
这个就比较简单了,就是显示选择数字的
可以看到,比正常的文本框,多了一个上下选择器。
<input type="number" max="9" min="0" step="any"/>
max最大值,min最小值 step 每按一下箭头 ,数字增加或者减小的 数目 ,any 代表不设置。
3>range
准确的说这个应该不叫滚动条,呵呵。
<input type="range" max="9" min="0" step="2" />
4>color
color类型的input元素用来选取颜色,它提供了一个颜色选取器。
<input type="color" value="#ff00ff"/>
后面的那个 value 是一个默认颜色,目前只支持16进制的颜色。
好了,这节课就介绍这几个吧,下节课在介绍剩下的。
转载于:https://www.cnblogs.com/zhaolizhe/p/6923524.html
跟KingDZ学HTML5之九 HTML5新的 Input 种类相关推荐
- HTML5的十大新特性
原文网址:HTML5的十大新特性_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍HTML5的十大新特性和一些废除的特性. HTML5总体比HTML4多了十个新特性,但其不支持IE8及IE8以下 ...
- 跟KingDZ学HTML5之八 HTML5之Web Save
好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵 弄不好,开个专题,也可以.(*^__^ ...
- 跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
- 解析:学Java好还是HTML5好?
互联网行业前景好,薪资高,很多想进去这一领域的小伙伴都在纠结,学Java好还是HTML5好?对于想学习软件开发的朋友来说,HTML5是新兴起的技术,发展前景应该不错;Java一直以来都很受欢迎,所以发 ...
- HTML5与CSS3的新特性。
HTML5与CSS3的新特性 1.HTML5新特性 1.1.新特性的兼容问题 HTML5的新增特性主要是针对以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 ...
- 19、HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证 本章全面介绍这些新的输入类型: color date datetime datetime-local email month ...
- [html] html5都有哪些新的特性?移除了哪些元素?
[html] html5都有哪些新的特性?移除了哪些元素? 新增特性canvassvgvideodrag & droplocalStorage/sessionStorage语义化标签: hea ...
- 我最开始学dancing link的HTML5的时候
我最开始学dancing link的HTML5的时候,自己敲出了代码,然后接下来的几道题部分参考了以前的代码,后来基本上是直接copy.现在,当别人问我dancing link算法或有关的题目的时候, ...
- HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. Input 类型: color 选择你喜欢的颜色: <input type="color" na ...
最新文章
- extjs2.0 ie8 下拉树_extjs自定义下拉树
- 最新综述 | 基于深度学习的立体视觉深度估计
- 50颗传感器、超1亿像素,算力700TOPS,这个自动驾驶平台有点儿炫!
- 什么是神经网络在object detection的应用?cascade classifier,卷积神经网络,迁移学习
- php 文件上传页面模板,PHP文件上传类实例详解
- Python练习 | Python3中的格式化输入输出之print函数
- 【第一期】史上最全电子漫画合集,收藏了。
- 计算机文件系统小结,文件系统总结
- Graph Convolutional Networks 图卷积网络
- 2021年5月系统集成项目管理工程师案例分析真题讲解(2)
- curl 504 php,nginx - PHP 经常提示 504 Gateway Time-out
- 集成融云RongCloud视频通话功能PC端
- 论文推荐:陈国生 实证化中医基础理论
- 软件测试自我介绍 说什么才能让面试官一下子记住你!
- ——java中的反射
- 《生命不息,折腾不止》
- 验证码--数字和英文
- Sublime与Firefox(火狐)配置livereload插件实现动态实时刷新浏览器
- sample 随机抽取样本
- 剑桥大学哪些专业需要IB物理成绩?
热门文章
- FPGA 串口接收不准确,有误码
- java 面试常问问题
- python微信图标制作_Python十分钟制作属于你自己的个性logo
- python散点图拟合曲线如何求拟合_python 拟合曲线并求参
- 视频抽帧并存图 python_使用Python实现跳帧截取视频帧
- 湖北理工学院c语言实验报告答案,湖北理工学院c语言实验报告七答案.doc
- linux过滤某个mac的包,macOS 下使用 tcpdump 抓包
- python解读器_Python装饰器完全解读
- pythonmysql包_[Python] MySQLdb(即 MySQL-python 包)在 OS X 中安装指南
- oracle sql中打印,在Oracle SQL Developer SQL工作表窗口中打印文本