IT兄弟连 HTML5教程 HTML5表单 多样的输入类型2
2024-10-12 08:02:41
4 range
range类型用于包含一定范围内数字值的输入域,跟number一样,我们还可以对数值设置限定,range类型显示为滑动条用法如下:
上述代码使用了range类型输入框,为该类型设置了数值范围为1~100。移动滑动条可以改变数值大小,当点击提交后,弹出该值大小。效果如图1所示:
图1 range的输入类型
5 Date picker
Date picker是日期选择器,HTML5拥有多个可供选取日期和时间的新输入类型。具体选择如表。
表 Date picker新输入类型
下面我们以date为例,我们可以通过日期选择器从日历中选取一个日期,代码如下:
上述代码使用了date类型输入框,效果如图2所示:
图2 date的输入类型
感兴趣的读者,可以使用其它类型的日期选择器,用法与date一致。
6 color
color类型就是一个拾色器,用于规定颜色,该输入类型允许我们从拾色器中选取颜色。它的值为颜色得16进制值。color类型的输入框用法如下:
上述代码使用了color类型输入框,点击后出现拾色器以供我们选取特定的颜色。效果如图3所示:
图3 color的输入类型
选取好颜色后,点击提交按钮,这是会弹出警示框显示该颜色的十六进制值。效果如图4所示:
图4 color的十六进制值
最新文章
- java web学习总结(二十三) -------------------编写自己的JDBC框架
- webbench---linux压测工具
- Android 中沉浸式状态栏实现
- sqlserver 死锁原因及解决方法
- C++ Redis mset 二进制数据接口封装方案
- in/exists not in/not exists null
- vs2010中臃肿的ipch和sdf文件
- 第一章 :绪论-Twitter数据的收集和处理
- Js替换地址栏参数
- Mysql规范和使用注意点(转)
- View事件分发机制
- Java基础笔记4
- PHP常见面试题总结
- 动态规划dp
- BeautifulSoup的基本用法
- Unity 之 如何删除Unity项目里面没用的东西??
- Android SAX解析XML
- 牛客寒假算法基础集训营6 J-迷宫
- 供CImage类显示的半透明PNG文件处理方法
- Windows7安装Mongodb
热门文章
- 首创诠释docker的Formulas: Windows 7 + Tiny Linux 4.19 + XFS + Vmware Workstation = super machine (docker从零开始时记,Follow me and you go)
- Enumeration接口和Iterator接口的区别有哪些?
- java面试题干货96-125
- 建议2:注意Javascript数据类型的特殊性---(1)防止浮点数溢出
- mysql中where和having子句的区别和具体用法
- 聊一聊JS输出为[object,object]是怎么回事
- Ansible自动化部署入门到进阶笔记
- [从今天开始修炼数据结构]队列、循环队列、PriorityQueue的原理及实现
- 65-如何部署 Calico 网络?
- <;深度学习>;Tensorflow遇到的坑之一