<input>元素主要用于表單組件，它繼承了 HTMLInputElement 接口。
HTMLInputElement 的實(shí)例屬性
特征屬性
name：字符串，表示<input>節(jié)點(diǎn)的名稱。該屬性可讀寫。type：字符串，表示<input>節(jié)點(diǎn)的類型。該屬性可讀寫。disabled：布爾值，表示<input>節(jié)點(diǎn)是否禁止使用。一旦被禁止使用，表單提交時(shí)不會(huì)包含該<input>節(jié)點(diǎn)。該屬性可讀寫。autofocus：布爾值，表示頁面加載時(shí)，該元素是否會(huì)自動(dòng)獲得焦點(diǎn)。該屬性可讀寫。required：布爾值，表示表單提交時(shí)，該<input>元素是否必填。該屬性可讀寫。value：字符串，表示該<input>節(jié)點(diǎn)的值。該屬性可讀寫。validity：返回一個(gè)ValidityState對(duì)象，表示<input>節(jié)點(diǎn)的校驗(yàn)狀態(tài)。該屬性只讀。validationMessage：字符串，表示該<input>節(jié)點(diǎn)的校驗(yàn)失敗時(shí)，用戶看到的報(bào)錯(cuò)信息。如果該節(jié)點(diǎn)不需要校驗(yàn)，或者通過校驗(yàn)，該屬性為空字符串。該屬性只讀。willValidate：布爾值，表示表單提交時(shí)，該<input>元素是否會(huì)被校驗(yàn)。該屬性只讀。
表單相關(guān)屬性
form：返回<input>元素所在的表單（<form>）節(jié)點(diǎn)。該屬性只讀。formAction：字符串，表示表單提交時(shí)的服務(wù)器目標(biāo)。該屬性可讀寫，一旦設(shè)置了這個(gè)屬性，會(huì)覆蓋表單元素的action屬性。formEncType：字符串，表示表單提交時(shí)數(shù)據(jù)的編碼方式。該屬性可讀寫，一旦設(shè)置了這個(gè)屬性，會(huì)覆蓋表單元素的enctype的屬性。formMethod：字符串，表示表單提交時(shí)的 HTTP 方法。該屬性可讀寫，一旦設(shè)置了這個(gè)屬性，會(huì)覆蓋表單元素的method屬性。formNoValidate：布爾值，表示表單提交時(shí)，是否要跳過校驗(yàn)。該屬性可讀寫，一旦設(shè)置了這個(gè)屬性，會(huì)覆蓋表單元素的formNoValidate屬性。formTarget：字符串，表示表單提交后，服務(wù)器返回?cái)?shù)據(jù)的打開位置。該屬性可讀寫，一旦設(shè)置了這個(gè)屬性，會(huì)覆蓋表單元素的target屬性。
文本輸入框的特有屬性
以下屬性只有在<input>元素可以輸入文本時(shí)才有效。
autocomplete：字符串on或off，表示該<input>節(jié)點(diǎn)的輸入內(nèi)容可以被瀏覽器自動(dòng)補(bǔ)全。該屬性可讀寫。maxLength：整數(shù)，表示可以輸入的字符串最大長(zhǎng)度。如果設(shè)為負(fù)整數(shù)，會(huì)報(bào)錯(cuò)。該屬性可讀寫。size：整數(shù)，表示<input>節(jié)點(diǎn)的顯示長(zhǎng)度。如果類型是text或password，該屬性的單位是字符個(gè)數(shù)，否則單位是像素。該屬性可讀寫。pattern：字符串，表示<input>節(jié)點(diǎn)的值應(yīng)該滿足的正則表達(dá)式。該屬性可讀寫。placeholder：字符串，表示該<input>節(jié)點(diǎn)的占位符，作為對(duì)元素的提示。該字符串不能包含回車或換行。該屬性可讀寫。readOnly：布爾值，表示用戶是否可以修改該節(jié)點(diǎn)的值。該屬性可讀寫。min：字符串，表示該節(jié)點(diǎn)的最小數(shù)值或日期，且不能大于max屬性。該屬性可讀寫。max：字符串，表示該節(jié)點(diǎn)的最大數(shù)值或日期，且不能小于min屬性。該屬性可讀寫。selectionStart：整數(shù)，表示選中文本的起始位置。如果沒有選中文本，返回光標(biāo)在<input>元素內(nèi)部的位置。該屬性可讀寫。selectionEnd：整數(shù)，表示選中文本的結(jié)束位置。如果沒有選中文本，返回光標(biāo)在<input>元素內(nèi)部的位置。該屬性可讀寫。selectionDirection：字符串，表示選中文本的方向?？赡艿闹蛋?code>forward（與文字書寫方向一致）、backward（與文字書寫方向相反）和none（文字方向未知）。該屬性可讀寫。
復(fù)選框和單選框的特有屬性
如果<input>元素的類型是復(fù)選框（checkbox）或單選框（radio），會(huì)有下面的特有屬性。
checked：布爾值，表示該<input>元素是否選中。該屬性可讀寫。defaultChecked：布爾值，表示該<input>元素默認(rèn)是否選中。該屬性可讀寫。indeterminate：布爾值，表示該<input>元素是否還沒有確定的狀態(tài)。一旦用戶點(diǎn)擊過一次，該屬性就會(huì)變成false，表示用戶已經(jīng)給出確定的狀態(tài)了。該屬性可讀寫。
圖像按鈕的特有屬性
如果<input>元素的類型是image，就會(huì)變成一個(gè)圖像按鈕，會(huì)有下面的特有屬性。
alt：字符串，圖像無法顯示時(shí)的替代文本。該屬性可讀寫。height：字符串，表示該元素的高度（單位像素）。該屬性可讀寫。src：字符串，表示該元素的圖片來源。該屬性可讀寫。width：字符串，表示該元素的寬度（單位像素）。該屬性可讀寫。
文件上傳按鈕的特有屬性
如果<input>元素的類型是file，就會(huì)變成一個(gè)文件上傳按鈕，會(huì)有下面的特有屬性。
accept：字符串，表示該元素可以接受的文件類型，類型之間使用逗號(hào)分隔。該屬性可讀寫。files：返回一個(gè)FileList實(shí)例對(duì)象，包含了選中上傳的一組File實(shí)例對(duì)象。
其他屬性
defaultValue：字符串，表示該<input>節(jié)點(diǎn)的原始值。dirName：字符串，表示文字方向。accessKey：字符串，表示讓該<input>節(jié)點(diǎn)獲得焦點(diǎn)的某個(gè)字母鍵。list：返回一個(gè)<datalist>節(jié)點(diǎn)，該節(jié)點(diǎn)必須綁定<input>元素，且<input>元素的類型必須可以輸入文本，否則無效。該屬性只讀。multiple：布爾值，表示是否可以選擇多個(gè)值。labels：返回一個(gè)NodeList實(shí)例，代表綁定當(dāng)前<input>節(jié)點(diǎn)的<label>元素。該屬性只讀。step：字符串，表示在min屬性到max屬性之間，每次遞增或遞減時(shí)的數(shù)值或時(shí)間。valueAsDate：Date實(shí)例，一旦設(shè)置，該<input>元素的值會(huì)被解釋為指定的日期。如果無法解析該屬性的值，<input>節(jié)點(diǎn)的值將是null。valueAsNumber：浮點(diǎn)數(shù)，當(dāng)前<input>元素的值會(huì)被解析為這個(gè)數(shù)值。如果輸入框?yàn)榭?，該屬性返?code>NaN。
下面是valueAsNumber屬性的例子。
/* HTML 代碼如下
<input type="number" value="1.234" />
*/
input.value // "1.234"
input.valueAsNumber // 1.234
HTMLInputElement 的實(shí)例方法
focus()：當(dāng)前<input>元素獲得焦點(diǎn)。blur()：移除<input>元素的焦點(diǎn)。select()：選中<input>元素內(nèi)部的所有文本。該方法不能保證<input>獲得焦點(diǎn)，最好先用focus()方法，再用這個(gè)方法。click()：模擬鼠標(biāo)點(diǎn)擊當(dāng)前的<input>元素。setSelectionRange()：選中<input>元素內(nèi)部的一段文本，但不會(huì)將焦點(diǎn)轉(zhuǎn)移到選中的文本。該方法接受三個(gè)參數(shù)，第一個(gè)參數(shù)是開始的位置（從0開始），第二個(gè)參數(shù)是結(jié)束的位置（不包括該位置），第三個(gè)參數(shù)是可選的，表示選擇的方向，有三個(gè)可能的值（forward、backward和默認(rèn)值none）。setRangeText()：新文本替換選中的文本。該方法接受四個(gè)參數(shù)，第一個(gè)參數(shù)是新文本，第二個(gè)參數(shù)是替換的開始位置(從0開始計(jì)算)，第三個(gè)參數(shù)是結(jié)束位置（該位置不包括在內(nèi)），第四個(gè)參數(shù)表示替換后的行為（可選），有四個(gè)可能的值：select（選中新插入的文本）、start（光標(biāo)位置移到插入的文本之前）、end（光標(biāo)位置移到插入的文本之后）、preserve（默認(rèn)值，如果原先就有文本被選中且本次替換位置與原先選中位置有交集，則替換后同時(shí)選中新插入的文本與原先選中的文本，否則保持原先選中的文本）。setCustomValidity()：該方法用于自定義校驗(yàn)失敗時(shí)的報(bào)錯(cuò)信息。它的參數(shù)就是報(bào)錯(cuò)的提示信息。注意，一旦設(shè)置了自定義報(bào)錯(cuò)信息，該字段就不會(huì)校驗(yàn)通過了，因此用戶重新輸入時(shí)，必須將自定義報(bào)錯(cuò)信息設(shè)為空字符串，請(qǐng)看下面的例子。checkValidity()：返回一個(gè)布爾值，表示當(dāng)前節(jié)點(diǎn)的校驗(yàn)結(jié)果。如果返回false，表示不滿足校驗(yàn)要求，否則就是校驗(yàn)成功或不必校驗(yàn)。stepDown()：將當(dāng)前<input>節(jié)點(diǎn)的值減少一個(gè)步長(zhǎng)。該方法可以接受一個(gè)整數(shù)n作為參數(shù)，表示一次性減少n個(gè)步長(zhǎng)，默認(rèn)是1。有幾種情況會(huì)拋錯(cuò)：當(dāng)前<input>節(jié)點(diǎn)不適合遞減或遞增、當(dāng)前節(jié)點(diǎn)沒有step屬性、<input>節(jié)點(diǎn)的值不能轉(zhuǎn)為數(shù)字、遞減之后的值小于min屬性或大于max屬性。stepUp()：將當(dāng)前<input>節(jié)點(diǎn)的值增加一個(gè)步長(zhǎng)。其他與stepDown()方法相同。
下面是setSelectionRange()方法的一個(gè)例子。
/* HTML 代碼如下
<p><input type="text" id="mytextbox" size="20" value="HelloWorld"/></p>
<p><button onclick="SelectText()">選擇文本</button></p>
*/
function SelectText() {
var input = document.getElementById('mytextbox');
input.focus();
input.setSelectionRange(2, 5);
}
上面代碼中，點(diǎn)擊按鈕以后，會(huì)選中llo三個(gè)字符。
下面是setCustomValidity()的例子。
/* HTML 代碼如下
<form id="form">
<input id="field" type="text" pattern="[a-f,0-9]{4}" autocomplete=off>
</form>
*/
const form = document.querySelector('#form');
const field = document.querySelector('#field');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 防止這個(gè)例子發(fā)出 POST 請(qǐng)求
});
field.oninvalid = (event) => {
event.target.setCustomValidity('必須是一個(gè) 4 位十六進(jìn)制數(shù)');
}
field.oninput = (event) => {
event.target.setCustomValidity('');
}
上面代碼中，輸入框必須輸入一個(gè)4位的十六進(jìn)制數(shù)。如果不滿足條件（比如輸入xxx），按下回車鍵以后，就會(huì)提示自定義的報(bào)錯(cuò)信息。一旦自定義了報(bào)錯(cuò)信息，輸入框就會(huì)一直處于校驗(yàn)失敗狀態(tài)，因此重新輸入時(shí)，必須把自定義報(bào)錯(cuò)信息設(shè)為空字符串。另外，為了避免自動(dòng)補(bǔ)全提示框遮住報(bào)錯(cuò)信息，必須將輸入框的autocomplete屬性關(guān)閉。
更多建議：