Хороший HTML и CSS для использования с <input type = "radio">?

Question

Какой лучший способ использовать <input type="radio"> в HTML?

Я ищу семантически хороший HTML, форматирование которого можно настроить с помощью CSS.

Я хочу иметь возможностьстиль / визуализация это выглядит примерно так:

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

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

Address: [An input text box     ]

Думая о CSS, я думаю, что я хотел бы, чтобы надписи слева (например, "Автомобиль" и "Автобус") были в некотором родеиз text-align: right блока?

Я не знаю о переключателях справа: в каком-то <span>, возможно, с "display: inline-block"?Или "white-space: pre"?

Какой тип тегов уровня блока (например, <p> или <div>) и / или другие теги (например, <span> или <br/>) вы бы порекомендовали?

---

Редактировать:

Как насчет следующего.

HTML использует <legend>, как предполагается в HTML, и как рекомендуется в Статья alistapart :

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

Чтобы Firefox упростил доступ к содержимому <legend> и поместил его в <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>

Затем используйте специфичный для браузера CSS, описанный в Legends of Style Revised , чтобы расположить содержимое диапазона слева от набора полей.

Действительно ли CSS должен быть настолько сложным и браузерным-конкретный?Какой простейший CSS, который теоретически должен работать, вместо более сложного CSS, необходимого для работы с этими несовершенными браузерами?Если <legend> трудно позиционировать, тогда какова хорошая (семантическая) альтернатива?

Answer 1

Это то, что я обычно делаю с моими переключателями и флажками.Это позволяет ассоциировать текст с возможностью кликабельности в большинстве браузеров без необходимости выполнять какую-либо работу, что делает форму немного проще в использовании.Изменение 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>

.Я могу заполучить это. Живой пример

Answer 2

Я буду использовать <fieldset>.

Сложность позиционирования <label> в разных браузерах описана в статье " Legends of Style Revised "; поэтому вместо использования <label> и попытки его позиционирования я мог бы использовать <span class="label"> вне <fieldset>.

Answer 3

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>

РЕДАКТИРОВАТЬ: не видел другой ответ. Использование набора полей вместо абзаца и легенды для метки «верхнего уровня» кажется хорошей идеей ИМО.

РЕДАКТИРОВАТЬ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, похоже, не хочет устанавливать ширину legend элемента. Странная ошибка.

Answer 4

Мммм ... Car и Train определенно должны быть <label> с.Посмотрите эту классическую статью A List Apart для действительно хорошего примера: Более привлекательные формы для доступа

Что касается ярлыков переключателей: хороший вопрос!Я бы сказал <label> с снова, но <span> тоже подойдет.