可以使用圖像來替代按鈕中的文本，從而使頁面變得更加美觀。

在 HTML 中，把 <input> 標簽的 type 屬性設置為 image 可以表示圖像按鈕。具體語法格式如下：

<input type="image" src="url" />

我們還可以把圖像按鈕分為圖像、按鈕兩部分來看，因為它既有圖像的特點（需要使用src屬性為圖片添加路徑），又有按鈕的特點（圖像按鈕的行為基本上與提交按鈕一致，點擊它也可以實現表單數據的提交）。

圖片的路徑可以是相對路徑，也可以是絕對路徑。

示例如下：

<form action="" method="post"><input type="image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg"/> </form>

運行結果如圖所示：

當我們點擊圖片按鈕后，表單中的相應內容會提交。

1. 圖像按鈕屬性

同 <img> 標簽一樣，圖像按鈕也有 alt 屬性：

1) alt屬性

alt 屬性用來對圖像進行文本說明。一般情況下，當瀏覽器因某種原因無法載入圖像時，就會顯示這段文本。雖然 alt 屬性值可以為空，但還是建議讀者給 alt 屬性設置符合圖像信息的文本。

代碼如下：

<form action="" method="post"><input type="image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" alt="此處為提交按鈕"/> </form>

當網絡出現問題時，運行結果如圖所示：

接下來我們看一下怎樣設置圖片按鈕的大小。

2) width屬性

width 屬性表示圖片的寬度，默認單位是 px，不需要顯示指明。使用方法如下：

<form action="" method="post"><input type="image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" alt="此處為提交按鈕" width="100"/> </form>

運行結果如圖所示：

與圖 1 進行對比發現，圖片的寬度和高度都發生了變化，那是因為圖片隨設置好的寬度進行了自適應。

3) height屬性

height 屬性表示圖片的高度，同 width 屬性一樣，默認單位也是 px，不需要顯示指明。具體代碼如下：
純文本復制

<form action="" method="post"><input type="image" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1789448540,836075780&fm=26&gp=0.jpg" alt="此處為提交按鈕" height="100"/> </form>

運行結果如圖所示：

通過運行結果發現，圖片的寬度也隨其高度發生了變化。一般情況下，我們只需設置圖片的寬度（width）或者是高度（height）即可，否則有的圖片可能會失幀。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的23、HTML图像按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。