[关闭]
@mdjsjdq 2015-10-25T14:19:10.000000Z 字数 7915 阅读 1783

HTML5 教程_04

HTML5 编程

HTML 5 is so useful!

01

HTML5 表单

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：

E-mail:

  1. <input type="email" name="user_email" />

url

  1. <input type="url" name="user_url" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Homepage: <input type="url" name="user_url" /><br />
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>

number

number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

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

实例
01

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. <input type="number" name="points" min="0" max="10" step="3" value="6" />
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>

range

Range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定：

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

02

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Points: <input type="range" name="points" min="1" max="10" />
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>

Date Pickers（日期选择器）

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

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

  1. <input type="date" name="user_date" />

Search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

表单元素

HTML5 拥有若干涉及表单的元素和属性。本章介绍以下新的表单元素：

datalis元素

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Webpage: <input type="url" list="url_list" name="link" />
  7. <datalist id="url_list">
  8.     <option label="W3School" value="http://www.w3school.com.cn" />
  9.     <option label="Google" value="http://www.google.com" />
  10.     <option label="Microsoft" value="http://www.microsoft.com" />
  11. </datalist>
  12. <input type="submit" />
  13. </form>
  15. </body>
  16. </html>

option 元素永远都要设置 value 属性。

keygen 元素

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

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Username: <input type="text" name="usr_name" />
  7. Encryption: <keygen name="security" />
  8. <input type="submit" />
  9. </form>
  11. </body>
  12. </html>

output 元素

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

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

实例 使用 output 元素的简易计算器：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function resCalc()
  6. {
  7. numA=document.getElementById("num_a").value;
  8. numB=document.getElementById("num_b").value;
  9. document.getElementById("result").value=Number(numA)+Number(numB);
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <p>使用 output 元素的简易计算器：</p>
  15. <form onsubmit="return false">
  16.  <input id="num_a" /> +
  17.  <input id="num_b" /> =
  18.  <output id="result" onforminput="resCalc()"></output>
  19. </form>
  21. </body>
  22. </html>

HTML5 的新的表单属性

本章讲解涉及 <form> 和 <input>元素的新属性。

新的 form 属性：

新的 input 属性：

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

autocomplete 适用于 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
  6. First name:<input type="text" name="fname" /><br />
  7. Last name: <input type="text" name="lname" /><br />
  8. E-mail: <input type="email" name="email" autocomplete="off" /><br />
  9. <input type="submit" />
  10. </form>
  12. <p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
  13. <p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>
  15. </body>
  16. </html>

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

autofocus 属性适用于所有 <input>标签的类型。

  1. <input type="text" name="user_name"  autofocus="autofocus" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. User name: <input type="text" name="user_name" autofocus="autofocus" />
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>

form 属性

form 属性规定输入域所属的一个或多个表单。

form 属性必须引用所属表单的 id：

  1. <form action="demo_form.asp" method="get" id="user_form">
  2. First name:<input type="text" name="fname" />
  3. <input type="submit" />
  4. </form>
  5. Last name: <input type="text" name="lname" form="user_form" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get" id="user_form">
  6. First name:<input type="text" name="fname" />
  7. <input type="submit" />
  8. </form>
  10. <p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
  12. Last name: <input type="text" name="lname" form="user_form" />
  14. </body>
  15. </html>

表单重写属性

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。表单重写属性有：

formtarget - 重写表单的 target 属性

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get" id="user_form">
  6. E-mail: <input type="email" name="userid" /><br />
  7. <input type="submit" value="Submit" /><br />
  8. <input type="submit" formaction="/example/html5/demo_admin.asp" value="Submit as admin" /><br />
  9. <input type="submit" formnovalidate="true" value="Submit without validation" /><br />
  10. </form>
  12. </body>
  13. </html>

height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

height 和 width 属性只适用于 image 类型的 <input> 标签。

  1. <input type="image" src="img_submit.gif" width="99" height="99" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. User name: <input type="text" name="user_name" /><br />
  7. <input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
  8. </form>
  10. </body>
  11. </html>

list 属性

ist 属性规定输入域的 datalist。datalist 是输入域的选项列表。

list 属性适用于以下类型的 <input>标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Webpage: <input type="url" list="url_list" name="link" />
  7. <datalist id="url_list">
  8.     <option label="W3School" value="http://www.w3school.com.cn" />
  9.     <option label="Google" value="http://www.google.com" />
  10.     <option label="Microsoft" value="http://www.microsoft.com" />
  11. </datalist>
  12. <input type="submit" />
  13. </form>
  15. </body>
  16. </html>

min、max 和 step 属性

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Points: <input type="number" name="points" min="0" max="10" step="3"/>
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>

multiple 属性

multiple 属性规定输入域中可选择多个值。

  1. Select images: <input type="file" name="img" multiple="multiple" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Select images: <input type="file" name="img" multiple="multiple" />
  7. <input type="submit" />
  8. </form>
  10. <p>当您浏览文件时，请试着选择多个文件。</p>
  12. </body>
  13. </html>

03

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

novalidate 属性适用于 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

  1. <form action="demo_form.asp" method="get" novalidate="true">
  2. E-mail: <input type="email" name="user_email" />
  3. <input type="submit" />
  4. </form>

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

pattern 属性适用于以下类型的 <input>标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

  1. Country code: <input type="text" name="country_code"
  2. pattern="[A-z]{3}" title="Three letter country code" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
  7. title="Three letter country code" />
  8. <input type="submit" />
  9. </form>
  11. </body>
  12. </html>

placeholder 属性

Placeholder 属性



placeholder 属性提供一种提示（hint），描述输入域所期待的值。

placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

  1. <input type="search" name="user_search"  placeholder="Search W3School" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Name: <input type="text" name="usr_name" required="required" autofocus="autofocus" placeholder="查看最新的iPhone" />
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>

可以利用input属性来完成自动的把光标定位到输入框
04

required 属性

Required 属性 ?


required 属性规定必须在提交之前填写输入域（不能为空）。

required 属性适用于以下类型的 <input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

  1. Name: <input type="text" name="usr_name" required="required" />

实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  5. <form action="/example/html5/demo_form.asp" method="get">
  6. Name: <input type="text" name="usr_name" required="required" />
  7. <input type="submit" />
  8. </form>
  10. </body>
  11. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注