04. Web大前端时代之:HTML5+CSS3入门系列~Input新增类型

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

1.tel:输入类型用于应该包含电话号码的输入字段

2.url:用于应该包含 URL 地址的输入字段 - 提交表单时对 url 字段的值自动进行验证

<form action="/test.html" method="post">

url:<input type="url" name="user_url" /><input type="submit" />

</form>

注意要带ftp:// http:// https:// 等等的前缀头才可以

3.email:用于 e-mail 地址的文本字段

<form action="/test.html" method="post">

email:<input type="email" name="user_email" /><input type="submit" />

</form>

4.number: 输入类型用于包含数字值的输入字段 - 可以设置可接受数字的限制

<form action="/test.html" method="post">

number:<input type="number" name="user_number" min="1" max="10" /><input type="submit" />

</form>

5.search: 用于搜索字段,比如站内搜索或谷歌搜索等 - 搜索字段的外观与常规的文本字段无异

<input type="search" />

6.color 定义拾色器。

7.range: 输入类型用于应该包含指定范围值的输入字段 - range 类型显示为滑块

8.日期检出器类型

HTML5拥有多个可供选则日期和时间的新型文本输入框

date: 定义日期字段

接受结果

month: 定义日期字段的月

接受结果

week: 定义日期字段的周

接受结果

time:定义日期字段的时、分、秒

接受结果

datetime:定义日期字段

datetime-local: 定义日期字段

接受结果

大纲图:

附录:

火狐表现:

IE表现:

谷歌表现:

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-01-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏信安之路

2017-NSCTF-PWN

这次比赛值得吐槽的地方很多,但是我要忍住,先讲正经的。 这次总结比赛的两道pwn,都是栈溢出类型的,比较简单。先放上题目链接:http://pan.baidu....

810
来自专栏玄魂工作室

Python爬虫之urllib模块2

--------------------------------------------------------------------------------...

2905
来自专栏大数据文摘

将Python和R整合进一个数据分析流程

3008
来自专栏丑胖侠

《Drools 7 规则引擎教程》番外篇-规则条件匹配机制

问题场景 QQ技术群(593177274)中有同学遇到这一个问题场景:在多条规则(比如3条)的when中使用了一个相同的静态方法,并在静态方法中打印相关的日志信...

2508
来自专栏程序员互动联盟

抓包工具Wireshark过滤规则实践第一篇

引子 现在从网上看到的一些wireshark过滤规则的介绍,都是比较老一点的,新版本的语法好像有所变化,所以在这里写一篇基于最新的1.12版本的wireshar...

4349
来自专栏编程

Python教程2

前言 有关标准对象和模块的说明,请参阅Python标准库(https://docs.python.org/3/library/index.html#librar...

2189
来自专栏程序员叨叨叨

听说你们家的NotifyDataSetChanged不起作用了

前几天,公司项目准备上线,就在前一晚,出现了一个BUG:主页界面刷新无效。千钧一发之际,用了一个笨方法,每次刷新的时候重新setAdapter一下算是实现了基本...

892
来自专栏玄魂工作室

如何学python-第四课 基本的用户输入

译者注:原作者留的练习任务都比较灵活,并不是具体的要求。而根据我自身的经验,很多同学看到这种需要探索精神的要求,可能就不愿意自己去进一步探索了(或者不知道具体要...

3048
来自专栏张善友的专栏

我为何需要使用空接口?

FxCop设计规则中的第三条提供了对空接口的检查.下面是它的描述: 一个接口提供了一组行为和使用契约(usage contract),任何一个类型都可以实现这个...

1945
来自专栏技术记录

谈谈序列化—实体bean一定要实现Serializable接口?

导读:最近在做项目的过程中,发现一个问题,就是我们最开始的时候,传递参数包括返回类型,都有map类型。但是由于map每次都要匹配key值,很麻烦。所以在之后就将...

3888

扫码关注云+社区

领取腾讯云代金券