086_html5Input类型

1. html5新的Input类型

1.1. html5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

1.2. 本章全面介绍这些新的输入类型:

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

2. 浏览器支持

3. Input类型 - email

3.1. email类型用于应该包含e-mail地址的输入域。

3.2. 在提交表单时, 会自动验证email域的值。

3.3. iPhone中的Safari浏览器支持email输入类型, 并通过改变触摸屏键盘来配合它(添加@和.com 选项)。

3.4. 例子

3.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Input类型 - email</title></head><body><form action="input_type_email.html" method="get">E-mail: <input type="email" name="user_email" /><br /><input type="submit" /></form></body>
</html>

3.4.2. 效果图

4. Input类型 - url

4.1. url类型用于应该包含URL地址的输入域。

4.2. 在提交表单时, 会自动验证url域的值。

4.3. iPhone中的Safari浏览器支持url输入类型, 并通过改变触摸屏键盘来配合它(添加.com选项)。

4.4. 例子

4.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Input类型 - url</title></head><body><form action="input_type_url.html" method="get">Homepage: <input type="url" name="user_url" /><input type="submit" /></form></body>
</html>

4.4.2. 效果图

5. Input 类型 - number

5.1. number类型用于应该包含数值的输入域。

5.2. 您还能够设定对所接受的数字的限定。

5.3. iPhone中的Safari浏览器支持number输入类型, 并通过改变触摸屏键盘来配合它(显示数字)。

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Input类型 - number</title></head><body><form action="input_type_number.html" method="get">Points: <input type="number" name="points" min="1" max="10" /><input type="submit" /></form></body>
</html>

5.4.2. 效果图

5.5. 请使用下面的属性来规定对数字类型的限定:

6. Input类型 - range

6.1. range类型用于应该包含一定范围内数字值的输入域。

6.2. range类型显示为滑动条。

6.3. 您还能够设定对所接受的数字的限定。

6.4. 例子

6.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Input类型 - range</title></head><body><form action="input_type_range.html" method="get">Points: <input type="range" name="points" min="1" max="10" /><input type="submit" /></form></body>
</html>

6.4.2. 效果图

6.5. 请使用下面的属性来规定对数字类型的限定:

7. Input类型 - Date Pickers(日期选择器)

7.1. html5拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)

7.2. 例子

7.2.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Input类型 - Date Pickers(日期选择器)</title></head><body><form action="input_type_date.html" method="get">Date: <input type="date" name="user_date" /><br />Month: <input type="month" name="user_month" /><br />Week: <input type="week" name="user_week" /><br />Time: <input type="time" name="user_time" /><br />datetime: <input type="datetime" name="user_datetime" /><br />datetime-local: <input type="datetime-local" name="user_datetime-local" /><br /><input type="submit" /></form></body>
</html>

7.2.2. 效果图

086_html5Input类型相关推荐

《疯狂Java讲义》（第5版）作者李刚（待重新排版）
第1章 Java语言概述与开发环境 1.1 Java语言的发展简史 JDK1.0 : Sun在1996年年初发布了JDK 1.0,该版本包括两部分:运行环境(即JRE)和开发环境(即JDK).运行环境 ...
Oracle根据日期区间查询Date类型的数据
在Oracle数据库中,根据日期区间查询Date类型的数据 select proposalno,policyno,enddate from 表名 where 时间字段 between to_date( ...
Oracle type （自定义类型的使用）
oracle - type type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要 ...
c语言long int表示范围_C语言编程第9讲——这些C语言整数类型的知识点你掌握了吗...
1.char其实是一种整数类型在C语言中,字符使用整数来表示. 例如下面的代码: #include int main(){ char letter = '2'; printf("Lette ...
Redis 笔记（07）— sorted set 类型（添加、删除有序集合元素、获取分数范围内成员、按score排序、返回集合元素个数）
zset 可能是 Redis 提供的最为特色的数据结构,一方面它是一个 set,保证了内部 value 的唯一性,另一方面它可以给每个 value 赋予一个 score,代表这个 value 的排序权 ...
非本地类型不能定义方法 cannot define new methods on non-local type time.Duration
能够随意地为各种类型起名字,是否意味着可以在自己包里为这些类型任意添加方法 ? 参见下面的代码演示 : package mainimport "time"type MyDurati ...
Go 知识点（13） — 如何判断变量类型
在 Go 语言中可以使用类型断言来判断变量的类型,类型断言的使用有两种方式: 返回两个值,分别是断言为设置类型后的值和断言成功的标志符: 返回一个值,表示断言为设置类型的值: 1. 返回单个值的使用 ...
Go 知识点（05）— 类型别名与类型定义
1. 类型别名类型别名需要在别名和原类型之间加上赋值符号 = ,使用类型别名定义的类型与原类型等价,Go 语言内建的基本类型中就存在两个别名类型. byte 是 uint8 的别名类型: rune ...
Redis 笔记（06）— set 类型（向集合添加元素、获取集合元素个数、判断集合中是否包含某个元素、删除给定元素、返回集合中所有元素、计算集合的交集、并集、差集）
Redis 的 set 集合内部的键值对是无序的唯一的.它的内部实现相当于一个特殊的字典,字典中所有的 value 都是一个值 NULL .当集合中最后一个元素移除之后,数据结构自动删除,内存被回收. ...

086_html5Input类型

086_html5Input类型相关推荐

最新文章

热门文章