表單 HTML input 標籤
阿新 • • 發佈：2018-12-18
<input/>
<input>標籤用於蒐集使用者資訊。- 根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。XHTML需要圍堵。
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 規定通過檔案上傳來提交的檔案的型別。accept 屬性僅適用於 <input type="file">。需規定多個值，請使用逗號分隔（比如<input accept="audio/*,video/*,image/*" /> |
| alt | text | 定義無法檢視影象時的替代文字。 (只針對type=“image”) |
| autocomplete | on off | <input>輸入時，是否基於之前鍵入過的值，啟用文字填充提示，需要與name屬性結合使用。可用type：text、search、url、tel、email、password、datepickers、range 和 color |
| autofocus | autofocus | 頁面載入時 <input> |
| checked | checked | 頁面載入時應該被預先選定的 <input>元素。 (只針對 type=“checkbox” 或者 type=“radio”) |
| disabled | disabled | 定義禁用的 <input> 元素 |
| form | form_id | 定義 <input>所屬的一個或多個表單 |
| formaction | URL | 當表單提交時，處理輸入控制元件的檔案的 URL。(只針對 type=“submit” 和 type=“image”，會覆蓋外層<form> |
| formmethod | get post | 定義傳送表單資料到 action URL 的 HTTP 方法。 (只適合 type=“submit” 和 type=“image”) |
| formnovalidate | formnovalidate | 布林屬性,當表單提交時不進行驗證。formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性，與 type=“submit” 配合使用。 |
| formtarget | _blank _self _parent _top framename | 規定表示提交表單後，在哪裡顯示接收到響應的名稱或關鍵詞 |
| height | pixels | 定義<input>元素的高度。(只針對type=“image”) |
| width | pixels | 定義<input>元素的寬度。(只針對type=“image”) |
| list | datalist_id | 引用 <datalist> 元素，其中包含 <input> 元素的預定義選項 |
| max | number date | <input> 元素的最大值，max 和 min 屬性適用於以下 input 型別：number、range、date、datetime、datetime-local、month、time 和 week。 |
| min | number date | <input>元素的最小值。max 屬性與 min 屬性配合使用，可建立合法值範圍。 |
| name | text | <input> 元素的名稱。在 JavaScript 中引用元素，或者在表單提交後引用表單資料。(PS：只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值)。 |
| placeholder | text | 顯示提示資訊，不是value值，適用的 input 型別：text、search、url、tel、email 和 password |
| value | value | 定義input 元素的值，即預定義的值。 1、"button", “reset”, “submit”：按鈕上的文字；2、“text”, “password”, “hidden”,“number”,“color”(16進位制#000000) ：初始（預設）值；3、"checkbox"(必需), “radio”(必需), “image” 型別 - 定義與 input 元素相關的值。該值會發送到表單的 action URL。 |
| — | — | value 屬性不適用於 <input type="file">。 |
| required | required | 規定必需 |
| size | number | 規定以字元數計的 <input> 元素的可見寬度，適用的 input 型別：text、search、tel、url、email 和 password；type為color時，其方框通過style中的width和height來限定，size對color無效 |
| src | URL | src 屬性對於 <input type="image">是必需的屬性，且只能與 <input type="image"> 配合使用。 |
| maxlength | number | 允許輸入的最大字元數，對type="number"無效 |
| multiple | multiple | 布林屬性，允許使用者輸入到 元素的多個值，multiple 屬性適用於以下 input 型別：email 和 file |
| readonly | multiple | 布林屬性，定義輸入欄位只讀，但可用 tab 鍵切換到該欄位，可以選中或拷貝其文字，readonly 屬性可以防止使用者對值進行修改，直到滿足某些條件為止（比如選中了一個複選框）。然後，需要使用 JavaScript 消除 readonly 值，將輸入欄位切換到可編輯狀態。 |
| step | number | 定義<input> 元素的合法數字間隔，適用input 型別：number、range、date、datetime、datetime-local、month、time 和 week |
//accept 在mac系統選擇檔案中不會提示檔案格式
<form>
//選擇檔案時依然可以選擇非gif格式，因此儘量在伺服器上對*檔案上傳*進行驗證accept用於檔案選擇的提示作用。
<input type="file" accept="image/gif"/><br />
<input type="submit" />
</form>
//alt 無法檢視影象時的替代文字loading…
<input type="image" src="img/reg.gif" alt="loading…" style="margin: 90px;" alt="loading"/>
//autocomplete
<form action="index.html" >
<input type="text" autocomplete="on" /> //沒有name屬性，不會彈出填充提示
<input type="text" name="text_1" autocomplete="on"/>
<input type="search" autocomplete="on"/>
<input type="submit"/>
</form>
<form action="index.html" autocomplete="on">
First name:<input type="text" name="fname"><br>//外層定義了autocomplete，內部對應的要加上name屬性
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
//autofocus
<form action="index.html">
First name: <input type="text" name="fname" autofocus><br>//只要定義就觸發
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
//checked 用於單選框
<label style="font-family: songti;" for="biye">畢業：</label>
<input type="radio" checked="checked" name="tap2" id="biye"><br>
<label style="font-family: 微軟雅黑;" for="weibiye">未畢業：</label>
<input type="radio" value="123" name="tap2" id="weibiye"><br />
//checked 用於複選框
<label style="font-family: songti;" for="yiji">一級</label>
<input type="checkbox" id="yiji"/><br/>
<label style="font-family: songti;" for="erji">二級</label>
<input type="checkbox" id="erji"/><br />
<label style="font-family: songti;" for="sanji">三級</label>
<input type="checkbox" hidden="" id="sanji"/><br/>
<label style="font-family: songti; " for="" checked="">四級</label>
<input type="checkbox" checked=""/><br />
//disabled
<form action="index.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname" disabled><br>//只要定義，就觸發
<input type="submit" value="提交">
//form ie不相容
<form action="index.html" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1"> //表單提交時，依然能夠提交lname
//formaction 重定義跳轉url
<form action="chart.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提1交"><br>
<input type="submit" formaction="index2.html" value="提s交">
</form>
//絕對 URL - 某個頁面的完整地址（比如 href="http://www.example.com/formresult.html"）
//相對 URL - 指向當前站點內的一個檔案（比如 href="formresult.html"）
//formmethod
//get：表單資料（form-data）以名稱/值對的形式附加到URL(demo-form.php)中,在瀏覽器的位址列中可見到(安全性低):demo-form.php?fname=&lname=
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
//post：HTTP post 事務的形式傳送表單資料（form-data）,在瀏覽器不可見傳參(安全性低):demo-post.php
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
//formnovalidate 只要定義就觸發，不寫出來就是沒有定義
<form action="chart.html">
<input type="email" name="mail" id="mail" required=""/>
<input type="submit" value="不驗證" formnovalidate /> //不驗證表單：不會出現上面的input框的郵箱格式和必須輸入的提示
<input type="submit" value="驗證" /> //驗證表單：會出現格式和必須輸入的提示
</form>
//formtarget
<form action="index.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank" value="新的頁面開啟">
</form>
//width height
<form action="http://www.baidu.com" name="表單" target="_blank">
<fieldset style="width: 100px;height: 400px;">
<legend style="font-family: STkaiti;text-align: center;">個人資訊</legend>
<center><input type="submit" src="http://www.baidu.com" value="開始填寫"></center>
<input type="text" placeholder="請填寫學歷……">
<input type="text" placeholder="請填寫專業……" required="required"/>
<button type="submit" value="確認">確認</button>
</fieldset>
//input image 作用等同submit，但會觸發兩次提交作用，儘量使用submit
<input type="image" name="image" id="image" value="pic" width="48" height="48"/>
</form>
- 相關標籤
<datalist></datalist>
<datalist>標籤規定了<input>元素可能的選項列表，為<input>元素提供"選項填充提示"的特性，下拉列表裡選項是預先定義好的，作為使用者的輸入資料。<input>元素通過 list 屬性來繫結<datalist>標籤，在<datalist>裡面定義id值來繫結。
//list
<form action="index.html">
<input type="text" list="down" />
<datalist id="down">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4">5</option>//5能在下拉提示框中顯示，但不會輸入到input框之中，填充的內容只識別value的值
</datalist>
<input type="submit" value="submit" />
</form>
//select 標籤得下拉框不能識別其中的value值
<form action="index.html">
<select required="required" >
<option>1</option>
<option>2</option>
<option>3</option>
<option