Question

对于可以选择或取消选择的图像，语义正确的HTML（HTML 5）标记是什么，并且应该在表单中表现为复选框。从语义上讲，图像不仅仅是复选框的样式，而是选择的实际对象。

Answer 1

我会将图片和复选框都放在label元素中：

<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>

这样您可以将图像与复选框相关联，激活图像将切换复选框的状态。

您也可以隐藏该复选框，并根据选中情况使用:selected + img设置图像样式。

label {
  float: left;
  clear: left;
}
label > input {
  opacity: 0;
}
label > img {
  opacity: .4;
  cursor: pointer;
}
label > :checked + img {
  opacity: 1;
}

<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>
<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>
<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>
<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>

语义正确的html for image复选框

1 个答案: