Login

Changes to radio buttons and check boxes in XForms

Versions: 4.61, FAQ number: 161, Old FAQ number: 8298

The output for radio buttons and check boxes in XForms have been changed in 4.61. These controls now create a fieldset-tag around the input controls and a legend tag is added to the fieldset if a heading has been specified. As the fieldset tag has a default style in most browsers you might want to specify a specific default style for this element to make the form look as as it did before if you have upgraded to 4.61. The 4.61 templates does this to ensure that the form looks about the same in most major browsers. Here is an example of how the html output can look like:

<fieldset>
       <legend>Vote</legend>
       <input type="radio" value="Really great" title="Vote" name="ctl2" id="ctl2Really_great" />
       <label for="ctl2Really_great">Really great</label><br />
       <input type="radio" value="Good" title="Vote" name="ctl2" id="ctl2Good" />
       <label for="ctl2Good">Good</label><br />

</fieldset>

Here is an example of how you can style your elements in a css style sheet:

fieldset
{
 border: none;
 padding: 0;
 margin: 0;
}
legend
{
 color: #333;
 font-size: 1em;
 padding: 0;
 margin: 0;
}
fieldset label
{
 margin-right: 1em;
}

EPiTrace logger