Good HTML and CSS to use with <input type="radio">?

Question

What's the best way to use <input type="radio"> in HTML?

I'm looking for HTML that's semantically good, whose formatting is configurable via CSS.

I want to be able to style/render it to look something like:

    Car: (o) Yes
         (X) No
         (o) Maybe

  Train: (o) Yes
         (o) No
         (X) Maybe

Address: [An input text box     ]

Thinking of the CSS, I think that I'd like the labels on the left (e.g. "Car" and "Bus") to be in some kind of text-align: right block?

I don't know about the radio buttons on the right: in some kind of <span> perhaps, with "display: inline-block"? Or "white-space: pre"?

What kind of block-level tags (e.g. <p> or <div>) and/or other tags (e.g. <span> or <br/>) would you recommend?

---

Edit:

How about the following.

HTML uses <legend>, like HTML is supposed to and as recommended in the alistapart article:

<fieldset>
<legend>Car</legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>

To make it easer for Firefox to access/position the contents of the <legend>, place it within a <span>:

<fieldset>
<legend><span>Car</span></legend>
<label><input type="radio" name="car" value="yes"/> Yes</label>
<label><input type="radio" name="car" value="no"/> No</label>
<label><input type="radio" name="car" value="maybe"/> Maybe</label>
</fieldset>

Then, use the browser-specific CSS described in Legends of Style Revised to position the contents of the span to left of the fieldset.

Does the CSS really have to be so complicated and browser-specific? What's the simplest CSS which ought theoretically to work, instead of the more-complicated CSS required to actually work with those imperfect browsers? If <legend> is hard to position then what's a good (semantic) alternative?

Answer 1

Mmmm.... Car and Train should definitely be <label>s. Check out this classic A List Apart article for a really nice example: Prettier Accessible Forms

As for the radio button labels: Good question! I'd say <label> s again, but a <span> would do as well.

Answer 2

This is what I usually do with my radio buttons and checkboxes. It allows the associated text to be clickable in most browsers without having to do any work, which makes the form a little easier to use. The CSS cursor change helps to alert the user to this feature.

CSS

label { cursor: pointer; }

HTML

<label><input type="radio" name="option" value="yes"> Yes</label>
<label><input type="radio" name="option" value="no"> No</label>
<label><input type="radio" name="option" value="maybe"> Maybe</label>

Alternatively, use a fieldset legend for cars and a ul for the list of radio buttons:

<fieldset>
    <legend>Cars</legend>
    <ul class="radio-list">
        <li><label><input type="radio" name="option" value="yes"> Yes</label></li>
        <li><label><input type="radio" name="option" value="no"> No</label></li>
        <li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
    </ul>
<fieldset>

CSS

.radio-list li { list-style: none; }

Stylizing a fieldset/legend to be consistent across browsers isn't too difficult; however, it does require one IE conditional if you want a border around the legend. The only extra HTML that is necessary is a wrapper span within the legend.

CSS

<style>
    fieldset {
        position: relative;
        border: 1px solid #000;
        background: #f8f8f8;
        padding: 1.6em 10px 0px;
        margin: 0;
    }
    legend {
        position: absolute;
        font-weight: bold;
        font-size: 1.2em;
    }
    legend span {
        position: absolute;
        top: -1.1em;
        white-space: nowrap;
    }

    /* This isn't necessary, just here for list aesthetics */
    ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
</style>

<!--[if IE]>
    <style>
    legend {
        border-bottom: 1px solid #000;
    }
    </style>
<![endif]-->

HTML

<fieldset>
    <legend><span>Did you enjoy your SO experience?</span></legend>
    <form>
        <ul>
            <li><label><input type="radio" name="option" value="yes"> Yes</label></li>
            <li><label><input type="radio" name="option" value="no"> No</label></li>
            <li><label><input type="radio" name="option" value="maybe"> Maybe</label></li>
        </ul>
    </form>
</fieldset>

That's about as simple as I can get it. Live example

Answer 3

css: (ugly class names need to be changed)

p.radio { height: 4em; }
label.top {
  display: block;
  width: 4em; /* or something else */
  float: left;
  text-align: right;
  padding-right: 1em;
  height: 4em;
}

html:

<p class="radio">
  <label class="top" for="car">Car:</label>
  <input type="radio" value="yes" name="car" id="car_y" />
  <label for="car_y">Yes</label><br />
  <input type="radio" value="no" name="car" id="car_n" />
  <label for="car_n">No</label><br />
  <input type="radio" value="maybe" name="car" id="car_m" />
  <label for="car_m">Maybe</label><br />
</p>

EDIT: didn't see the other answer. Using a fieldset instead of a paragraph and legend for the "top-level" label seems to be a good idea IMO.

EDIT2: according to comments, and I agree, using a list would be cleaner here. The new version would be :

css:

fieldset {
  border: 0;
  padding: 0;
}
legend {
  padding: 0 0.5em 0 0;
  margin: 0;
  display: block;
  width: 3.5em;
  float: left;
  text-align: right;
}
ul {
  margin: 0;
  padding: 0 0 0 4em;
}
ul li {
  list-style-type: none;
  list-style-position: outer;
}

html:

<fieldset>
  <legend>Car:</legend>
  <ul>
    <li>
      <input type="radio" value="yes" name="car" id="car_y" />
      <label for="car_y">Yes</label>
    </li>
    <li>
      <input type="radio" value="no" name="car" id="car_n" />
      <label for="car_n">No</label>
    </li>
    <li>
      <input type="radio" value="maybe" name="car" id="car_m" />
      <label for="car_m">Maybe</label>
    </li>
  </ul>
</fieldset>

That would be much more elegant. But even with display:block firefox doesn't seem to want to set the width of a legend element. Strange bug.

Answer 4

I'll use <fieldset>.

The difficulty with positioning a <label> in different browsers is described in the "Legends of Style Revised" article; so instead of using a <label> and trying to position it, I might use a <span class="label"> outside the <fieldset>.