html5表單及新增的改良元素詳解

2020-03-24 16:24:25

字體：大中小

來源：轉載

供稿：網友

body !--表單內元素的form屬性：為元素指定一個form屬性，屬性值為該表單的id-- formid= testform inputtype= submit / /form textareaform= testform /textarea br/ hr/ !--表單內元素的formaction屬性：可以提交到不同頁面-- formid= form1 action= test.aspx inputtype= submit name= s1 html' target='_blank'>value= 內部提交到test2 formaction= test2.aspx / inputtype= submit / /form !--formmethod:可以為每個表單元素指定不同的提交方法-- formid= form2 action= test.aspx name: inputtype= text name= name / br/ inputtype= submit value= post方式提交 formmethod= post / inputtype= submit value= get方式提交 formmethod= get / /form br/ hr/ !--formenctype:可以指定不同的編碼方式-- formaction= test2.aspx method= post inputtype= text name= name id= name value= test / 文件: inputtype= file name= files / inputtype= submit value= 上傳 formaction= test.aspx formenctype= multipart/form-data / inputtype= submit value= 提交 / /form br/ hr/ !--formtarget:提交后再何處打開頁面-- formaction= test.aspx inputtype= submit name= s1 value= s1本頁打開 formaction= test2.aspx formtarget= _self / 提交到test2 inputtype= submit name= s value= s新頁打開 formaction= test.aspx formtarget= _blank / 提交到test /form hr/ !--autofocus:自動獲得光標焦點-- inputtype= text autofocus/ br/ !--control:通過該屬性來訪問該表單元素-- form labelid= label 郵編： inputid= txtzip maxlength= 6 / small 請輸入6位數字 /small /label inputtype= button value= 設置默認值 onclick= setValue() / /form !--placeholder:未輸入狀態的輸入提示-- inputtype= text placeholder= 請輸入內容 / br/ !--list:單行文本框的list屬性，屬性值為datalist的id。autocomplete：自動完成-- list屬性： inputtype= text list= mylist autocomplete= on / datalistid= mylist optionvalue= 第一第一 /option optionvalue= 第二第二 /option optionvalue= 第三三 /option /datalist br/ !--pattern：設置正則表達式驗證-- form 輸入一個字母與三個大寫字母： inputtype= text pattern= [0-9][A-Z]{3} required= / inputtype= submit / /form br/ !--indeterminate:說明復選框處于尚未明確是否選取狀態-- inputtype= checkbox indeterminateid= cb / indeterminate br/ !--image的height和width設置圖片高寬-- 設置圖片寬高: inputtype= image src= img/webp.jpg alt= 編輯 width= 23 height= 23 / br/ !--textarea:maxlength和wrap屬性：hard換行也要指定cols，soft不換行-- formaction= test.aspx method= post textareaname= name maxlength= 10 rows= 5 cols= 5 wrap= hard /textarea inputtype= submit value= 提交 / /form br/ !--url類型：只能提交url地址格式-- url: inputtype= url name= url required= / inputtype= submit / br/ email: inputtype= email name= email required= / inputtype= submit / br/ date(谷歌瀏覽器)： inputtype= date name= date / br/ time(谷歌瀏覽器): inputtype= time name= time / br/ datetime-local: inputtype= datetime-local name= datetime value= 2016-05-26T22:31:30 / br/ !--日期時間類型的step屬性：單擊調整時對選擇值多大限定-- step： inputtype= date step= 3 / br/ hr/ number: inputtype= number value= 25 min= 10 min= 20 max= 30 step= 2 / br/ range： inputtype= range value= 25 min= 10 max= 100 step= 5 / br/ search: inputtype= search / br/ tel: inputtype= tel / br/ color: inputtype= color / br/ hr/ output元素的追加： formid= testform 請選擇一個值: inputtype= range id= range min= 5 max= 100 step= 5 value= 10 onchange= out(); / outputid= out 10 /output /form /body /html scripttype= text/javascript functionsetValue(){ varlable=document.getElementById( label vartxtbox=lable.control;//通過control該屬性來訪問該表單元素 txtbox.value= 213001 ; } //indeterminate測試設置為true varcb=document.getElementById( cb cb.indeterminate=true; //選擇的值output輸出 functionout(){ Debug; varnumber=document.getElementById( range ).value; document.getElementById( out ).value=number; } /script
念念不忘，必有回響。技術成就夢想！以上這篇html5表單及新增的改良元素詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/06/5565163.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：通過HTML設置超鏈接字體的顏色和點擊后的字體顏色

下一篇：使用HTML5做個畫圖板的方法介紹