input 表單屬性

今天作項目的時候頻繁用到了<input>元素，卻發現好多屬性都不懂。找資料總結。

accept 規定經過文件上傳來提交的文件的類型。

//只能與 <input type="file"> 配合使用。
//例如只容許上傳圖片文件
 <input type="file" name="pic" id="pic" accept="image/*" />

align 規定圖像輸入的對齊方式。

值：left | right | top | middle | bottom 【不同意使用。】

alt 定義圖像輸入的替代文本。

alt 屬性只能與 <input type="image"> 配合使用。
alt 屬性爲用戶因爲某些緣由沒法查看圖像時提供了備選的信息。

autocomplete 規定是否使用輸入字段的自動完成功能。

自動完成容許瀏覽器預測對字段的輸入。
當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。
值： on | off
適用於 <form>，以及下面的 <input> 類型：text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus 規定輸入字段在頁面加載時是否得到焦點。

【不適用於 type="hidden"】
值：autofocus

checked 規定此 input 元素首次加載時應當被選中。

與 <input type="checkbox"> 或 <input type="radio"> 配合使用
值：checked

disabled 當 input 元素加載時禁用此元素。

被禁用的 input 元素既不可用，也不可點擊。
值：disabled

form 規定輸入字段所屬的一個或多個表單。

form 屬性的值必須是其所屬表單的 id。
可用於表單之外的輸入字段
<form id="nameform">...</form>
Last name: <input type="text" name="lname" form="nameform" />

formaction 覆蓋表單的 action 屬性。

（適用於 type="submit" 和 type="image"）

formenctype 覆蓋表單的 enctype 屬性。

（適用於 type="submit" 和 type="image"）
值：

• application/x-www-form-urlencoded【在發送前對全部字符進行編碼（默認）。】

• multipart/form-data【不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。】

• text/plain【將空格轉換爲 "+" 符號，但不編碼特殊字符。】

formmethod 覆蓋表單的 method 屬性。

（適用於 type="submit" 和 type="image"）
值：get | post

formnovalidate 覆蓋表單的 novalidate 屬性。

若是使用該屬性，則提交表單時不進行驗證。
適用於 <form> 以及如下類型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。
值：formnovalidate

formtarget 覆蓋表單的 target 屬性。

（適用於 type="submit" 和 type="image"）
HTML5 不支持框架和框架集。parent, top 和 framename 值大多用於 iframe。

• _blank【在新窗口/選項卡中將表單提交到文檔。】

• _self【在同一框架中將表單提交到文檔。（默認）】

• _parent【在父框架中將表單提交到文檔。】

• _top【在整個窗口中將表單提交到文檔】

• framename【在指定的框架中將表單提交到文檔。】

list datalist-id 引用包含輸入字段的預約義選項的 datalist 。

<label>網頁：</label><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>

step 規定輸入字的的合法數字間隔。

<input type="number" name="points" step="3" />
//合法數字應該是 -三、0、三、6，以此類推

max 規定輸入字段的最大值。

min 規定輸入字段的最小值。

step、max 和 min 屬性適用於如下 <input> 類型：number, range, date, datetime, datetime-local, month, time 以及 week。

maxlength 規定輸入字段中的字符的最大長度。

maxlength 屬性規定輸入字段的最大長度，以字符個數計。
maxlength 屬性與 <input type="text"> 或 <input type="password"> 配合使用。

size 定義輸入字段的寬度。

對於 <input type="text"> 和 <input type="password">，size 屬性定義的是可見的字符數。
而對於其餘類型，size 屬性定義的是以像素爲單位的輸入字段寬度。

multiple 若是使用該屬性，則容許一個以上的值。

【須要上傳多個文件時可以使用該屬性】

name 定義 input 元素的名稱。

屬性用於對提交到服務器後的表單數據進行標識
或者在客戶端經過 JavaScript 引用表單數據。
只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

pattern 規定輸入字段的值的模式或格式。

pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
適用於如下 <input> 類型：text, search, url, telephone, email 以及 password 。

placeholder 規定幫助用戶填寫輸入字段的提示。

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。
適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password

readonly 規定輸入字段爲只讀。

可與 <input type="text"> 或 <input type="password"> 配合使用。
只讀字段是不能修改的。不過，用戶仍然能夠使用 tab 鍵切換到該字段，還能夠選中或拷貝其文本。

required 指示輸入字段的值是必需的。

適用於如下 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

src URL 定義以提交按鈕形式顯示的圖像的 URL。

只能與 <input type="image"> 配合使用。

type 規定 input 元素的類型。

• button 定義可點擊按鈕。

• checkbox 定義複選框。

• file 定義輸入字段和 "瀏覽"按鈕，供文件上傳。

• hidden 定義隱藏的輸入字段。

• image 定義圖像形式的提交按鈕。

• password 定義密碼字段。該字段中的字符被掩碼。

• radio 定義單選按鈕。

• reset 定義重置按鈕。重置按鈕會清除表單中的全部數據。

• submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。

• text 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。

value 規定 input 元素的值。

對於不一樣的輸入類型，value 屬性的用法也不一樣：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
註釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

width 定義 input 字段的寬度。

height 定義 input 字段的高度

width和height只適用於 type="image"

PS:【對input元素UI自定義】

<input type="file" />默認的樣式是這樣的。

利用label for的屬性，能夠很好的改變樣式。

<label class="btn btn-primary" for="xFile">上傳文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

上述例子中其實就是隱藏input。因此還能夠用

style="visibility:hidden"
或者
style="display:none"

效果圖以下