代码改变世界

HTML5表单

2012-06-28 09:35  江苏黑马  阅读(2080)  评论(0)    收藏  举报

HTML5输入类型：search、url、email、tel、number、range、color、Date pickers (datetime,date, month, week, time,datetime-local)。由于当前浏览器支持效果不好，以下测试是在多个浏览器中的结果

  1. search
  2. email
  3. url
  4. number
  5. range

  6. date
  7. tel
  8. color

    代码：
     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>HTML5输入类型</title>
 6 <style>
 7 label {
 8     display:block;
 9     margin:200px
10 }
11 input {
12     width:225px;
13     height:23px;
14     border:1px solid #ccc
15 }
16 </style>
17 </head>
18 <body>
19 <form>
20   <label>search 类型用于搜索域，比如站点搜索或 Google 搜索。
21     <input id="ipt_search" type="search" name="ipt_search" />
22   </label>
23   <label>email 类型用于应该包含 e-mail 地址的输入域。
24     <input id="ipt_email" type="email" name="ipt_email" />
25   </label>
26   <label>url 类型用于应该包含 URL 地址的输入域。
27     <input id="ipt_url" type="url" name="url" />
28   </label>
29   <label>number 类型用于应该包含数值的输入域。
30     <input id="ipt_number" type="number" name="ipt_number" min="1" max="10" />
31   </label>
32   <label>range 类型用于应该包含一定范围内数字值的输入域。
33     <input id="ipt_range" type="range" name="ipt_range" min="1" max="10" />
34   </label>
35   <label>date - 选取日、月、年
36     <input id="ipt_date" type="date" name="ipt_date" />
37   </label>
38   <label>tel 类型用于应该包含电话号码的输入域。
39     <input id="ipt_tel" type="tel" name="ipt_tel" />
40   </label>
41   <label>color 类型用于颜色选取
42     <input id="ipt_color" type="color" name="ipt_color" />
43   </label>
44   <input id="sub_form" type="submit" name="sub_form" value="提交" />
45 </form>
46 </body>
47 </html>

     

HTML5表单元素：datalist、keygen、output。

  1. datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。
    1 Webpage: <input type="url" list="url_list" name="link" />
2 <datalist id="url_list">
3 <option label="jsdarkhorse" value="http://www.jsdarkhorse.cn" />
4 <option label="Google" value="http://www.google.com" />
5 <option label="Microsoft" value="http://www.microsoft.com" />
6 </datalist>

  2. keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
    1 <form action="demo_form.asp" method="get">
2 Username: <input type="text" name="usr_name" />
3 Encryption: <keygen name="security" />
4 <input type="submit" />
5 </form>
  3. output 元素用于不同类型的输出，比如计算或脚本输出：
     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>output 元素</title>
 6 <script type="text/javascript">
 7 function resCalc(){
 8     numA=document.getElementById("num_a").value;
 9     numB=document.getElementById("num_b").value;
10     document.getElementById("result").value=Number(numA)+Number(numB);
11 }
12 </script>
13 </head>
14 
15 <body>
16 <p>使用 output 元素的简易计算器：</p>
17 <form onsubmit="return false">
18   <input id="num_a" />
19   +
20   <input id="num_b" />
21   =
22   <output id="result" onforminput="resCalc()"></output>
23 </form>
24 </body>
25 </html>

HTML5表单属性：form属性（autocomplete、novalidate）、input属性（autocomplete、autofocus、form、form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、height 和 width、list、min，max 和 step、multiple、pattern (regexp)、placeholder、required）。

  1. autocomplete属性规定 form 或 input 域应该拥有自动完成功能。
     1 <form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
 2   First name:
 3   <input type="text" name="fname" />
 4   <br />
 5   Last name:
 6   <input type="text" name="lname" />
 7   <br />
 8   E-mail:
 9   <input type="email" name="email"/>
10   <br />
11   <input type="submit" />
12 </form>

     

  2. autofocus 属性规定在页面加载时，域自动地获得焦点。
    1 User name: <input type="text" name="user_name" autofocus="autofocus" />

  3. form 属性规定输入域所属的一个或多个表单。form 属性必须引用所属表单的 id。
    1 <form action="/example/html5/demo_form.asp" method="get" id="user_form">
2 First name:<input type="text" name="fname" />
3 <input type="submit" />
4 </form>
5 
6 <p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
7 
8 Last name: <input type="text" name="lname" form="user_form" />
  4. 表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。表单重写属性适用于以下类型的 <input> 标签：submit 和 image。
    1 <form action="/example/html5/demo_form.asp" method="get" id="user_form">
2 E-mail: <input type="email" name="userid" /><br />
3 <input type="submit" value="Submit" /><br />
4 <input type="submit" formaction="/example/html5/demo_admin.asp" value="Submit as admin" /><br />
5 <input type="submit" formnovalidate="true" value="Submit without validation" /><br />
6 </form>
  5. height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
    1 <form action="/example/html5/demo_form.asp" method="get">
2 User name: <input type="text" name="user_name" /><br />
3 <input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
4 </form>

     

  6. list 属性规定输入域的 datalist。datalist 是输入域的选项列表。前面有所介绍，这里不讲解了。
  7. step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
    1 <form action="/example/html5/demo_form.asp" method="get">
2 Points: <input type="number" name="points" min="0" max="10" step="3"/>
3 <input type="submit" />
4 </form>

     

  8. multiple 属性规定输入域中可选择多个值。multiple 属性适用于以下类型的 <input> 标签：email 和 file。
    1 <form action="/example/html5/demo_form.asp" method="get">
2 Select images: <input type="file" name="img" multiple="multiple" />
3 <input type="submit" />
4 </form>

     


  9. novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
    1 <form action="/example/html5/demo_form.asp" method="get" novalidate="novalidate">
2 E-mail: <input type="email" name="user_email" />
3 <input type="submit" />
4 </form>

     

  10. pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。
    1 <form action="/example/html5/demo_form.asp" method="get">
2 Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
3 title="Three letter country code" />
4 <input type="submit" />
5 </form>

  11. placeholder 属性提供一种提示（hint），描述输入域所期待的值。
    1 <form action="/example/html5/demo_form.asp" method="get">
2   <input type="search" name="user_search" placeholder="jsdarkhorse" />
3   <input type="submit" />
4 </form>

  12. required 属性规定必须在提交之前填写输入域（不能为空）。
    1 <form action="/example/html5/demo_form.asp" method="get">
2 Name: <input type="text" name="usr_name" required="required" />
3 <input type="submit" />
4 </form>

附上两款浏览器HTML5兼容性检测工具：

  1. HTML5Test
    提供当前使用的浏览器对HTML5支持情况统计。
    我当前使用的firefox对form部分支持情况如下：
  2. Modernizr

参考文献：http://www.w3schools.com/html5/