[TOC] # input 系列 ## --accept （規定上傳文件類型） > 規定通過文件上傳來提交的文件的類型 ~~~ <form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> </form> ~~~ ~~~ 如果不限制圖像的格式，可以寫為：accept="image/*" ~~~ **注**：accept 屬性只能與 `<input type="file">` 配合使用。它規定能夠通過文件上傳進行提交的文件類型。 ## --autocomplete （是否記錄歷史輸入） > 啟用自動完成功能的表單（是否記錄輸入值） ~~~ <form action="demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /> </form> ~~~ 效果：  **注**：autocomplete 屬性適用于 `<form>`，以及下面的 `<input>` 類型：text, search, url, telephone, email, password, datepickers, range 以及 color。 ## --autofocus （頁面加載時獲取焦點） > 為當頁面加載時文本輸入框獲得焦點 ~~~ <form action="demo_form.asp"> First name:<input type="text" name="fname" autofocus="autofocus" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" /> </form> ~~~ 效果：  ## --checked （預選定） > 帶有一個預選定復選框的 HTML 表單 ~~~ <form action="form_action.asp" method="get"> <input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car </form> ~~~ 效果：  > checked 屬性規定在頁面加載時應該被預先選定的 input 元素。 checked 屬性 與 <input type="checkbox"> 或 <input type="radio"> 配合使用。 checked 屬性也可以在頁面加載后，通過 JavaScript 代碼進行設置。 ## --disabled （禁用） > 禁用輸入字段的 HTML 表單 ~~~ <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" disabled="disabled" /></p> <input type="submit" value="Submit" /> </form> ~~~ 效果：  ## --form （表單之外的輸入字段） > 位于表單之外的輸入字段 ~~~ Last name: <input type="text" name="lname" form="nameform" /> ~~~ 效果：  > form 屬性規定 input 元素所屬的一個或多個表單。 form 屬性的值必須是其所屬表單的 id。 如需引用一個以上的表單，請使用空格分隔的列表。 ## --formaction （覆蓋表單的 action 屬性） > 覆蓋表單的 action 屬性 。 適用于 type="submit" 和 type="image" ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /><br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> </form> ~~~ 效果：  ## --formmethod （覆蓋表單的 method 屬性） > 覆蓋了表單的 HTTP 方法 ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" /> </form> ~~~ 效果：  ## --formenctype （覆蓋表單的 enctype 屬性） > 覆蓋表單的 target 屬性 帶有兩個提交按鈕的表單（擁有有不同的編碼方式） ~~~ <form action="demo_post_enctype.asp" method="post"> First name: <input type="text" name="fname" /><br /> <input type="submit" value="Submit" /> <input type="submit" formenctype="multipart/form-data" value="Submit" /> </form> ~~~ 效果：  **注：**該屬性與 type="submit" 和 type="image" 配合使用。 ## --formnovalidate （提交表單時不進行驗證） > 覆蓋表單的 novalidate 屬性，提交表單時不進行驗證 帶有兩個提交按鈕的表單（一個進行驗證，另一個不驗證）： ~~~ <form action="demo_form.asp" method="get"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /><br /> <input type="submit" formnovalidate="formnovalidate" value="Submit" /> </form> ~~~ 效果：  **注：**該屬性適用于 `<form>` 以及以下類型的` <input>`：text, search, url, telephone, email, password, date pickers, range 以及 color。 ## --formtarget （提交到不同的目標窗口） > 帶有兩個提交按鈕的表單，會提交到不同的目標窗口顯示： ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> <input type="submit" formtarget="_blank" value="Submit" /> </form> ~~~ 效果：  ## --height （定義 input 字段的高度） > 用圖片作為提交按鈕的表單： ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/> </form> ~~~ 效果：  **提示：**為圖片指定高度和寬度是一個好習慣。如果設置了這些屬性，當頁面加載時會為圖片預留需要的空間。而如果沒有這些屬性，則瀏覽器就無法了解圖像的尺寸，也就無法為其預留合適的空間。情況是當頁面和圖片加載時，頁面布局會發生變化。 ## --list （帶有 datalist 的表單） > 帶有 datalist 的表單 ~~~ <form action="demo_form.asp"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> ~~~ 效果：  ## --max （規定輸入字段的最大值） > 帶有指定范圍的數字輸入字段 ~~~ Points: <input type="number" name="points" min="0" max="10" /> ~~~ 效果：  **注：**max 和 min 屬性適用于以下 <input> 類型：number, range, date, datetime, datetime-local, month, time 以及 week。 ## --maxlength （規定輸入字段中的字符的最大長度） > 下面這個 HTML 表單帶有最大長度分別是 85 和 55 個字符的兩個輸入字段 ~~~ <form action="form_action.asp" method="get"> <p>Name: <input type="text" name="fullname" maxlength="85" /></p> <p>Email: <input type="text" name="email" maxlength="55" /></p> <input type="submit" value="Submit" /> </form> ~~~ **用法：**maxlength 屬性規定輸入字段的最大長度，以字符個數計。 maxlength 屬性與 `<input type="text">` 或 `<input type="password">` 配合使用。 ## --multiple（允許一個以上的值） > 可接受多個值的文件上傳字段 ~~~ <form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" /> <input type="submit" /> </form> ~~~ > 上傳圖片的時候可以多選 **用法：**multiple 屬性規定輸入字段可選擇多個值。 如果使用該屬性，則字段可接受多個值。 注釋：multiple 屬性使用歐冠與以下 <input> 類型：email 和 file。 ## --name （定義 input 元素的名稱） > 帶有兩個文本字段和一個提交按鈕的 HTML 表單 ~~~ <form action="form_action.asp" method="get"> <p>Name: <input type="text" name="fullname" /></p> <p>Email: <input type="text" name="email" /></p> <input type="submit" value="Submit" /> </form> ~~~ **注：**name 屬性規定 input 元素的名稱。 name 屬性用于對提交到服務器后的表單數據進行標識，或者在客戶端通過 JavaScript 引用表單數據。 注釋：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。 ## --pattern（規定輸入字段的值的模式或格式） > 規定輸入字段的值的模式或格式。 例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。 只能包含三個字母的文本字段（數字或特殊字符） ~~~ Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> ~~~ **用法：**pattern 屬性規定用于驗證輸入字段的模式。 模式指的是正則表達式。您可以在我們的 JavaScript 教程中閱讀到這方面的內容。 **注釋**：pattern 屬性適用于以下 `<input>` 類型：text, search, url, telephone, email 以及 password 。 **提示**：請使用標準的 "title" 屬性來描述模式。 ## --placeholder （規定幫助用戶填寫輸入字段的提示） > 規定幫助用戶填寫輸入字段的提示 ~~~ <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form> ~~~ 效果：  **注：**placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。 該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。 placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。 ## --readonly（只讀） ~~~ <form action="form_action.asp" method="get"> Name:<input type="text" name="email" /> Country:<input type="text" name="country" value="China" readonly="readonly" /> <input type="submit" value="Submit" /> </form> ~~~ **注：**readonly 屬性規定輸入字段為只讀。 只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。 readonly 屬性可以防止用戶對值進行修改，直到滿足某些條件為止（比如選中了一個復選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。 readonly 屬性可與 `<input type="text">` 或 `<input type="password">` 配合使用。 ## --required （指示輸入字段的值是必需的） > 帶有必填字段的表單 ~~~ <form action="demo_form.asp" method="get"> Name: <input type="text" name="usr_name" required="required" /> <input type="submit" /> </form> ~~~ 效果： **注：**required 屬性適用于以下 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 ## --step （規定輸入字的的合法數字間隔） > 帶有合法數字間隔的數字輸入控件 ~~~ <form action="demo_form.asp" method="get"> <input type="number" name="points" step="3" /> <input type="submit" /> </form> ~~~ 效果： **注：**step、max 以及 min 屬性適用于以下 <input> 類型：number, range, date, datetime, datetime-local, month, time 以及 week。 ## --size（定義輸入字段的寬度） ~~~ <form action="form_action.asp" method="get"> <p>Email: <input type="text" name="email" size="35" /></p> <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p> <input type="submit" value="Submit" /> </form> ~~~ 效果：  ## --width（定義 input 字段的寬度） > 定義 input 字段的寬度。（適用于 type="image"） ~~~ <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/> </form> ~~~ width 屬性只適用于 <input type="image">，它規定 image input 的寬度。 **提示：**為圖片指定高度和寬度是一個好習慣。如果設置了這些屬性，當頁面加載時會為圖片預留需要的空間。而如果沒有這些屬性，則瀏覽器就無法了解圖像的尺寸，也就無法為其預留合適的空間。情況是當頁面和圖片加載時，頁面布局會發生變化。