在接下来的文章中，我们将学习关于使用HTML5的图像按钮。
我们正在使图像充当按钮的任务，当用户单击按钮时， 表单被发送到服务器。让我们研究一下。图像按钮是通过将<img>标签放置在<button>标签内部创建的，它创建了一个可点击的HTML按钮，并嵌入了图像。
通过使用 标签，我们可以在 HTML 页面上包含图像。图像实际上并未嵌入网页中；相反，它们通过预定的路径连接到它们。该标签由两个必需的属性组成，即 src 和 alt。
以下是标签的语法
<img src=”..” alt=”..”>
可点击的按钮由
让我们通过示例来了解 HTML5 的图像按钮。
在下面的示例中，我们正在创建一个简单的图像按钮。
<!DOCTYPE html>
<html>
<body>
<p>Click On The Image</p>
<button onclick="JavaScript:alert('DONT HUNT ANIMALS')">
<img width="60" height="40" src="/uploads/20230917/1694961858650710c2cc190.jpg" alt="animal">
<br>LOVE ANIMALS</button>
</body>
</html>
执行脚本时，它将生成一个输出，显示带有文本的图像按钮以及网页上的提示。
当用户单击图像按钮时，事件将被触发并显示警告“请勿狩猎动物”。
在下面的示例中，我们使用<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.tutorialspoint.com/images/logo.png"
height="80px" width="110px"
alt="submit" />
</form>
</body>
</html>
执行脚本时，它将生成一个输出，显示用户名和密码的输入字段以及网页上的图像按钮。当用户单击图像按钮时，表单将提交到服务器。
在下面的示例中，我们使用占位符和一个带有<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.tutorialspoint.com/images/logo.png">
</body>
</html>
运行上述脚本时，将弹出输出窗口，显示带有用于输入电子邮件的占位符的登录信息以及网页上的图像按钮。
下面我们将创建一个图像按钮，但在
<button type = "submit" name = "learn" value = "myimage"> <p>Tutorials for all</p> <img src="https://www.tutorialspoint.com/latest/inter-process-communication.png " /> </button>
运行上述脚本后，它将在网页上生成一个包含文本的图像按钮。
