HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
Input 类型: color
选择你喜欢的颜色: <input type="color" name="favcolor">
Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。
//定义一个时间控制器:<form action="demo-form.php">生日: <input type="date" name="bday"><input type="submit">
</form>
Input 类型: datetime
datetime 类型允许你选择一个日期(UTC 时间)。
定义一个日期和时间控制器(本地时间):生日 (日期和时间): <input type="datetime" name="bdaytime">
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
实例
定义一个日期和时间 (无时区):
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时,会自动验证 email 域的值是否合法有效:
E-mail: <input type="email" name="email">
Input 类型: month
month 类型允许你选择一个月份。
定义月与年 (无时区):
生日 (月和年): <input type="month" name="bdaymonth">
Input 类型: number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定:
定义一个数值输入域(限定):
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10">
下面的属性来规定对数字类型的限定:
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
Input 类型: search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
Search Google: <input type="search" name="googlesearch">
Input 类型: tel
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
Input 类型: url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
添加您的主页: <input type="url" name="homepage">
Input 类型: week
week 类型允许你选择周和年。
选择周: <input type="week" name="week_year">
HTML5 新的 Input 类型相关推荐
- input文本框设置不可编辑方法和HTML5 新的 Input 类型
input文本框设置不可编辑的3种方法: disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.设置后文字 ...
- HTML5 新的Input类型
Inpute类型:color color类型用在input字段主要用于选取颜色,如下所示: <!DOCTYPE HTML> <html><head><meta ...
- 19、HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证 本章全面介绍这些新的输入类型: color date datetime datetime-local email month ...
- 跟KingDZ学HTML5之九 HTML5新的 Input 种类
好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果. HTML5中新增加了很多 Input 的种类. 1.&l ...
- HTML5(六).Input 类型
[b][align=center][size=large]HTML5 新的 Input 类型[/size][/align][/b] HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制 ...
- HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持 创建一个画布(Canvas) 使用 JavaScript 来绘制图像 画线.画圆.写字.渐变效果 ...
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性.htm ...
- HTML5新特性知识点总结
一.HTML5特性 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他 ...
- HTML5新特性总结大全
一.HTML5概念: 1.什么是HTML5: (1)HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准: (2)HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 ...
最新文章
- 达摩院副院长金榕:中国 AI 将向何处?热潮有回落,但不应沮丧
- leetcode算法第9题
- android中暂停服务,Android暂停服务,线程,Asynctask?使用postdelayed的处理程序呢?...
- C++多线程实现电子词典
- NSUserDefaults数据保存使用
- matlab画圆的命令_matlab画半圆
- java 过滤器(参数传递中文乱码)
- 2014/11/4~2014/12/20阶段性目标
- 量子计算机的系统论思考,量子计算机发展带来的思考..doc
- 网易新闻 鸿蒙,本报记者体验华为首款鸿蒙产品
- Hadoop上传和下载大存储的HIVE表
- 各省简称 拼音 缩写_中国省市县地区首字母缩写
- 每日学习, 特征方程的复根
- session 失效 java.lang.IllegalStateException异常产生的原因及解决办法
- 【思特奇杯·云上蓝桥-算法集训营】第1周(第八题:excel 地址)(出错)
- U盘变32G的解决办法
- Wechaty创建属于自己的微信机器人(附源码)
- Hadamard 积, Kronecker 积 和 Khatri- Rao积
- 六度分离理论、150法则与弱链接 (转载)
- Autodesk AutoCAD Mac版卸载教程
热门文章
- 【机器翻译】《Nearest Neighbor Knowledge Distillation for Neural Machine Translation》论文总结
- 淘宝接入微信,并将支持微信支付
- mongorepository查询条件_springboot jpa + mongodb实现多条件查询数据
- greenplum的用法
- 农银e管家怎么显示服务器不对,农银e管家电脑版
- FFmpeg中的时间基(time_base), AV_TIME_BASE
- CrossFire和SLI
- python文本编辑器怎么运行_python程序编辑和运行的几种方法
- 推荐系统经典算法之协同过滤
- python代码缩进和冒号_Python缩进和冒号详解