[Html-widget] Radio button group

[Carl Franks]

On 25/09/06, A. Pagaltzis <pagaltzis at gmx.de> wrote:
> No, with a FIELDSET, à la

d'oh!
Of course, thanks.
It brings up a few problems though, so I think I'm going to have to
add a couple more class definitions, and change the example CSS file
supplied.

This is an example of the current markup.
Note that it includes a label, a comment, and an error.

  <label class="labels_with_errors" id="w_f_label">
    My Label
    <span class="label_comments" id="w_f_comment">
      My Comment
    </span>
    <span>
      <label for="w_f_1" id="w_f_1_label">
        <input class="radio" id="w_f_1" name="bar" type="radio" value="0" />
        false
      </label>
      <label for="w_f_2" id="w_f_2_label">
        <input checked="checked" class="radio" id="w_f_2" name="bar"
type="radio" value="1" />
        true
      </label>
    </span>
  </label>
  <span class="error_messages" id="w_f_errors">
    <span class="in_errors" id="w_f_error_in">
      Invalid Input
    </span>
  </span>

It's not as simple as changing the 'label' for a 'fieldset', because
we need to be able to target the fieldset with the same css as the
labels, so that it will style/align the same.
To solve this I've given the fieldset the classname 'radiogroup'.
This means the css definition "label { }" needs to change to "label,
.radiogroup { }".

This then brings up the problem of handling errors. Currently, if
there's an error, the 'label' is given the class 'labels_with_errors'.
We're already using the fieldset class, so instead, if there's errors
I'll wrap the fieldset in a span with the classname
'labels_with_errors'.
This means "display: block" needs to be added to the
".labels_with_errors { }" style.

We also don't want the RadioGroup's fieldset to be styled the same way
as other fieldsets, so I'll give all other fieldsets the classname
'widget_fieldset', and change the css "fieldset { }" to
".widget_fieldset { }".

It also really messes up the display if the RadioGroup's label is put
in a 'legend' tag, so by default I'll leave it as plain text, and
provide a new legend() accessor in case you explicitly want to set a
legend.

Lastly, to solve the OP's problem, the span immediately surrounding
the radio buttons will be given the classname 'radiogroup_buttons', so
if you want the buttons to align horizontally, you just need to do
".radiogroup_buttons label { display: inline }"

Below is an example of the suggested markup.
Any suggestions / problems?

  <span class="labels_with_errors" id="w_f">
    <fieldset class="radiogroup">
      <span class="radiogroup_label" id="widget_fs_foo_label">
        My Label
      </span>
      <span class="label_comments" id="w_f_comment">
        My Comment
      </span>
      <span class="radiogroup_buttons">
        <label for="w_f_1" id="w_f_1_label">
          <input class="radio" id="w_f_1" name="bar" type="radio" value="0" />
          false
        </label>
        <label for="w_f_2" id="w_f_2_label">
          <input checked="checked" class="radio" id="w_f_2" name="bar"
type="radio" value="1" />
          true
        </label>
      </span>
    </fieldset>
  </span>
  <span class="error_messages" id="w_f_errors">
    <span class="in_errors" id="w_f_error_in">
      Invalid Input
    </span>
  </span>