HTML input image 按鈕

admin發表於2018-10-25
HTML

<input>標籤 type 屬性值設定為 "image" 即可建立一個圖片按鈕。

圖片按鈕與submit提交按鈕一樣，點選可以提交表單，當然也可以作為普通按鈕使用。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="image" src="mytest/html/button.jpg"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

點選圖片按鈕可以按鈕可以提交表單，效果與submit相同。

通過src屬性設定圖片的路徑，既可以是絕對路徑也可以是相對路徑。

此按鈕還具有其他屬性，下面分別做一下介紹:

（1）.autofocus（HTML5）：規定在頁面載入時，按鈕自動地獲得焦點。

（2）.disabled：設定按鈕為不可用。

（4）.form（HTML5）：規定按鈕所屬的一個或多個表單。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="image" autofocus src="mytest/html/button.jpg"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

當載入完畢，圖片按鈕自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="image" disabled src="mytest/html/button.jpg"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

將圖片按鈕設定為不可用狀態，那麼它原有的功能也就消失。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  賬號：<input type="text"/><br/>
  密碼：<input type="text"/><br/>
        <input type="reset" value="重置"/>
    </form>
<input type="image" form="ant" src="mytest/html/button.jpg"/>
</body>
</html>

form屬性引用所屬表單的id，於是，雖然圖片按鈕在<form>之外，但依然是該表單的一部分。

相關文章