html5 表單元素示例

jopen 9年前發布 | 7K 次閱讀 HTML HTML5 

<!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></pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！