html5 表單元素

時間 2019-12-05

標籤 html5 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指定提交的路徑,
      -->
      
      <!-- 取消表單驗證: 一、 添加 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>

1. HTML5 表單元素
2. 前端基礎-HTML5（表單元素）
3. HTML5 表單新增元素與屬性
4. [前端]html5表單元素整理
5. HTML5新增屬性和表單元素
6. HTML5表單元素的新增屬性
7. h5-表單元素
8. HTML表單元素
9. 表單元素
10. 表單及表單新增元素
更多相關文章...
• jQuery Mobile 表單輸入元素 - jQuery Mobile 教程
• jQuery Mobile 表單 - jQuery Mobile 教程
• TiDB 在摩拜單車在線數據業務的應用和實踐
• C# 中 foreach 遍歷的用法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。