使用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+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告