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

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

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.

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.