HTML5的学习（二）

接着上一篇的写哈

HTML5新的Input类型

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

现在介绍的输入类型有以下几种：

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

看张截图

Email

Email类型用于应该包含email地址的输入域，在提交表单时，会自动验证email域的值。

E-mail: <input type="email" name="user_email" />

是不是很简单，就跟HTML的普通标签是一样的。

URL

Url的用法好Email的一样，用于包含Url地址的输入域，在提交表单时，会自动验证url域的值。

Number

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

您还能够设定对所接受的数字的限定：

Points: <input type="number" name="points" min="1" max="10" />

这个应该不用解释了吧

Number的属性如下

Range

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

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定：

<input type="range" name="points" min="1" max="10" />

Range的属性和number的是一样的，相互借鉴以下就OK了

Date Pickers（数据检出器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

下面的例子允许您从日历中选取一个日期：

Date: <input type="date" name="user_date" />

 

MyGod！我现在才发现文笔不好的时候，文字显得是那么的苍白，我实在是描绘不出H5的效果，实在是太炫了，还是亲自试一下就知道了，在这里我表示很无力……

 

search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

HTML5新的表单元素

HTML5 拥有若干涉及表单的元素和属性。

datalist

keygen

output

datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

其最终效果就像是百度中的搜索下拉框一样，想象以下。

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<form action="demo_form.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

以上关于keygen的用法我是全盘复制，因为我看不懂他是什么意思，想着可能也不会用了。

output 元素

output 元素用于不同类型的输出，比如计算或脚本输出：

<output id="result" onforminput="resCalc()"></output>

其效果就像是动态计算器，你直接输入数字，结果立马就会发生变化，神吧

 

还有一些H5的新的表单属性，实在是太多了，我写不下去了，呵呵，等用到的时候，再搜，我觉得这是一个不错的学习方法，可以加深印象。

 

看完这些，并不能说明什么，要写出点什么才是真东西，现在就从最小的例子开始做起吧！

 

开发工具 Adobe Dreamweaver   http://www.html5china.com/help/dw5.html