HTML教程-HTML 图像按钮
在 HTML 文档中，可以使用 <input> 元素的 type 属性来创建图像按钮。图像按钮的功能与提交按钮相同，唯一的区别在于你可以将自己选择的图像作为按钮。
语法
<input type="image" name="图像按钮的名称" src="图像文件的路径" border="指定图像边框" alt="文本">示例
示例 1：此示例用于在不使用 CSS 的情况下指定图像按钮。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of image button</title>
<style>
/* 以下标签选择器 body 使用 font-family 和 background-color 属性来设置页面的字体和背景颜色 */
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* 以下 container 类用于生成其周围的空白空间，并使用 background-color 属性指定浅蓝色为背景颜色 */
.container {
padding: 50px;
background-color: lightblue;
}
/* 以下标签选择器 input 使用不同的属性来指定文本字段 */
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>
<!-- 以下 input 标签使用 type 属性指定图像，并使用 src 属性指定图像路径，使用 height 和 width 属性指定高度和宽度 -->
<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">
</div>
</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>
/* 以下标签选择器 body 使用 font-family 和 background-color 属性来设置页面的字体和背景颜色 */
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* 以下 container 类用于生成其周围的空白空间，并使用 background-color 属性指定浅蓝色为背景颜色 */
.container {
padding: 50px;
background-color: lightblue;
}
/* 以下标签选择器 input 使用不同的属性来指定文本字段 */
input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* 以下标签选择器 button 使用不同的属性来指定网页上的图像按钮 */
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>
</div>
</form>
</body>
</html>输出：
浏览器支持
| 元素 |  Chrome |  IE |  Firefox |  Opera |  Safari |
|---|---|---|---|---|---|
| 图像按钮 | 是 | 是 | 是 | 是 | 是 |
属性
Alt:
此属性用于指定当图像无法在用户屏幕上显示时要显示的替代文本。
Border:
此属性用于指定图像边框。如果将其值设置为 0，则不会显示边框。
Height:
此属性用于定义图像的高度（以像素为单位）。
Name:
此属性用于定义图像的名称。
Src:
此属性用于指定图像路径，图像将作为按钮显示。
Width:
此属性用于定义图像的宽度（以像素为单位）。
