02-HTML5新的input属性
本节重点
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证
本节介绍新的输入类型:
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
color
color 类型用在input字段主要用于选取颜色
从拾色器中选择一个颜色:
<input type="color" name="mycolor">
date
date 类型允许你从一个日期选择器选择一个日期。
定义一个时间控制器:
<input type="date" name="mytime">
datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
定义一个日期和时间 (无时区):
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
email 类型用于应该包含 e-mail 地址的输入域
在提交表单时,会自动验证 email 域的值是否合法有效
E-mail: <input type="email" name="email">
提示: iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)
month
month 类型允许你选择一个月份。
定义月与年 (无时区):
生日 (月和年): <input type="month" name="bdaymonth">
number
number 类型用于应该包含数值的输入域。
你还能够设定对所接受的数字的限定:
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
range
ange 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
定义一个不需要非常精确的数值(类似于滑块控制):
<input type="range" name="points" min="1" max="10">
search
search 类型用于搜索域,比如站点搜索或 Google 搜索
定义一个搜索字段 (类似站点搜索或者Google搜索):
Google Search: <input type="search" name="googlesearch">
tel
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
time
time 类型允许你选择一个时间。
定义可输入时间控制器(无时区):
选择时间: <input type="time" name="usr_time">
url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
定义输入URL字段:
添加您的主页: <input type="url" name="homepage">
提示: iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。
week
week 类型允许你选择周和年。
定义周和年 (无时区):
选择周: <input type="week" name="week_year">
02-HTML5新的input属性的更多相关文章
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- xampp搭建服务器环境、html5新的input类型
怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...
- Html5新增加的属性
用2中方法给单复选框增加新的特性,使直接点击文字就可以被选中 1.将选项放入label标签内添加for属性,并在input标签内添加id,两者值相同. 2.将input标签放到label标签内,注意l ...
- HTML5新标签和属性
1.<time>标签(支持IE9以上和其他浏览器) 今年是<time datetime="2015-12-12">2015年</time> &l ...
- 案例-html5新标签-input和video
<form action=""> <fieldset> <!--fieldset标签:可将表单内的元素分组 ,常与legend搭配使用--> & ...
- HTML5 新的 Input 类型
Input 类型: color(拾色器) color 类型用在input字段主要用于选取颜色,如下所示: 支持浏览器 实例 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type= ...
- HTML5新的标签和属性
<article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
- 检测浏览器对HTML5新input类型的支持
HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...
随机推荐
- 牛客多校第二场A run(基础DP)
链接:https://www.nowcoder.com/acm/contest/140/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言2621 ...
- 作业20171123 beta-review 成绩
申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年12月13日 17:00. 成绩 review NABCD-评论 SPEC-评论 bug found 答复 bugfi ...
- 读书笔记(chapter4)
进程调度 4.1多任务 1.多任务系统可以划分为:非抢占式多任务和抢占式多任务: (在此模式下,由调度程序来决定什么时候停止一个进程的运行,以便其他进程能够得到执行机会,这个动作叫抢占: 时间片实际上 ...
- github链接
github链接:https://github.com/bjing123 test1:https://github.com/bjing123/test-/blob/master/test1.t ...
- 软件工程第二次程序的作业:Java计算器实验
1.计算器实验报告 2.https://github.com/lollipopangel/test/tree/master 3.实验截图 7+8 清除 六.总结 通过本次实验让我对JFrame类.JP ...
- 第三个Sprint冲刺第3天
成员:罗凯旋.罗林杰.吴伟锋.黎文衷 组内各成员加紧完成自己的工作.
- Failed while installing JAX-RS (REST Web Services) 1.1. org.osgi.service.prefs.BackingStoreException: Resource '/.settings' does not exist.
https://issues.jboss.org/browse/JBIDE-10039?_sscc=t https://stackoverflow.com/questions/16836832/fai ...
- MyBatis自动生成Java/C#的Bean(Entity)的等价MYSQL实现函数
这是单元测试代码:TESTTITLECASE.sql SELECT TITLECASE('ABC_DEF_hgk') as BEANNAME FROM DUAL; SELECT TITLECASE(' ...
- 安装wamp提示You dont't have permission to accesson on this server的解决方案
展示一下安装好的效果图 首先找到安装目录下的路径[wamp\bin\apache\Apache2.2.21\conf\] § 找到httpd.conf,用记事本打开httpd.conf,然后将 1. ...
- Ping命令的另一种使用方法
今天实习结束休息的时候无聊,于是便想看看机房有多少机器,IP是什么,有没有什么小漏洞. 依次使用了netstat.ping.Telnet以后,不小心输入了这样一个东西 当时按下回车以后,心里想的是这样 ...