HTML 图片按钮

2025年3月25日 | 阅读 4 分钟

HTML 中的图片按钮可以通过使用 <input> 元素的 type 属性来创建。图片按钮与提交按钮的功能相同，唯一的区别在于你可以选择任意图片作为按钮。

语法

<input type="image" name="Name of image button" src="Path of the Image file? border="Specfiy Image Border " alt="text">

示例

示例 1：此示例用于在不使用 CSS 的情况下指定图片按钮。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of image button
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specifying the lightblue color as a background */  
.container {
    padding: 50px;
  background-color: lightblue;
}
/* The following tag selector input uses the different properties for specifying the text field. */
input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus {
  background-color: orange;
  outline: none;
}
 div {
            padding: 10px 0;
         }
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  <h1> Registration Form</h1> </center>
<hr>
<label> Firstname: </label> 
<input type="text" name="firstname" placeholder= "Firstname" size="15" required /> 
<label> Middlename: </label> 
<input type="text" name="middlename" placeholder="Middlename" size="15" required /> 
<label> Lastname: </label>  
<input type="text" name="lastname" placeholder="Lastname" size="15"required /> 
<div>
<label> 
Course :
</label> 
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label> 
Gender :
</label>
<br>
<input type="radio" value="Male" name="gender" checked > Male 
<input type="radio" value="Female" name="gender"> Female 
<input type="radio" value="Other" name="gender"> Other
</div>
<!-- The following tag input uses the type attribute which specifies the image, and the src attribute for specifying the path of an image, with the height and width attributes. -->
<input type="image" src="https://www.freepngimg.com/thumb/submit_button/25497-9-submit-button-photos.png" name="submit" width="100" height="48" alt="submit"/>

</form>
</body>  
</html>

输出

示例 2：此示例用于使用 CSS 样式指定图片按钮。其输出与上面示例的输出相同，但实现方式不同。

在下面的示例中，我们将使用 <button> 标签在网页上指定图片按钮。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of image button
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/
Body {
  font-family: Calibri, Helvetica, sans-serif;
  background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specifying the lightblue color as a background */  
.container {
    padding: 50px;
  background-color: lightblue;
}
/* The following tag selector input uses the different properties for specifying the text field. */
input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
} 
/* The following tag selector button uses the different properties for specifying the image button on a page. */
  button { 
            background-image: url( 
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTP6zIlxzaUIA_CPMpDXoJXporQUagBpwplwm3tUro3BQDZgNaa'); 
            width: 230px; 
            height: 150px;     
        } 

input[type=text]:focus {
  background-color: orange;
  outline: none;
}
 div {
            padding: 10px 0;
         }
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  <h1> Registration Form</h1> </center>
<hr>
<label> Firstname: </label> 
<input type="text" name="firstname" placeholder= "Firstname" size="15" required /> 
<label> Middlename: </label> 
<input type="text" name="middlename" placeholder="Middlename" size="15" required /> 
<label> Lastname: </label>  
<input type="text" name="lastname" placeholder="Lastname" size="15"required /> 
<div>
<label> 
Course :
</label> 
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label> 
Gender :
</label>
<br>
<input type="radio" value="Male" name="gender" checked > Male 
<input type="radio" value="Female" name="gender"> Female 
<input type="radio" value="Other" name="gender"> Other
</div>
<button type="submit"> </Button>

</form>
</body>  
</html>

输出

浏览器支持

元素	Chrome	IE	Firefox	Opera	Safari
图片按钮	是的	是的	是的	是的	是的

属性

Alt

此属性用于指定备用文本，当图像无法在用户屏幕上显示时，将显示该文本。

Border (边框)

此属性用于指定图像边框。如果将其值设置为 0，则不会显示边框。

高度

此属性用于定义图像高度的像素值。

名称

此属性用于指定图像的名称。

Src

此属性用于指定需要显示为按钮的图像路径。

宽度

此属性用于定义图像宽度的像素值。

下一主题HTML 嵌套表格

HTML 图片按钮

语法

示例

浏览器支持

属性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 图片按钮

语法

示例

浏览器支持

属性

相关帖子

如何运行 HTML 程序

如何保存 HTML 文件

使用 HTML 和 CSS 进行图片滑块

如何创建 HTML 注册表单

HTML 可访问性

HTML Name 属性

点击按钮在表格中添加和删除行

HTML Select Default

如何创建 Discord 机器人

HTML 动画

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器