html5 表单元素示例

2015/07/29 39649
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5中的表单</title>
 
<script type="text/javascript">
 
  var flag = true;
   function checkMail(){
       var url = document.getElementById("url");
       if (url.value==""){
           //表单提交时 自定义验证信息 
            
           url.setCustomValidity("请输入url地址");
            
          // alert("url地址不能不空");
           flag=false;
       }
       //显式调用 checkValidity()方法 ，验证通过返回true
       else if (!url.checkValidity()){
           alert("请输入合法的url地址");
           flag= false;
       }
       else {
           alert("恭喜您输入的url地址合法");
       }
       return flag;
   }
  
</script>
</head>
<body>
    
   <!--
   novalidate="novalidate" 忽略表单的验证
     -->
  <form id="sub" method="post"    >
      <!-- placeholder属性设置文本域未输入信息的提示信息 -->
      <!-- autofocus自动获取焦点  -->
      <!-- tabindex当设置值时1,2，3...
      按tab键切换时会按照指定的值，依次切换 ..
       -->
    用户名: <input name="username" placeholder="请输入用户名" autofocus="autofocus" formmethod="get" tabindex="1">
      
     <!-- list属性引用指定的datalist的id -->
     <!-- formmethod指定该元素表单提交的方式post或者get -->
     <!-- autocompleter:自动补全内容 -->
      
   爱好: <input name="fav" autocomplete="off" list="data"  tabindex="3" formmethod="post" >
      
      
     颜色选取:<input name="color" type="color">
      
     <!-- 显示验证url,
     应在表单提交时验证，此处方便测试就添加失去焦点事件 
     -->
   url:  <input type="url" id="url" name="url" onblur="checkMail();">
    
     mail:<input name="email" type="email" required>
      
       <!-- date类型，火狐,ie9 中测试不支持，
       chrome 支持....,
       datetime类型:这三款浏览器都不支持，
       datetime-local:只有chrome支持,
       time:时间输入框,chrome支持,
       week:某一年的第几周,chrome支持,
       month:某一年的第几月,chrome支持,
        -->
     出生日期:<input name="date" type="month">
      
     <!-- number: min,max :最小值和最大值；step表示变化的幅度-->
     薪资:<input type="number" min="0" max="100" step="10">
         
      <!-- 
      添加pattern属性利用正则表达式限制属性的内容
       -->
     年龄:<input type="text" required="required" pattern="^[0-9]{0,3}$"/>
         
     <!-- html5中的type="submit",不指定value属性时默认显示提交查询
     formaction指定提交的路径,
      -->
       
      <!-- 取消表单验证: 1、 添加 formnovalidate="formnovalidate"
                    2. form元素中添加 novalidate="novalidate"
       
       -->
       
     <input type="submit"  formaction="sub.jsp" >
  </form>
    
   <!-- 
   form属性定义该元素指向的表单的id,
   required :表示该字段必填
    -->
  密码: <input  name="pwd" type="password" tabindex="2" required="required" form="sub">
   <!-- datalist是html5新增标签，类似于select -->
  <datalist id="data">
    <option value="java">java</option>
     <option value="c">C</option>
   <option value="c++">C++</option>
    <option value="python">python</option>
  </datalist>
 
</body>
</html>
代码片段
