資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用HTML5的圖片按鈕
在接下來的文章中，我們將學習使用HTML5的圖片按鈕。在這個任務中，我們將使影像充當按鈕，當用戶點選按鈕時，表單將傳送到伺服器。讓我們來看看。
什麼是圖片按鈕
圖片按鈕是透過將<img>標籤放在<button>標籤內建立的，它建立一個可點選的HTML按鈕，其中嵌入了影像。
<img>標籤
使用<img>標籤，我們可以在HTML頁面中包含影像。影像實際上並沒有嵌入網頁中；相反，它們透過預定的路徑連線到網頁。該標籤包含兩個必需的屬性，即src和alt。
語法
以下是<img>標籤的語法
<img src=”..” alt=”..”>
<button>標籤
<button>標籤定義了一個可點選的按鈕。你可以在<button>元素內插入文字（以及<i>、<b>、<strong>、<br>和<img>等標籤）。使用<input>元素製作的按鈕，這是不可行的！
讓我們來看一些使用HTML5的圖片按鈕的例子。
示例1
在下面的例子中，我們建立一個簡單的圖片按鈕。
<!DOCTYPE html>
<html>
<body>
<p>Click On The Image</p>
<button onclick="JavaScript:alert('DONT HUNT ANIMALS')">
<img width="60" height="40" src="https://tutorialspoint.tw/coffeescript/images/coffeescript.jpg" alt="animal">
<br>LOVE ANIMALS</button>
</body>
</html>
當指令碼執行時，它將生成一個輸出，顯示帶有文字的圖片按鈕以及網頁上的提示。
當用戶點選圖片按鈕時，事件被觸發並顯示一個警報“不要獵殺動物”。
示例2
在下面的例子中，我們使用<input type=”image”>建立一個圖片按鈕。
<!DOCTYPE html>
<html>
<body style="text-align: center">
<h2>creating an image Button with HTML5?</h2>
<form>
USERNAME:
<input type="name" /><br><br>
PASSWORD:
<input type="password" /><br><br>
<input type="image" src=
"https://tutorialspoint.tw/images/logo.png"
height="80px" width="110px"
alt="submit" />
</form>
</body>
</html>
當指令碼執行時，它將生成一個輸出，顯示使用者名稱和密碼的輸入欄位以及網頁上的圖片按鈕。當用戶點選圖片按鈕時，表單將提交到伺服器。
示例3
在下面的例子中，我們使用佔位符以及帶有<input type=”image”>的圖片按鈕。
<!DOCTYPE html>
<html>
<head>
<style>
input[type='image'] {
width: 80px;
}
</style>
</head>
<body style="text-align: center">
<p>SIGN IN </p>
<div>
<input type="email"
placeholder="Enter your email Address" />
<br><br>
</div>
<input type="image" id="image" alt="Login"
src="https://tutorialspoint.tw/images/logo.png">
</body>
</html>
執行上述指令碼後，將彈出輸出視窗，顯示帶有輸入電子郵件佔位符的登入資訊以及網頁上的圖片按鈕。
示例4
在下面，我們建立一個圖片按鈕，但將<img>標籤插入到<button>標籤內。
<button type = "submit" name = "learn" value = "myimage"> <p>Tutorials for all</p> <img src="https://tutorialspoint.tw/latest/inter-process-communication.png " /> </button>
執行上述指令碼後，它將生成一個輸出，在網頁上顯示包含文字的圖片按鈕。
更新於：2022年12月16日
19K+ 瀏覽量
廣告