使用HTML5的图像按钮

百变鹏仔 4周前 (09-22) #HTML

文章标签按钮

在接下来的文章中，我们将学习关于使用HTML5的图像按钮。

task we are making the image to act as a button, When the user clicks the button, theform is sent to the server. Let's look into it.

什么是图像按钮

图像按钮是通过将标签放置在标签内部创建的，它创建了一个可点击的HTML按钮，并嵌入了图像。

Syntax

Following is the syntax for tag

立即学习“前端免费学习笔记（深入）”；

<img src=”..” alt=”..”>

tag

A clickable button is defined by the tag. You can insert text (as well as tags like , , ,
and etc.) inside a element. With a button made with the element, that is not feasible!

Let’s look into the examples for understanding of image button with HTML5.

Example 1

在下面的示例中，我们正在创建一个简单的图像按钮。

<!DOCTYPE html><html><body>   <p>Click On The Image</p>   <button onclick="JavaScript:alert('DONT HUNT ANIMALS')">   <img    style="max-width:90%"  style="max-width:90%" src="https://www.tutorialspoint.com/coffeescript/images/coffeescript.jpg" alt="animal">   <br>LOVE ANIMALS</button></body></html>

When the script gets executed, it will generate an output displaying the image button with text on it along with a prompt on the webpage.

When the user clicks the image button, the event gets triggered and displays an alert "Don’t hunt animals".

Example 2

在下面的示例中，我们使用创建了一个图像按钮。

<!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>

When the script gets executed, it will generate an output displaying the input field for username and password along with an image button on the webpage. When the user clicks the image button, the form gets submitted to the server.

Example 3

在下面的示例中，我们使用占位符和一个带有

文章推荐

使用HTML5的图像按钮

什么是图像按钮

标签

Syntax

tag

Example 1

Example 2

Example 3

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8