是否将引导标签放在复选框下方？
在用户界面设计中，将引导标签（label）放在复选框（checkbox）下方是一种常见的布局方式，尤其适用于长文本标签或者需要强调标签内容的情况。以下是关于这一设计选择的详细解释：
基础概念
- 引导标签（Label）：用于描述输入控件的文本，帮助用户理解控件的用途。
- 复选框（Checkbox）：一种用户界面元素，允许用户在多个选项中选择一个或多个。
优势
- 清晰性：将标签放在复选框下方可以使标签内容更加突出，用户更容易理解每个复选框的用途。
- 布局灵活性：这种布局方式在空间有限的情况下尤为有用，因为它可以避免标签文本过长导致复选框被遮挡。
- 可访问性：对于使用屏幕阅读器的用户，标签放在下方可以提高可访问性，因为屏幕阅读器通常会优先读取标签内容。
类型
- 水平布局：标签和复选框在同一行。
- 垂直布局：标签在复选框下方。
应用场景
- 表单设计：在复杂的表单中，尤其是当标签文本较长时，垂直布局可以提高可读性和用户体验。
- 设置页面：在应用的设置页面中，垂直布局可以帮助用户更好地理解每个选项的含义。
可能遇到的问题及解决方法
- 标签文本过长：如果标签文本过长，可以考虑使用省略号或者换行来处理。
- 标签文本过长：如果标签文本过长，可以考虑使用省略号或者换行来处理。
- 对齐问题：确保标签和复选框在视觉上对齐，可以使用CSS来调整对齐方式。
- 对齐问题：确保标签和复选框在视觉上对齐，可以使用CSS来调整对齐方式。
- 可访问性问题：确保标签和复选框通过
for属性正确关联，以提高可访问性。 - 可访问性问题：确保标签和复选框通过
for属性正确关联，以提高可访问性。
参考链接
通过以上解释，希望你能更好地理解将引导标签放在复选框下方的设计选择及其相关优势和应用场景。
相关·内容
1回答
我希望我的引导复选框标签在它们的复选框下面，如下所示：
我目前的代码是：
<div class="well container-fluid text-center">
<img src="dummy.png" class="img-circle img-responsive" />
</br>
<lable for="check">Lable</lable>
</br>
</br>
<
浏览 3提问于2014-07-15得票数 1
回答已采纳
我使用引导3和带标签的复选框。我成功地让标签在点击时勾掉了复选框，但是周围的按钮设计不允许这个特性。
<div class="btn btn-primary"><form action="link.php" method="post">
<label for="jevattend_id">This is the label</label>
<input type="checkbox" name="jevattend" id=&#
浏览 4提问于2014-06-14得票数 1
回答已采纳
1回答
我目前正在调试一个应用程序，它使用引导HTML和CSS，并将其转换成不同的文档格式。当使用“自定义控件-输入”类对复选框进行样式设置时，将显示复选框，但“选中”属性丢失，而我将得到一个未选中的引导复选框。
我确信应用程序检查是否设置了属性，并正确解析了普通复选框。
我知道，当引导程序以下列方式创建复选框时：
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="default
浏览 2提问于2020-02-21得票数 1
回答已采纳
我想限制InkOverlay在文本框和复选框中的绘制，但我需要在标签中绘制。如何实现这一点。
如果我设置
theInkOverlay.AttachMode =InkOverlayAttachMode.Behind;
它正在应用所有的控件。我需要绘制上面的标签和图片控件。
浏览 3提问于2013-04-08得票数 5
3回答
我想检查javascript中是否选中了引导-多重选择中的复选框。通常使用标签和type=“复选框”属性创建复选框。在这种情况下，我可以用
document.getElementById(id).checked
若要测试复选框是否选中，请执行以下操作。但是在引导-多重选择中，标签是使用的。以下是我的html代码：
<select class="demo" multiple="multiple">
<option id="test_id" value="test_value">test_value&l
浏览 3提问于2015-08-14得票数 0
回答已采纳
2回答
我希望使引导复选框看起来像引导徽章，同时保留复选框功能。我想也许我可以简单地将复选框标签设计成一个徽章，但它不起作用。
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&
浏览 0提问于2021-04-06得票数 2
回答已采纳
我使用一个复选框，如下所示：
<CheckBox Content="Reload Code Table Rules"
IsChecked="{Binding ReloadCodeTableRules, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center" />
当前，如果我单击复选框或标签，选中状态将会更改。是否可以将其限制为仅在选中复选框时更改？
浏览 0提问于2017-07-31得票数 1
1回答
是否有一种方法可以为复选框和带有边框的标签设置样式，以便用户只能看到标签(复选框是隐藏的)，并且当用户单击标签时，标签将更改背景和文本的颜色？此单击还应与单击复选框一样工作。如果有办法，我该怎么做？
或
如何隐藏复选框，只留下标签，进行更改颜色的工作？
浏览 4提问于2013-09-24得票数 2
回答已采纳
日安，
<div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck1"><label class="form-check-label" for="defaultCheck1">Default checkbox</label></div>
如何删除复选框的引导标签上的单击事件？
当前，默认情况
浏览 3提问于2020-06-05得票数 0
回答已采纳
你能像下拉列表一样从sql server查询中填充checkboxlist吗？和autopostback=true？我正在使用vb.net，并有50个复选框，将显示从数据库数据取决于前一个下拉列表的选定值。另外，我是否可以在每次值来自DB时更改复选框的标签？标签应与复选框值相同。
浏览 3提问于2010-01-27得票数 1
3回答
我不能把我的复选框和标签放在同一行上。正确的引导方式是将复选框包装在标签标签中，如下所示-
<li>
<label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label>
</li>
但是我使用的是CMS，它不是这样创建复选框和标签的，而是这样生成的-
<li>
<input type="radio">
<label>She did her bes
浏览 5提问于2017-05-05得票数 4
回答已采纳
我有一个小表单，其中包含两个复选框和一个提交按钮，我希望使用Bootstrap显示该表单。我的每个复选框都有14个选项，标签非常短。我的表单：
$builder
->add('banks', 'entity', array(
'class' => 'AppBundle:Bank',
'property' => 'name',
'multiple&
浏览 1提问于2015-09-25得票数 2
1回答
我在引导3中创建一个表单。希望在它们周围的输入字段和标签看起来比引导在默认情况下要小。
为此，我创建了几个css类。
.input-field {
height: 20px
}
.label-size {
font-size: 10px;
line-height: 1.2;
}
但是，这给复选框的对齐造成了混乱。每个复选框的标签没有与复选框正确地对齐，而且字段的标签(标记)也显示为不对齐。
这是小提琴-
我该怎么纠正呢？
浏览 0提问于2017-06-15得票数 0
回答已采纳
1回答
我有一个复选框，旁边就是图像。我想要能够点击图像，以检查复选框。我发现，这可以通过包装图像和复选框标签标签。
但是，我需要将复选框定位到其他地方，而不是默认的位置。你不知道怎么做吗？
浏览 1提问于2014-08-22得票数 1
回答已采纳
1回答
浮动自举徽章右
、、
我正试着在标签的右边浮动一个引导徽章。但是，我遇到了间距和span在调整大小时使用的元素的问题。
当徽章出现时，我的元素大小似乎发生了很大的变化，它迫使标签在跨度内移动。
<div class="row-fluid" style="padding-top: 10px;">
<div class="span4 text-center">
<span class="tab">
<a class="tab" href="javasc
浏览 2提问于2015-02-18得票数 0
回答已采纳
1回答
我有一个使用jquery操作的段落标记。我有一个复选框列表，每次选中一个新的复选框时都会更改段落的值。我想知道是否有可能将该值传递给控制器。
<script>
$(document).ready(function () {
$('.slectOne').on('change', function () {
$('.slectOne').not(this).prop('checked', false);
let result = $('.r
浏览 0提问于2018-08-07得票数 1
回答已采纳
我知道有.form-inline和.form-horizontal类等，但这就引出了几个问题：
--这些似乎只与标签与其对应的文本字段/复选框的对齐方式有关。这是正确的吗？，我需要创建一个表单，其中包含：，可能有很多字段，将它们对齐到引导12 col网格。
是否需要将每个字段及其标签包装在div中，并为该div提供类名(如span3 )
浏览 2提问于2012-06-04得票数 3
3回答
由于某些原因，复选框没有呈现在我的“敲除”绑定标签旁边。
<div id="test">
<label class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]">
<input id="1" type="checkbox" />
</label>
</div>
视图模式如下：
var vm = {};
vm.repeatDayShortStr = ko.
浏览 7提问于2015-10-24得票数 3
回答已采纳
嗨，我使用的是带有引导带4的Angular8，这里我使用了其中一个屏幕的复选框，所以复选框首先出现，然后标签出现，我需要先给标签，然后给复选框。有人能帮我让它成为可能吗？
HTML：
<div class="row" [formGroup]="userInfoForm">
<div class="col pt-lg-4 max-50">
<label for="" class="font-weight-bold">Permissions</label>
浏览 6提问于2021-03-30得票数 1
回答已采纳
1回答
我遵循课程。计算器正在那里开发。作为第一步，我添加了带有以下约束的标签(显示)-
右尾随空间到Superview
左引导空间到Superview
顶部空间到顶部布局值为8的Guide.Bottom
然后，我应该添加按钮(在我的情况下数字7)，并把它放在左上角，但低于标签。但是它不起作用--当我取下并移动按钮(或屏幕截图中显示的所有按钮)时，就会出现表示左约束的左蓝行，但是没有一行表示标签的底部约束。
哪里出什么问题了？如何将按钮准确地放置在标签下面？
浏览 2提问于2015-02-03得票数 0
2回答
.left-col {
width:25%; }
label {
width:100%;
position:relative; }
input[type="checkbox"] + div::before {
right:-35px !important;
left: auto !important; }
input[type="checkbox"] + div::after {
left: auto !important;
right: -33px !im
浏览 27提问于2018-08-03得票数 0
回答已采纳
我在表单API和AJAX中使用Drupal 8，现在我想将一个自定义CSS类添加到每个复选框标签中，因为我需要使用引导自定义复选框。
PHP (瘦身)：
$form['colors'] = array(
'#type' => 'checkboxes',
'#options' => array('1' => $this->t('Black'), '2' => $this->t('White')),
'#
浏览 0提问于2019-10-18得票数 4
回答已采纳
我正在智能文件中的应用程序中使用Dojo标签和复选框。如果选中了其他复选框，我希望添加特定的行为以取消复选框。我还检查该复选框是否最初被选中，它将取消相同的复选框。(我不想使用单选按钮)
下面是我对一个CheckBox的代码：
<input id="form.cs"
data-dojo-type='dijit.form.CheckBox'
type="checkbox"
data-dojo-props="value:'true', type:'checkbox',
浏览 0提问于2014-03-04得票数 0
2回答
我有一个复选框和两个文本字段。选中该复选框后，将出现两个文本字段(通过jquery代码)。我希望两个标签"First field“和"Second field”与标签"MyCheckbox“对齐，或者以某种方式使两个文本字段标签相对于复选框的级别缩进。这是我的html代码：
<div>
<input type="checkbox" name="mycheckbox"> MyCheckbox
</div>
<div id="mydiv">
<
浏览 0提问于2012-11-11得票数 0
我使用Bootstrap网格系统制作了一个包含复选框的大表单。每个复选框都有自己的.col-xs-*类，以保持对齐和整洁。
问题是，当用户缩小视图时，一些标签会移动到复选框下面，这看起来有点混乱：
为了解决这个问题，我只是让col-*类变得更大(例如，将.col-xs-4更改为.col-xs-5)，或者添加.form-group和.form-control类来创建"checkboxey区域“，但我认为可能会有一个更干净的解决方案。
是否有引导方式来保持这些复选框对齐(当标签的宽度超过col-xs-*容器的宽度时)？
我是否可以使用一些简单的CSS规则将补丁应用于这些表
浏览 2提问于2015-03-10得票数 1
我正在尝试建立一个猜字游戏，我希望用户有多个“字库”可供选择。我正在使用复选框，包装在标签中，用于选择。选中复选框时，我希望在label元素周围放置边框，因为理想情况下，我希望实际复选框隐藏/不显示。
我尝试过在选中时才将边框添加到按钮中，但这不起作用。我还试着在网上寻找解决方案，但我能够找到的大多数解决方案只是在实际的框中添加样式，而不是标签，我希望整个标签周围有边框，这样我就可以隐藏复选框，但仍然指明选择了哪个'bank‘。
<form id="wordBanks">
<label for="perksCheck">P
浏览 1提问于2019-05-29得票数 0
回答已采纳
如何在XHTML中调用onload函数，并且在我的代码中没有body标签。我在前端使用Struts.我需要检查复选框是否在页面加载.According期间被选中，以便我必须更改选中行的颜色.The检查方法应该在JQuery中。如果有人知道答案，请告诉我。
浏览 1提问于2015-01-09得票数 0
3回答
我有一个下拉菜单，其中包含复选框，并且可以一次检查多个。选中复选框时，标签的类被设置为“选中”，然后在取消选中时删除。
选中复选框之前：
<label><input type="checkbox" name="gainlosstypes[]" value="Losses" class="upperFilter">Losses</label>
选中复选框后：
<label class="checked"><input type="checkbox"
浏览 6提问于2013-09-13得票数 0
回答已采纳
我有一个web应用程序，所有的开发都有一个引导主题，现在我想要替换应用程序中的复选框，这些复选框来自mdbootstrap，基本上是一个。
这是否可能只加载CSS中与复选框相关的部分，而不是所有其他部分？
在引导主题中是否有任何其他方法来仅使用材料复选框？
浏览 0提问于2018-08-30得票数 1
回答已采纳
2回答
正如您在下图中所看到的，当浏览器窗口调整大小时，复选框标签可以换行到与其关联的复选框的另一侧。
在上面的图像中，复选框12的标签已经被包裹并且位于屏幕的另一侧。如何才能使每个标签都保留其复选框？
浏览 4提问于2011-04-26得票数 4
回答已采纳
1回答
我使用下面这行代码在div中创建了一些复选框：
for(j=0;j<allActivities.length;j++){
$('#activity_checkboxlist').append('<input type="checkbox" id="checkbox"'+j+' value="'+allActivities[j].activitynumber+'"/>'+allActivities[j].activityname+'<br>
浏览 3提问于2011-11-28得票数 0
回答已采纳
3回答
自举下拉复选框选中
、、、、
我试图用复选框自定义一个引导下拉列表，如果我从下拉列表中选择一个复选框，标签名，我希望在输入下拉列表上写入，用';‘分隔，就像在dropdown关闭时上传的图片中一样。
这是一个。
浏览 5提问于2014-04-16得票数 28
回答已采纳
我们可以在WxPython中更改复选框文本的背景色吗？我希望方框+附加文本的整个区域处于特定的颜色。
checkbox = wx.CheckBox(self.panel, -1, 'Label', (5, 5)
因此，目标是更改复选框和标签的背景颜色。
Checkbox.SetBackgroundColour(‘蓝色’)只会将复选框的方格更改为蓝色，但除了那个(包括标签的背景)，我想要所有的东西。
浏览 0提问于2013-05-13得票数 1
回答已采纳
我有一个ListView.builder，它返回一个复选框及其标签。此列表视图将返回将显示在屏幕上的复选框和标签列表。目前，我只是创建一个全局变量isChecked，并使用onChanged回调和这个值更改复选框的值。但是它改变了屏幕上所有复选框的值。
我需要一种方法来单独处理每个复选框，而不修改其他复选框值。同时对勾选的复选框进行计数。为此，我使用了一个校验小部件。
浏览 2提问于2020-11-28得票数 3
回答已采纳
我在Orbeon4.8中创建了一个“可滚动复选框”。复选框包含标签为字符串，值为Integer.How以验证复选框？
如果用户选择(选中)超过3个选项，那么它抛出一个错误，表单不应该是save.If，用户选择(选中)，少于3个选项或没有，那么表单应该保存。
有些人帮助我验证上面的“可滚动复选框”。
浏览 2提问于2015-09-29得票数 0
回答已采纳
5回答
使用Bootstrap版本2.3.2，我有一个表单布局，类似于下面的图像，而且由于复选框有一个内联标签，因此存在对齐问题。
向input[type="checkbox"]添加页边距只会给复选框留出页边距，而不是内联标签。如何使复选框及其标签垂直对齐其旁边的文本字段？
这是，如果您感兴趣的话。
浏览 4提问于2013-10-11得票数 14
回答已采纳
1回答
我想测试一个没有标签的复选框。关键是还有其他复选框，所以我不能使用getByRole。
我试过用数据，但很明显，它不起作用。
如何检查是否选中了该复选框(toBeChecked())？
<Checkbox
data-testid={item?.id}
key={item?.id}
id={item?.id.toString()}
color="secondary"
checked={item?.checked}
disabled={hasAll}
onChange={(e: React.ChangeEvent<HTMLInputEleme
浏览 2提问于2022-04-05得票数 0
回答已采纳
如何通过标签属性显示带有链接的react引导复选框标签？
<Form.Check className='checkbox-custom'
label="I agree to the {<a href={url}>terms and conditions</a>}"
name="group1"
type={type}
id={`inlin
浏览 3提问于2022-05-30得票数 0
如何缩小标签和复选框组之间的差距。我可以看到第一个复选框得到一个margin-top:10px，但我不知道如何优雅地处理它，或者更好地说，保持在引导领域.。
请注意，今后我将动态添加复选框。
浏览 0提问于2017-04-10得票数 0
回答已采纳
2回答
我试图利用标签标签中复选框上的引导“表单控制”类，以便单击文本也会检查textbox。
下面是JSFiddle：
控件的HTML是：
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control"
浏览 3提问于2015-02-11得票数 3
回答已采纳
在引导窗体中，复选框显示在右边，标签出现在左边。如何在标签下对齐复选框？
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-row">
<div class="form-group col-md-2">
<label for="isNewPrice&#
浏览 0提问于2018-04-11得票数 0
回答已采纳
1回答
我有以下视图，这是复选框的标准引导程序，输入位于标签内
<div class="checkbox">
<label ng-bind-html="vm.trustedHtml">
<input type="checkbox" ng-model="vm.isAcknowledged">
</label>
</div>
我需要绑定包含html的trustedHtml属性，在label.But上这个指令完全替换标签的内容，包括可以避免它的inpu
浏览 0提问于2018-09-11得票数 0
回答已采纳
3回答
语义UI，定位标签
、、、
我在语义UI中使用了一个复选框。我想切换标签和输入的位置，但这被证明是一种痛苦。我正在使用切换复选框。
<div class="ui toggle checkbox">
<input id="privacy" type="checkbox" checked="checked">
<label for="privacy">Public</label>
</div>
语义UI复选框文档在此处：
如果我在html中切换输入和标签，切换功能将停止工作。我甚
浏览 2提问于2014-08-18得票数 1
回答已采纳
每个jQgrid行都有多个复选框，因此我不能使用(仅) multiselect。
列是这样设置的..。
{ name：'ColName'，标签：''，宽度: 50，可编辑:真，可排序: false，编辑类型：“复选框”，格式化程序：‘复选框’，格式选项：{禁用:假}，索引：“my_checkbox”，编辑选项：{值：“是”：“否”}}
当我单击标题中的复选框时，标题将在没有选中的情况下重新绘制。我可以捕获事件，但不能向用户显示检查。
因此，我的问题是，如何使复选框在标头标签内正常工作，或者如何实现多个多选择。
浏览 3提问于2010-11-11得票数 10
回答已采纳
我有一个HTML标签和HTML输入复选框，我需要一个焦点流和模糊事件，当我点击标签时，它的行为是正确的。
(在真正的应用程序中，有一个引导组件因为样式的原因隐藏了输入-所以交互不是与复选框本身，而是与标签样式为复选框(复选框本身是不可见的，opacity=0)。
问题是，当我单击标签时，真正的复选框会丢失焦点(1) (如果它以前有焦点)，然后它再次获得焦点(2)。因此，它产生了几个事件，模糊和焦点。我要除掉他们。这种情况只发生在单击标签时。
我不明白为什么会出现这种情况，因为标签不应该是可聚焦的。
示例：
<label for="checkbox">Click
浏览 9提问于2022-08-15得票数 1
回答已采纳
2回答
我使用了引导DataTable来显示数据。同时，我有一个HTML复选框作为该dataTable的列。我有一个提交按钮，以获得所选复选框的值来做一些事情。在搜索中选择复选框时，我正在获取以下问题。
当我选择所有复选框并单击保存按钮时，我得到了所有的值。这是我的期望。
但是，当我通过引导dataTable.Here的内置搜索框进行搜索时，意外地发生了图像视图。
在本例中，当我按下Save时，我只得到了两个值，尽管所有其他值仍然被选中。如何在搜索时获得所有选定的值
以下是获取复选框值的保存按钮的jquery代码
$("#btnSave").click(functi
浏览 7提问于2016-06-12得票数 2
回答已采纳
1回答
Visual设计器允许您很好地组合文本框、列表框、按钮等。但是，带有CheckAlign=MiddleRight的复选框的工作方式与其他复选框不同，因为它有两个组件:内置标签和复选框本身。如果将文本与其他标签对齐，则复选框将保持浮动，不会自动对齐。您可以关闭AutoSize并尝试调整CheckBox控件的大小，以使复选框排成一行，但这很敏感，并且会被自定义字体大小抛出。
在本例中，我几乎将复选框与其他控件排列在一起，但并不完全是这样：
如果我有几个复选框，这将是一个真正令人头痛的问题，因为当AutoSize关闭时，复选框的位置相对于文本结束，因此每个控件都必须逐个像素大小。
将复选框
浏览 5提问于2015-04-09得票数 3
我正在尝试为一个复选框获取两个标签，如Twitter Bootstrap文档中所描述的那样。(参见 ->水平窗体->复选框(文本输入下面))
所以我想要显示的是左边描述的标签，复选框本身，右边的提示。
simple_form gem中twitter引导程序的标准实现创建了一个<p>标记，用于显示提示，因为它试图对所有类型的输入保持一致。
现在，我想在simple_form初始化器中为“引导复选框”创建一个自定义包装器，但我不知道如何解决这个问题。
这就是我目前使用裸rails (Erb)实现它的方式：
<div class="control-group&#
浏览 5提问于2012-06-11得票数 4
回答已采纳
1回答
我有多个复选框可点击，但我想要点击标签“白金卡”旁边的立即复选框。当前，下面的xpath单击不在白金卡旁边的第一个复选框
By.xpath("//span[contains(text(),'Platinum Card')]//preceding::input[@type='checkbox']")
浏览 7提问于2017-08-13得票数 0
我有一个要显示的复选框列表，并且我正在使用Twitter Bootstrap。我的问题是，当我访问移动站点时，标签的文本覆盖了复选框本身。现在，我有了以下代码，文本与复选框重叠。会出什么问题呢？
<ul class="nav nav-list"> <li><label class="checkbox"><input type="checkbox" value="89" name="[14].Answer.SelectedAnswers">Biologie</la
浏览 0提问于2013-10-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
