Html 复选框:如何显示文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14358440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:59:34  来源:igfitidea点击:

Checkbox: how to display text?

htmlcss

提问by Geethanga

I want to display the related text of the checkbox along with it.

我想连同它一起显示复选框的相关文本。

<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>

This is the most used markup to do that. But it doesn't feel good to use a separate spanfor the check box. And it doesn't even look good in a form.

这是最常用的标记来做到这一点。但是span对复选框单独使用感觉不太好。它甚至在形式上看起来都不好看。

Is there a way to relate these two with each other? Or what is the best way to do this?

有没有办法将这两者相互联系起来?或者最好的方法是什么?

回答by Liam

use a Labeland the forattribute.

使用 aLabelfor属性。

The for attribute specifies which form element a label is bound to

for 属性指定标签绑定到哪个表单元素

<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>

Also give your input a name

也给你的输入 name

回答by Roman

Instead of using forattribute you can use the nested <input type="checkbox">:

for您可以使用嵌套的而不是使用属性<input type="checkbox">

<label><input name="Checkbox1" type="checkbox">Admin User</label>

回答by Veger

Instead of using <span>you can use the <label>-tag:

<span>您可以使用<label>-tag代替使用:

<label for="Checkbox1">Admin User</label>

It will 'attach' the label to your checkbox in a sense that when the label is clicked, it is as if the user clicked the checkbox.

从某种意义上说,它会将标签“附加”到您的复选框,当单击标签时,就好像用户单击了复选框。

For the styling, you need to apply your own styles to make them look 'together' yourself.

对于样式,您需要应用自己的样式,使它们看起来“在一起”。