DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> html5表單及新增的改良元素詳解
html5表單及新增的改良元素詳解
編輯：HTML5教程     
XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title></title>    
  6.     </head>    
  7.     <body>    
  8.         <!--表單內元素的form屬性：為元素指定一個form屬性，屬性值為該表單的id-->  
  9.         <form id="testform">    
  10.             <input type="submit" />    
  11.         </form>    
  12.         <textarea form="testform"></textarea> <br /><hr />    
  13.         <!--表單內元素的formaction屬性：可以提交到不同頁面-->  
  14.         <form id="form1" action="test.aspx">    
  15.             <input type="submit" name="s1" value="內部提交到test2" formaction="test2.aspx" />    
  16.             <input type="submit"  />    
  17.         </form>    
  18.         <!--formmethod:可以為每個表單元素指定不同的提交方法-->  
  19.         <form id="form2" action="test.aspx">    
  20.             name:<input type="text" name="name" /><br />    
  21.             <input type="submit" value="post方式提交"  formmethod="post"/>    
  22.             <input type="submit" value="get方式提交"  formmethod="get"/>    
  23.         </form><br/><hr />    
  24.         <!--formenctype:可以指定不同的編碼方式-->  
  25.         <form action="test2.aspx" method="post">    
  26.             <input type="text" name="name" id="name" value="test" />    
  27.             文件:<input type="file" name="files" />    
  28.             <input type="submit"  value="上傳" formaction="test.aspx"  formenctype="multipart/form-data"/>    
  29.             <input type="submit" value="提交" />    
  30.         </form><br /><hr />    
  31.         <!--formtarget:提交後再何處打開頁面-->  
  32.         <form action="test.aspx">    
  33.             <input type="submit" name="s1"  value="s1本頁打開" formaction="test2.aspx"  formtarget="_self"/>提交到test2    
  34.             <input type="submit" name="s"  value="s新頁打開" formaction="test.aspx"  formtarget="_blank"/>提交到test    
  35.         </form><hr />    
  36.         <!--autofocus:自動獲得光標焦點-->  
  37.         <input type="text" autofocus /><br />    
  38.         <!--control:通過該屬性來訪問該表單元素-->  
  39.         <form >    
  40.             <label id="label">    
  41.             郵編：<input id="txtzip" maxlength="6" /><small>請輸入6位數字</small>    
  42.             </label>    
  43.             <input type="button" value="設置默認值" onclick="setValue()" />    
  44.         </form>    
  45.         <!--placeholder:未輸入狀態的輸入提示-->  
  46.         <input type="text" placeholder="請輸入內容" /><br />    
  47.         <!--list:單行文本框的list屬性，屬性值為datalist的id。    autocomplete：自動完成-->  
  48.         list屬性：<input type="text" list="mylist" autocomplete="on"/>    
  49.         <datalist id="mylist" >    
  50.             <option value="第一">第一</option>    
  51.             <option value="第二">第二</option>    
  52.             <option value="第三">三</option>    
  53.         </datalist><br />    
  54.         <!--pattern：設置正則表達式驗證-->  
  55.         <form>    
  56.         輸入一個字母與三個大寫字母：<input type="text" pattern="[0-9][A-Z]{3}"  required=""/>    
  57.         <input type="submit" />    
  58.         </form><br />    
  59.         <!--indeterminate:說明復選框處於尚未明確是否選取狀態-->  
  60.         <input type="checkbox" indeterminate id="cb" />indeterminate<br />    
  61.         <!--image的height和width設置圖片高寬-->  
  62.         設置圖片寬高:<input type="image" src="img/webp.jpg" alt="編輯" width="23" height="23" /><br />    
  63.         <!--textarea:maxlength和wrap屬性：hard換行也要指定cols，soft不換行-->  
  64.         <form action="test.aspx" method="post">    
  65.             <textarea name="name" maxlength="10" rows="5" cols="5" wrap="hard"></textarea>    
  66.             <input type="submit" value="提交" />    
  67.         </form><br />    
  68.      <!--url類型：只能提交url地址格式-->  
  69.         url:<input type="url" name="url"  required=""/><input type="submit" /><br />    
  70.         email:<input type="email" name="email" required=""/><input type="submit" /><br />    
  71.         date(谷歌浏覽器)：<input type="date" name="date"  /><br />    
  72.         time(谷歌浏覽器):<input type="time" name="time" /><br />    
  73.         datetime-local:<input type="datetime-local" name="datetime"  value="2016-05-26T22:31:30"/><br />    
  74.         <!--日期時間類型的step屬性：單擊調整時對選擇值多大限定-->  
  75.         step：<input type="date" step="3" /><br /><hr />    
  76.         number:<input type="number"  value="25" min="10" min="20" max="30" step="2"  /><br />    
  77.         range：<input type="range" value="25" min="10" max="100" step="5" /><br />    
  78.         search:<input type="search"/><br />    
  79.         tel:<input type="tel"  /><br />    
  80.         color:<input type="color" /><br />    
  81.         <hr />    
  82.         output元素的追加：    
  83.         <form id="testform">    
  84.             請選擇一個值:<input type="range" id="range" min="5" max="100" step="5" value="10" onchange="out();"/>    
  85.             <output id="out">10</output>    
  86.         </form>    
  87.     </body>    
  88. </html>    
  89. <script type="text/javascript">    
  90.     function setValue(){    
  91.         var lable=document.getElementById("label");    
  92.         var txtbox=lable.control;//通過control該屬性來訪問該表單元素    
  93.         txtbox.value="213001";    
  94.     }    
  95.     //indeterminate測試設置為true    
  96.     var cb=document.getElementById("cb");    
  97.     cb.indeterminate=true;    
  98.     //選擇的值output輸出    
  99.     function out(){    
  100.         Debug;    
  101.         var number=document.getElementById("range").value;    
  102.         document.getElementById("out").value=number;    
  103.     }    
  104. </script>  

念念不忘，必有回響。技術成就夢想！

以上這篇html5表單及新增的改良元素詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/06/5565163.html

HTML5教程
HTML5觸摸事件演化tap事件介紹
觸摸事件是移動浏覽器特有的HTML5事件，雖然click事件在pc和移動端更通用，但是在移動端會出現
處理HTML5新標簽的浏覽器兼容版問題
HTML5規范畢竟是剛剛才定義完成的規范，還有一些浏覽器並不能支持其中的新標簽和新屬性，尤其是IE8
Html5離線應用程序
最近，整理了一下關於 H5離線應用緩存的知識，今天在家休息，和大家分享一下，希望對大的學習和工作，能

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
HTML5在a標簽內放置塊級元素示例代碼 檢測浏覽器對HTML5和CSS3支持度的方法 IE9對HTML5中部分屬性不支持的原因分析 HTML 5標簽、屬性、事件及兼容性速查表 詳解Cookie、LocalStorage、SessionStorage 關於HTML5的安全問題開發人員需要牢記的 有關HTML5 Video對象的ontimeupdate事件(Chrome上無效)的問題 HTMl5的存儲方式sessionStorage和localStorage詳解 第2 章 基本格式 html5 學習
熱門推薦
HTML 5.1來了 9月份正式發布 更新內容預覽 將HTML5 Canvas的內容保存為圖片借助toDataURL實現 Html5離線應用程序 實例：html5.js 讓HTML5+CSS3制作的網站兼容ie6,7,8浏覽 HTML5 canvas畫帶箭頭的虛線 HTML5多媒體組件的使用——第一部分：視頻 html5中的一些標簽學習(心得) 22個HTML5的初級技巧 HTML5 embed 標簽使用方法介紹
大家都在看
JS獲取及設置TextArea或input文本框選擇文本位置的方法 JSON取值前判斷 JavaScript 七大技巧（一） JavaScript高級程序設計 學習筆記 js高級技巧 javascript檢查浏覽器是否已經啟用XX功能 js實現點擊文本框顯示日期選擇器特效代碼分享 jQuery ul標簽下拉菜單演示代碼 JSF的進化——AJAX已經來了
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved