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

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