Why are the labels for two different form elements so different? Can I make them the same?

Question

I created a webform that has one textfield and two radio button fields.

When displaying, the textfield label is themed correctly, but the radio button labels are not.

When I look at the tags and classes, the texfield label has a "label" tag with "control-label" class like this

<label for="textfield1" class="control-label">Textfield label</label>

but the radio labels have "span" tags with "fieldset-legend" class, inside "legend" tags, like this

<legend>
    <span class="fieldset-legend">Radio element question</span>
  </legend>

Why are they different? Can I ake them the same, or is add a CSS style to make the span.fieldset-legend match the label.control-label the only way to make them the same?

I am using the Bootstrap 3 theme and I enabled the webform-bootstrap module.

Answer 1

The differences here come down to the differences in the two types of form elements.

From the MDN docs for the label element:

The HTML element represents a caption for an item in a user interface

From the MDN docs for the legend element:

The HTML element represents a caption for the content of its parent .

Looking at the example from the legend documentation, we see how the two types of elements, labels and legends, are semantically different.

<fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
</fieldset>

Each radio button has its own label element with text describing it. Meanwhile, the set of radio buttons is wrapped in a fieldset with a legend element to describe the group as a whole.

While you may be able to alter the markup for your radios, to replace the legend element with a label, you should not, especially if you're trying to build an accessible website (and you should be). This answer to Is it good practice to use for non-input/non-interactive elements? provides a more detailed explanation for why you shouldn't use a label in a context like this.