介绍

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

HTML 5: 表单元素

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

表单验证

示例

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

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     checkbox title 
  
  
  
     
  
  
  
     
  
  
  
    checkbox title 
  
  
  
     
  
  
  
        var lbl = document.getElementById("lbl");  
  
  
  
        alert(document.getElementById("lbl").htmlFor);  
  
  
  
        alert(document.getElementById("lbl").control.outerHTML);  
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
       
  
  
  
    button 
  
  
  
 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
       
  
  
         
  
  
  
         
  
  
  
         
  
  
  
         
  
  
  
         
  
  
  
     
  
  
  
     
  
  
  
        aaa 
  
  
  
        bbb  
  
  
  
        ccc 
  
  
  
        ddd 
  
  
  
        eee  
  
  
  
     
  
  
  
       
  
  
         
  
  
  
            aaa 
  
  
  
            bbb  
  
  
  
         
  
  
  
         
  
  
  
            ccc 
  
  
  
            ddd  
  
  
  
         
  
  
  
         
  
  
  
            eee 
  
  
  
            fff  
  
  
  
         
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

#p#

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

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
aaabbbccc  
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
        
 
  
  
  
             
  
  
  
                 title  
  
  
  
             
  
  
  
         
  
  
  
        
 
  
  
  
            p1  
  
  
  
        
 
  
  
  
        
 
  
  
  
            p2  
  
  
  
        
 
  
  
  
        
 
  
  
  
            p3  
  
  
  
        
 
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        var progressBar = document.getElementById('progress');  
  
  
  
        progressBar.value = 10;  
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

#p#

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
          
  
  
  
    血糖含量： 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
 
 
 
 

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

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
          
  
  
  
     
  
  
  
     
  
  
  
        document.getElementById("output").value = 10 * 10;  
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
         
  
  
  
         
  
  
  
         
  
  
  
         
  
  
  
         
  
  
  
     
  
  
  
     
  
  
  
        function validateEmail() {  
  
  
  
            var email = document.getElementById("email");  
  
  
  
            var validityState = email.validity;  
  
  
  
            alert  
  
  
  
            (  
  
  
  
                validityState.valid + "\n" +  
  
  
  
                validityState.valueMissing + "\n" +  
  
  
  
                validityState.typeMismatch + "\n" +  
  
  
  
                validityState.patternMismatch + "\n" +  
  
  
  
                validityState.tooLong + "\n" +  
  
  
  
                validityState.rangeUnderflow + "\n" +  
  
  
  
                validityState.rangeOverflow + "\n" +  
  
  
  
                validityState.stepMismatch + "\n" +  
  
  
  
                validityState.customError  
  
  
  
            );  
  
  
  
        }  
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

[源码下载]

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

名称栏目：HTML5深入浅出教学篇之七
当前路径：http://chengdu.cdxwcx.cn/article/djppscs.html