Хороший HTML и CSS для использования с <входной тип = “радио”>?

Это то, что я обычно делаю с радиокнопками и флажками. Это позволяет сделать связанный текст кликабельным в большинстве браузеров без необходимости выполнять какую-либо работу, что делает форму немного проще в использовании. Изменение CSS cursor помогает предупредить пользователя об этой возможности.

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>

В качестве альтернативы используйте fieldset легенду для автомобилей и ul для списка радиокнопок:

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

Стилизация fieldset/legend для согласованности в браузерах не слишком сложна; однако она требует одного условия IE, если вы хотите, чтобы вокруг legend была граница. Единственный дополнительный HTML, который необходим, это обертка span внутри 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>

Это настолько просто, насколько я могу это сделать. Живой пример

Мммм .... Автомобиль и Поезд определенно должны быть s. Посмотрите эту классическую статью A List Apart, чтобы увидеть действительно хороший пример: Prettier Accessible Forms

Что касается меток радиокнопок: Хороший вопрос! Я бы снова сказал s, но также подойдет .

css: (необходимо изменить уродливые имена классов)

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: не видел другого ответа. Использование набора полей вместо абзаца и легенды для метки «верхнего уровня» кажется хорошей идеей, ИМО.

РЕДАКТИРОВАТЬ2: согласно комментариям, и я согласен, использование списка было бы здесь чище. Новая версия будет выглядеть так:

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>

Это было бы намного элегантнее. Но даже с display: block firefox, похоже, не хочет устанавливать ширину элемента легенды . Странный баг.