在HTML表单中显示图片是一种常见的需求，尤其是在需要用户上传图片或者展示图片选项的场景下，本文将详细介绍如何在HTML表单中插入图片，并通过实例进行演示。
我们需要了解HTML表单的基本结构，一个简单的HTML表单包含一个<form>标签，用于包含表单元素，表单元素可以是文本输入框、下拉列表、单选按钮、复选框等，而在我们的案例中，我们将使用<input>标签的type="image"属性来实现图片的显示。
以下是一个简单的HTML表单，包含一个文本输入框和一个图片按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表单显示图片示例</title>
</head>
<body>
<form action="/submit-form" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<input type="image" src="submit.png" alt="提交按钮" width="100" height="50">
</form>
</body>
</html>
在这个示例中，我们创建了一个包含用户名输入框的表单，接下来，我们使用<input>标签的type="image"属性来插入一个图片按钮。src属性指定了图片的路径，alt属性为图片提供了替代文本，以便在图片无法显示时提供信息。width和height属性用于设置图片的宽度和高度。
当用户点击这个图片按钮时，表单将被提交到指定的action属性URL，在这个例子中，表单将提交到/submit-form路径。method属性指定了表单提交的HTTP方法，这里我们使用了post方法。
我们还可以通过CSS对表单元素进行样式设置，以使其更符合我们的设计需求，我们可以为图片按钮添加边框、背景色等样式：
input[type="image"] {
border: 1px solid #000;
background-color: #f0f0f0;
cursor: pointer;
}
在实际应用中，我们可能会遇到需要显示图片选项的表单，这时，我们可以使用<img>标签来插入图片，并将其与表单元素（如<input>标签）关联，以下是一个包含图片选项的表单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表单图片选项示例</title>
<style>
img {
width: 100px;
height: auto;
cursor: pointer;
}
</style>
</head>
<body>
<form action="/select-image" method="post">
<label>选择图片：</label>
<input type="radio" id="image1" name="image" value="image1">
<label for="image1"><img src="image1.jpg" alt="图片1"></label>
<input type="radio" id="image2" name="image" value="image2">
<label for="image2"><img src="image2.jpg" alt="图片2"></label>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，我们创建了一个包含图片选项的表单，每个图片选项由一个<input>标签的type="radio"属性和一个<img>标签组成，用户可以选择一个图片选项，然后点击提交按钮，表单将提交所选图片的值到指定的action属性URL。
通过以上示例，我们可以看到在HTML表单中显示图片的方法，无论是作为提交按钮还是图片选项，图片都可以为表单增色添彩，提高用户体验。