HTML5深入浅出教学篇之七

介绍

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站设计,高端网页制作,对格栅板等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业成都网站营销优化,H5建站,响应式网站。

HTML 5: 表单元素

表单元素 - form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output

表单验证

示例

1、form - 表单element/form/form.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     form 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.          
    10.   
  
  
  10.          
    11.   
  
  
  11.      
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.

2、label - 关联其它元素element/form/label.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     label 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.      
    11.   
  
  
  11.     checkbox title 
    12.   
  
  
  12.      
    13.   
  
  
  13.         var lbl = document.getElementById("lbl");  
    14.   
  
  
  14.         alert(document.getElementById("lbl").htmlFor);  
    15.   
  
  
  15.         alert(document.getElementById("lbl").control.outerHTML);  
    16.   
  
  
  16.      
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.

3、button - 按钮元素element/form/button.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     button 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.        
    8.   
  
  
  8.     button 
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.

4、select - 下拉列表框元素, option - 选项, optgroup - 选项组element/form/select_option_optgroup.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     select option optgroup 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.         aaa 
    11.   
  
  
  11.         bbb  
    12.   
  
  
  12.         ccc 
    13.   
  
  
  13.         ddd 
    14.   
  
  
  14.         eee  
    15.   
  
  
  15.      
    16.   
  
  
  16.      
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.

#p#

5、datalist - 数据列表元素, option - 数据项element/form/datalist_option.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     datalist option 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.          
    11.   
  
  
  11.          
    12.   
  
  
  12.          
    13.   
  
  
  13.      
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.

6、textarea - 文本区域元素element/form/textarea.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     textarea 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9. aaabbbccc  
    10.   
  
  
  10.      
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.

7、fieldset - 用于定义一个区域, legend - 用于定义一个区域的标题，它是 fieldset 的第一个子元素 element/form/fieldset_legend.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     fieldset legend 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.          
    10.   
  
  
  10.             
    11.   
  
  
  11.                  title  
    12.   
  
  
  12.              
    13.   
  
  
  13.          
    14.   
  
  
  14.         
     
    15.   
  
  
  15.             p1  
    16.   
  
  
  16.         
     
    17.   
  
  
  17.         
     
    18.   
  
  
  18.             p2  
    19.   
  
  
  19.         
     
    20.   
  
  
  20.         
     
    21.   
  
  
  21.             p3  
    22.   
  
  
  22.         
     
    23.   
  
  
  23.      
    24.   
  
  
  24.  
    25.   
  
  
  25.  
    26.

8、progress - 进度元素 element/form/progress.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     progress 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.         var progressBar = document.getElementById('progress');  
    11.   
  
  
  11.         progressBar.value = 10;  
    12.   
  
  
  12.      
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.

#p#

9、meter - 用来表示一个范围已知且可度量的值 element/form/meter.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     meter 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.           
    8.   
  
  
  8.     血糖含量： 
    9.   
  
  
  9.      
    10.   
  
  
  10.  
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.

10、keygen - 呈现出一个键值对生成器，提交表单后，公钥发往服务端，私钥保存在客户端element/form/keygen.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     keygen 
    5.   
  
  
  5.  
    6.   
  
  
  6.       
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.

11、output - 用于呈现计算结果element/form/output.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     output 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.           
    8.   
  
  
  8.      
    9.   
  
  
  9.      
    10.   
  
  
  10.         document.getElementById("output").value = 10 * 10;  
    11.   
  
  
  11.      
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.

12、表单验证element/form/_validate.html

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     表单验证 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.          
    10.   
  
  
  10.          
    11.   
  
  
  11.          
    12.   
  
  
  12.          
    13.   
  
  
  13.          
    14.   
  
  
  14.      
    15.   
  
  
  15.      
    16.   
  
  
  16.         function validateEmail() {  
    17.   
  
  
  17.             var email = document.getElementById("email");  
    18.   
  
  
  18.             var validityState = email.validity;  
    19.   
  
  
  19.             alert  
    20.   
  
  
  20.             (  
    21.   
  
  
  21.                 validityState.valid + "\n" +  
    22.   
  
  
  22.                 validityState.valueMissing + "\n" +  
    23.   
  
  
  23.                 validityState.typeMismatch + "\n" +  
    24.   
  
  
  24.                 validityState.patternMismatch + "\n" +  
    25.   
  
  
  25.                 validityState.tooLong + "\n" +  
    26.   
  
  
  26.                 validityState.rangeUnderflow + "\n" +  
    27.   
  
  
  27.                 validityState.rangeOverflow + "\n" +  
    28.   
  
  
  28.                 validityState.stepMismatch + "\n" +  
    29.   
  
  
  29.                 validityState.customError  
    30.   
  
  
  30.             );  
    31.   
  
  
  31.         }  
    32.   
  
  
  32.      
    33.   
  
  
  33.  
    34.   
  
  
  34.  
    35.

[源码下载]

原文链接：http://www.cnblogs.com/webabcd/archive/2012/02/08/2342275.html

当前题目：HTML5深入浅出教学篇之七
标题链接：http://www.hantingmc.com/qtweb/news37/544137.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

标签优化知识

分类信息网

成都做商城网站　　 　成都关键词SEO优化　　 　乐山服务器托管　　 　php主机　　 　成都企业网站建设　　 　成都主机托管　　 　郫县封阳台　　 　宣传册设计　　 　成都手机网站开发　　 　中晴建设　　 　成都搅拌罐车　　 　成都网站设计制作公司　　 　成都圣月服饰　　 　温江网站建设　　 　兴久牧业　　 　化妆品企业网站建设方案　　 　定制网站设计　　 　达州网站制作　　 　小程序开发　　 　边坡防护网