HTML5 中的图片按钮

htmlweb developmentfront end technology更新于 2024/8/13 5:00:17

在下一篇文章中，我们将学习使用 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://www.cainiaomax.com/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://www.cainiaomax.com/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://www.cainiaomax.com/images/logo.png">
</body>
</html>

运行上述脚本后，将弹出输出窗口，显示提供的登录信息、用于输入电子邮件的占位符以及网页上的图像按钮。

示例 4

接下来，我们将创建一个图像按钮，但在 <button> 标签内插入 <img> 标签。

<button type = "submit" name = "learn" value = "myimage">
   <p>Tutorials for all</p>
   <img src="https://www.cainiaomax.com/latest/inter-process-communication.png " />
</button>

运行上述脚本后，它将生成一个输出，在网页上显示包含文本的图像按钮。