使用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.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://tutorialspoint.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://tutorialspoint.com/images/logo.png">
</body>
</html>

运行上述脚本后，将弹出一个输出窗口，显示带有输入电子邮件占位符的登录信息以及网页上的一个图片按钮。

示例4

在下面，我们创建一个图片按钮，但将<img>标签插入到<button>标签中。

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

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

更新于：2022-12-16

19K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始
广告