Nu html 檢查器抱怨說
label元素的for屬性值必須是非隱藏表單控制元件的ID。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="form-group col-md-12">
<label for="aptmt">select item</label> <!-- ERROR -->
<div class="btn-group btn-group-sm" id="aptmt" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check " name="apt" id="btnradio1" value="0">
<label class="btn " for="btnradio1">both</label>
<input type="radio" class="btn-check " name="apt" id="btnradio2" value="2">
<label class="btn " for="btnradio2">upper</label>
<input type="radio" class="btn-check " name="apt" id="btnradio3" value="1">
<label class="btn " for="btnradio3">lower</label>
</div>
</div>
</div>雖然這不會導致真正的問題，但它的行為與其他標簽不同。如果列太寬，按鈕組將位于標簽的右側，而所有其他標簽則保留在輸入框上方。
知道如何將標簽連接select item到整個組嗎？
uj5u.com熱心網友回復：
大多數情況下，標簽元素的目的是在您單擊標簽時聚焦/突出顯示相關選項。有一些與可訪問性相關的優勢，但我認為這不是您關心的問題。Label 用于單個輸入控制元件，而不是您似乎正在嘗試的多個控制元件。請參閱此處了解更多技術資訊
基本上，標簽應該附加到單個“輸入控制元件”上。因此不同的行為。您可能希望fieldset根據您的確切需求使用類似或類似的東西，但大多數都是為了可訪問性
uj5u.com熱心網友回復：
您可以嘗試將選擇的專案標簽包裝為如下所示的包裝器。告訴我這是否有效。如果沒有，我們會找到不同的解決方案。
https://www.w3schools.com/tags/tag_fieldset.asp
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="form-group col-md-12">
<fieldset>
<legend for="aptmt">select item </legend> <!-- ERROR -->
<div class="btn-group btn-group-sm" id="aptmt" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check " name="apt" id="btnradio1" value="0">
<label class="btn " for="btnradio1">both</label>
<input type="radio" class="btn-check " name="apt" id="btnradio2" value="2">
<label class="btn " for="btnradio2">upper</label>
<input type="radio" class="btn-check " name="apt" id="btnradio3" value="1">
<label class="btn " for="btnradio3">lower</label>
</div>
</fieldset>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/337050.html
標籤：html 形式 推特引导 bootstrap-4
下一篇：為什么我的評級是反向的？