input屬性:
placeholder:輸入框的默認值,向用戶顯示描述性說明文字或者提示信息
autocomplete:值為on和off。。on則代表當該字段填寫並提交後再返回該頁,再輸入時會顯示以前輸入的。off則是關閉,包含用戶輸入數據的安全。默認為on
autofocus:頁面載入時設置某個input自動獲取焦點,注意該頁面只能設置一個input的這個屬性,設置多個相當於沒有設置。
list特性和datalist:通過list為某個輸入框增加下拉列表。。相當於js實現的“自動完成”功能,但是不能進行模糊查詢
如果datalist內有2項值:"a34343"和"並24234",用戶希望的是輸入了3後這2個值都出現,但實際上一個也不出現。
它要求是完全匹配,比如輸入a,則下拉a34343出現,接著輸入4,那麼這個下拉值也就沒有了。
required:表單提交前該元素必須填寫,即不能為空。不建議使用,因為提示信息‘請填寫此字段',除非有屬性可以代替該提示信息。
pattern:給input標簽內寫正則的地方。。type為email或url的輸入控件內置相關正則表達式,如果value不符合其正則表達式,那表單將通不過驗證,無法提交。。
不建議給type為email或url的元素使用,因為提示信息固定,正則固定。。還不如js直接重寫。
一些輸入設置:
rangeUnderflow 限制數值控件的最小值 設置min, input type="number" min="0" value="20"
rangeOverflow 限制數值控件的最大值 設置max,input type="number" max="100" value="20"
stepMismatch 確保輸入值符合min,max,step的設置 設置max min step, input type="number" min="0" max="100" step="10" value="20"
</pre>
下面是input=number用的一個小函數:
function inputV(inpFields,tips){//input值范圍判斷。。0-100.正正數 /** * input值范圍判斷。。0-100.正正數 * range 范圍:使用<input type="number" min="0" max="100"/> * if(inputV(v3,msgABC.t4)==false){return false;} * **/ var km=inpFields[0].validity,v3=inpFields.val(); console.log('不是數字:',km.badInput,'超出范圍:',km.rangeOverflow,'小於最小值:',km.rangeUnderflow); if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true alert(tips); return false; } if(isNaN(parseInt(v3))){ console.log('NaN 不判斷.因為值為空'); return true; } else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是數字!!isNaN('v3') alert(tips); return false; } return true; }
list特性和datalist:
<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <form action="http://localhost/test.php" method="post" id="register"></form> url:<input type="url" name="url" form="register" required/><br /> user:<input type="text" name="user" value="" form="register"/><br /> pwd:<input type="password" name="pwd" value="" form="register" /><br /> <select name="year" form="register"> <option value="1970">1970</option> <option value="1980">1980</option> <option value="1990">1990</option> </select> <input type="submit" value="注冊" form="register"/>
正則:<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>
郵箱:<input type="email" name="youxinag" value="" placeholder="這是默認值" autofocus="autofocus" form="register" required="required" /><br />
地址:<input type="url" name="url" form="register" form="register"/>
DATE:<input type="date" name="riqi" value="" form="register"/><br />
TIME:<input type="time" name="shijian" value=""/>
MONTH:<input type="month" name="yue" value="" />
周:<input type="week" name="zhou" value="" />
數字:<input type="number" name="suzhi" value="" form="register" /><br />
滑動條<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
顏色:<input type="color" name="huadong" form="register"/><br />
<input type="file" id="a33" />
自動填充表單<br/>
<input type="text" name="auto" value="" list="movie" /> <datalist id="movie"> <option>11111111</option> <option>243234234</option> <option>3324234</option> </datalist>
輸出表單output
<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)"> <input type="number" name="no1" value=""/> <input type="number" name="no2" value=""/> <output name="result" ></output> </form>
以上所述就是本文的全部內容了,希望大家能夠喜歡。