表單及INPUT

input 一般的屬性

autocomplete	HTML5 的這個屬性只是記憶使用者層經key過的資料, 若是不曾key過的話 , 就無法作用。
dirname
list
readonly
size
maxlength
require
multiple
pattern 它是在submit時去觸發	<input type="text" pattern="[A-Z]" title="只接受大寫字母" required /> <input type="text" pattern="[0-9]{4}[-][0-9]{4}[-][0-9]{4}[-][0-9]{4}" title="####-####-####-####" required /> 只輸入大寫字母 : 信用卡號 :
min max step	界定時間與日期格式輸入資料的範圍 <input type="date" max="1979-12-07" /> <input type="number" min="10" max="100" step="2" /> 目前只有chrome有做好支援
placeholder
autofocus	textarea , textbox, select , button 均支援此屬性

input 下的表單關聯屬性

form	針對不在某個form下的 textbox 可指定所屬的表單 id , 當 form送出時 , 此textbox便屬於此表單資料 <input type="text" id="belong_form" form="myform" placeholder="指定所屬表單" />
formaction formmethod formtarget	針對 submit 來處理使用的屬性

input 的 type

text search	只有外觀上的差異 (依browser)而不同
hidden
tel url email password	tel還是靠 browser 實作 (主要應用在 mobile)
date datetime-local time datetime month week	還是靠 browser 實作 (只有chrome及opera) date datetime-local time datetime month week
number range	<input type="range" id="Range1" min="10" max="200" step="1" onchange="onchange_range();" /> function onchange_range() { document.getElementById('span_t_range').innerHTML = document.getElementById('input_range').value; } type = number : type = range : IE 的 range 比較不一樣
color	目前只有 chrome 實作
checkbox
radio
file
submit
image
reset
button

輸入文字選取

實作在text及textarea

selectionStart
selectionEnd	選取文字的開始索引位置
selectionStart	選取文字的結束索引位置
selectionDirection	文字的選取方向正向 : forward 反向 : backward 好像沒啥意義
selectionStart

                                        function onclick_showSelect() {
                                            var obj = document.getElementById('tSelect');
                                            alert('開始 index :' + obj.selectionStart + ', 結束 index :' + obj.selectionEnd);
                                        }
                                        function onclick_showSelectContentA() {
                                            document.getElementById('tSelect').select();
                                        }
                                        function onclick_setSelectRange() {
                                            var iStart = parseInt(document.getElementById('selStart').value, 10);
                                            var iEnd = parseInt(document.getElementById('selEnd').value, 10);
                                            document.getElementById('tSelect').setSelectionRange(iStart, iEnd);
                                        }

選取開始 -

progress

                            <progress id="Progress1" max="100" value="50"></progress>

                            var obj = document.getElementById('id_progress');
                            alert('進度列值為:' + obj.value + ', position:' + obj.position);

只有 IE 長得跟人家不一樣

meter

呈現特定比例的長條圖

只有 IE 不支援 , high , low , optimum 表示高低標 , 不在設定值內的就會不一樣的顏色

datalist
list

IE 有點show over, firefox竟然完全不支援

                            <input type="text" list="cityList" autocomplete="on"/> 
                            <datalist id="cityList">
                                <option value="City-Taipei" label="台北市">
                                <option value="City-New Taipei" label="新北市">
                                <option value="City-Taichung" label="台中市">
                                <option value="City-Tainan" label="台南市">
                                <option value="City-Kaohsiung" label="高雄市">
                                <option value="Miaoli" label="苗栗">
                                <option value="Hsinchu" label="新竹">   
                                <option value="Taoyuan" label="桃園">    
                                <option value="Yunlin" label="雲林">    
                                <option value="Pingtung" label="屏東">
                                <option value="Taitung" label="台東">    
                                <option value="Nantou" label="南投">
                                <option value="Keelung" label="基隆">
                                <option value="Chiayi" label="嘉義">
                            </datalist>

formnovalidate

同 form 的 novalidate 屬性


                            <input type="submit" formnovalidate></input>

input 元素驗證 API

因為預設驗證需要 submit 才會進行 , 故以 API 方式 invoke 就可達到即時驗證

willValidate

submit 時是否會驗證

姓名 :
mail :

setCustomValidity

自訂驗證, 當失敗時回傳 message

checkValidity()

驗證, 回傳 boolean

validity

回傳 ValidityState 物件 (代表元素驗證狀態)

badInput	*這個 IE沒有 (好像不是標準的)
customError	**自訂的驗證訊息字串
patternMismatch
rangeOverflow	大於max
rangeUnderflow	小於min
stepMismatch
tooLong	超出maxlength
typeMismatch	型態不符
valid
valueMissing	required 沒輸入值

自訂驗證

                                var pwd1 = document.getElementById('pwd1');
                                var pwd2 = document.getElementById('pwd2');
                                var vresult;

                                if(pwd1.value !== pwd2.value)
                                {
                                    vresult = '密碼不符';
                                    pwd2.setCustomValidity(vresult);        //將自定訊息傳入
                                    document.getElementById('customer_validate_msg').innerHTML = pwd2.validity.customError + ':' +
                                        pwd2.validationMessage;
                                }
                                else {
                                    document.getElementById('customer_validate_msg').innerHTML = '';
                                    pwd2.setCustomValidity('');             //成功時要清空否則......

                                }