html选项图片的按钮代码
时间: 2023-08-13 07:06:04 浏览: 63
以下是一个基本的 HTML 选项图片按钮代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>选项图片按钮</title>
</head>
<body>
<form>
<fieldset>
<legend>选择您喜欢的水果:</legend>
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple"><img src="apple.jpg" alt="苹果"></label>
<br>
<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana"><img src="banana.jpg" alt="香蕉"></label>
<br>
<input type="radio" id="orange" name="fruit" value="orange">
<label for="orange"><img src="orange.jpg" alt="橙子"></label>
<br>
</fieldset>
</form>
</body>
</html>
```
在这个示例中,我们使用了一个表单元素,并在该表单元素中使用了一个字段集合元素。每个选项都由一个单选框元素和一个标签元素组成,标签元素包含了一个图片元素。单选框元素的 `id` 属性应该与相应的标签元素的 `for` 属性相匹配,以便在单击标签元素时选择相应的单选框元素。在这个示例中,每个单选框元素都具有一个 `value` 属性,该属性将在提交表单时与服务器端代码一起使用。