the Nu html checker complains that

The value of the for attribute of the label element must be the ID of a non-hidden form control.

<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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

While this causes no real issue, it does behave differently than the other labels. If the column is too wide, the button group will be right hand side to the label, while all other labels remain above the input box.

Any idea how I can connect the label select item to the whole group?

CodePudding user response：

The purpose of the label element is to focus/highlight on the associated option when you click on the label, for the most part. There are some accessibility related advantages but I don't think that is your concern. Label is for a single input control and not for multiple controls as you seem to be trying. Refer here for more technical info

Basically, labels are supposed to be attached to a single "input control." Hence the different behaviors. You probably want to use something like fieldset or similar depending on your exact needs but mostly those are for accessibility

CodePudding user response：

You can try wrapping the select item label as a wrapper like below. Tell me if that works. if not we'll find a different solution.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>