?
This document uses PHP Chinese website manual Release
<input>類型的元素"image"用于創(chuàng)建圖形提交按鈕，即提交采取圖像而不是文本形式的按鈕。
<input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
值 | 無(wú) - 不應(yīng)該指定值屬性。 |
|---|---|
活動(dòng) | 沒(méi)有。 |
支持的通用屬性 | 所有，src，寬度，高度，形式，表單類型，表單方法，formnovalidate，格式 |
IDL屬性 | 沒(méi)有。 |
方法 | 沒(méi)有。 |
值
<input type="image">元素不接受value屬性。要顯示的圖像的路徑在src屬性中指定。
使用圖像輸入
所述<input type="image">元件是一個(gè)替換元件（元件，其內(nèi)容也不會(huì)產(chǎn)生或受到CSS層直接管理），在大致相同的方式作為常規(guī)行為<img>元件，但具有提交按鈕的功能。
基本的圖像輸入功能
讓我們來(lái)看一個(gè)基本的例子，其中包含了您需要使用的所有基本功能（這些功能與<img>元素上的功能完全相同）。
<input id="image" type="image" width="100" height="30" alt="Login" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
該
src屬性用于指定要在按鈕中顯示的圖像的路徑。
該
alt屬性為圖像提供替代文本，因此屏幕閱讀器用戶可以更好地了解該按鈕的用途。如果由于任何原因無(wú)法顯示圖像（例如路徑拼寫(xiě)錯(cuò)誤），也會(huì)顯示該圖像。如果可能的話，使用與使用標(biāo)準(zhǔn)提交按鈕時(shí)所用標(biāo)簽相匹配的文本。
width和height屬性用來(lái)指定的寬度和高度的圖像應(yīng)在被示出，以像素為單位。該按鈕與圖像大小相同; 如果你需要按鈕的點(diǎn)擊區(qū)域大于圖像，你將需要使用CSS（例如padding）。另外，如果只指定一個(gè)尺寸，則另一個(gè)尺寸會(huì)自動(dòng)調(diào)整，以便圖像保持其原始高寬比。
覆蓋默認(rèn)的表單行為
<input type="image"> 元素 - 像常規(guī)的提交按鈕 - 可以接受一些重寫(xiě)默認(rèn)表單行為的屬性：
formactionHTML5處理由input元素提交的信息的程序的URI，在這里如果指定了image，它將覆蓋action元素的表單所有者的屬性。formenctypeHTML5如果輸入元素是圖像，則此屬性指定用于將表單提交給服務(wù)器的內(nèi)容的類型?？赡艿闹凳牵?/p>
application/x-www-form-urlencoded：如果未指定屬性，則為默認(rèn)值。
text/plain.
如果指定了該屬性，則將覆蓋enctype該元素的表單所有者的屬性。
formmethodHTML5在圖像輸入元素中，該屬性指定瀏覽器用于提交表單的HTTP方法?？赡艿闹凳牵?/p>
post：表單中的數(shù)據(jù)包含在表單的主體中，并發(fā)送到服務(wù)器。
get：來(lái)自表單的數(shù)據(jù)被附加到表單屬性URI，并帶有'？' 作為分隔符，并將生成的URI發(fā)送到服務(wù)器。當(dāng)表單沒(méi)有副作用并且只包含ASCII字符時(shí)使用此方法。
如果指定，則此屬性將覆蓋method該元素的表單所有者的屬性。
formnovalidateHTML5這個(gè)布爾屬性指定表單在提交時(shí)不被驗(yàn)證。如果指定了該屬性，則將覆蓋novalidate該元素的表單所有者的屬性。
formtargetHTML5此屬性是一個(gè)名稱或關(guān)鍵字，指示在提交表單后顯示收到的響應(yīng)的位置。這是瀏覽上下文的名稱或關(guān)鍵字（例如，選項(xiàng)卡，窗口或內(nèi)聯(lián)框架）。如果指定了該屬性，則將覆蓋target該元素的表單所有者的屬性。以下關(guān)鍵字具有特殊含義：
_
self：將響應(yīng)加載到與當(dāng)前瀏覽環(huán)境相同的瀏覽環(huán)境中。如果未指定屬性，則此值為默認(rèn)值。
_blank：將響應(yīng)加載到新的未命名瀏覽上下文中。
_parent：將響應(yīng)加載到當(dāng)前父瀏覽上下文中。如果沒(méi)有父項(xiàng)，則此選項(xiàng)的行為方式與_self。
_top：將響應(yīng)加載到頂級(jí)瀏覽上下文（即，作為當(dāng)前祖先的瀏覽上下文，并且沒(méi)有父級(jí)）。如果沒(méi)有父項(xiàng)，則此選項(xiàng)的行為方式與_self。
使用x和y數(shù)據(jù)點(diǎn)
當(dāng)您使用與創(chuàng)建按鈕提交表單<input type="image">，兩個(gè)額外的數(shù)據(jù)點(diǎn)通過(guò)瀏覽器自動(dòng)提交到服務(wù)器- x和y。您可以在我們的XY坐標(biāo)示例中看到這一點(diǎn)。
例如，當(dāng)您單擊圖像提交表單時(shí)，您將看到作為參數(shù)附加到URL的數(shù)據(jù)"?x=52&y=55"。如果圖像輸入具有name屬性，那么請(qǐng)記住，指定的名稱是以每個(gè)屬性為前綴的，所以如果name是"position"，那么返回的坐標(biāo)將被格式化為URL "?position.x=52&position.y=55"。當(dāng)然，這也適用于所有其他屬性。
這些是鼠標(biāo)點(diǎn)擊提交表單的圖像的X和Y坐標(biāo)，其中（0,0）是圖像的左上角。當(dāng)點(diǎn)擊圖像的位置非常重要時(shí)，可以使用這些元素，例如，您可能會(huì)有一個(gè)地圖，單擊時(shí)會(huì)將點(diǎn)擊的坐標(biāo)發(fā)送到服務(wù)器。服務(wù)器端代碼然后找出被點(diǎn)擊的位置，并返回附近的地方的信息。
在我們上面的例子中，我們可以編寫(xiě)服務(wù)器端代碼來(lái)確定提交的坐標(biāo)點(diǎn)擊了什么顏色，并保留了人們所喜歡的顏色。
例子
以下示例顯示了與以前相同的按鈕，但包含在典型登錄表單的上下文中。
HTML看起來(lái)像這樣：
<form> <p>Login to your account</p> <div> <label for="userId">User ID</label> <input type="text" id="userId" name="userId"> </div> <div> <label for="pwd">Password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> </div></form>
現(xiàn)在一些簡(jiǎn)單的CSS讓基本元素更加整齊：
div {
margin-bottom: 10px;}label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;}規(guī)范
規(guī)范 | 狀態(tài) |
|---|---|
WHATWG HTML生活標(biāo)準(zhǔn)該規(guī)范中'<input type ='image'>''的定義。 | 生活水平 |
HTML5該規(guī)范中的<input type =“image”>“的定義。 | 建議 |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |