<input type="radio"> HTML-атрибут value

Элементы <input> типа radio обычно используются в группах переключателей — наборах переключателей, описывающих связанные варианты выбора.

В группе одновременно можно выбрать только один переключатель. Обычно переключатели отображаются в виде небольших кругов, которые при выборе заполняются или подсвечиваются.

Попробуйте

<fieldset>
  <legend>Select a maintenance drone:</legend>

  <div>
    <input type="radio" id="huey" name="drone" value="huey" checked />
    <label for="huey">Huey</label>
  </div>

  <div>
    <input type="radio" id="dewey" name="drone" value="dewey" />
    <label for="dewey">Dewey</label>
  </div>

  <div>
    <input type="radio" id="louie" name="drone" value="louie" />
    <label for="louie">Louie</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Их называют переключателями, потому что по внешнему виду и принципу действия они напоминают кнопки на старых радиоприёмниках, например на изображённом ниже.

Значение

Атрибут value — это строка, содержащая значение переключателя. Пользовательский агент пользователя никогда не показывает это значение. Вместо этого оно используется для определения выбранного переключателя в группе.

Определение группы переключателей

Группа переключателей определяется тем, что каждому переключателю в группе задаётся одинаковое значение name. После создания группы выбор любого переключателя автоматически снимает выбор с уже выбранного переключателя в той же группе.

На странице может быть сколько угодно групп переключателей, если у каждой из них уникальное значение name.

Например, если в форме нужно спросить у пользователя предпочтительный способ связи, можно создать три переключателя, каждому из которых задать свойство name со значением contact, но одному указать значение email, другому — phone, а третьему — mail. Пользователь не видит ни value, ни name (если только вы явно не добавите код для их отображения).

В результате получится такой HTML:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Здесь представлены три переключателя, каждому из которых задано значение name — contact, а также уникальное значение value, однозначно идентифицирующее этот переключатель в группе. Кроме того, у каждого есть уникальный id, который используется атрибутом for элемента <label> для связывания меток с переключателями.

Попробуйте этот пример:

Представление данных группы переключателей

Когда приведённая выше форма отправляется с выбранным переключателем, данные формы содержат запись в формате contact=value. Например, если пользователь нажмёт переключатель «Телефон», а затем отправит форму, данные формы будут содержать строку contact=phone.

Если в HTML не указать атрибут value, отправленные данные формы назначат группе значение on. В этом случае, если пользователь выберет вариант «Телефон» и отправит форму, в результате получится contact=on, что бесполезно. Поэтому не забывайте задавать атрибуты value!

Довольно редко бывает нужно разрешать отправку формы без выбора одного из переключателей группы, поэтому обычно разумно задать для одного из них состояние checked по умолчанию. См. раздел Выбор переключателя по умолчанию ниже.

Добавим в пример немного кода, чтобы изучить данные, создаваемые этой формой. HTML изменён: в него добавлен блок <pre>, в который будут выводиться данные формы:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>

Затем добавим немного JavaScript, чтобы настроить прослушиватель события submit, которое возникает, когда пользователь нажимает кнопку «Отправить»:

const form = document.querySelector("form");
const log = document.querySelector("#log");

form.addEventListener("submit", (event) => {
  const data = new FormData(form);
  let output = "";
  for (const entry of data) {
    output = `${output}${entry[0]}=${entry[1]}\r`;
  }
  log.innerText = output;
  event.preventDefault();
});

Попробуйте этот пример и убедитесь, что для группы contact никогда не появляется больше одного результата.

Дополнительные атрибуты

Помимо общих атрибутов, доступных всем элементам <input>, для элементов ввода radio поддерживаются следующие атрибуты.

checked

Логический атрибут, наличие которого указывает, что этот переключатель выбран в группе по умолчанию.

В отличие от других браузеров, Firefox по умолчанию сохраняет динамическое состояние checked элемента <input> при переходе между загрузками страницы. Чтобы управлять этой функцией, используйте атрибут autocomplete.

value

Атрибут value есть у всех элементов <input>, но у элементов ввода типа radio он служит особой цели: при отправке формы на сервер передаются только выбранные переключатели, а передаваемое значение берётся из атрибута value. Если значение value явно не задано, по умолчанию используется строка on. Это показано в разделе Значение выше.

required

Атрибут required есть у большинства элементов <input>. Если у какого-либо переключателя в группе переключателей с одинаковым именем есть атрибут required, необходимо выбрать один переключатель в этой группе, но это не обязательно должен быть переключатель с таким атрибутом.

Использование элементов ввода-переключателей

Выше мы рассмотрели основные сведения о переключателях. Теперь рассмотрим другие распространённые возможности и приёмы работы с ними, которые могут пригодиться.

Выбор переключателя по умолчанию

Чтобы переключатель был выбран по умолчанию, добавьте атрибут checked, как показано в изменённой версии предыдущего примера:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

В этом случае первый переключатель теперь выбран по умолчанию.

Увеличение области нажатия для переключателей

В приведённых выше примерах можно было заметить, что переключатель можно выбрать, щёлкнув как по нему самому, так и по связанной с ним метке <label>. Это очень полезная возможность меток HTML-форм: она облегчает пользователям выбор нужного варианта, особенно на устройствах с небольшим экраном, например смартфонах.

Помимо повышения доступности, это ещё одна веская причина правильно добавлять элементы <label> в формы.

Проверка данных

Если у переключателя установлен атрибут required или этот атрибут required установлен хотя бы у одного элемента в группе переключателей с одинаковым именем, для того чтобы элемент управления считался допустимым, необходимо выбрать переключатель. Если ни один переключатель не отмечен, свойство valueMissing объекта ValidityState при проверке вернёт true, и браузер попросит пользователя выбрать вариант.

Стилизация элементов ввода-переключателей

В следующем примере показана более подробная версия примера, рассматривавшегося в этой статье: в него добавлена стилизация и улучшена семантика благодаря использованию специальных элементов. HTML выглядит так:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

CSS в этом примере несколько сложнее:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

В первую очередь стоит отметить использование свойства appearance (с префиксами, необходимыми для поддержки некоторых браузеров). По умолчанию переключатели (как и флажки) оформляются с помощью встроенных стилей операционной системы для этих элементов управления. Указав appearance: none, можно полностью убрать встроенное оформление и создать собственные стили. Здесь для создания плавной анимации выбора переключателя использованы свойство border, свойство border-radius и свойство transition. Обратите внимание, что псевдокласс :checked используется для задания внешнего вида переключателя, когда он выбран.

Обратите внимание: при нажатии на переключатель возникает плавный эффект затухания и появления, когда два переключателя меняют состояние. Кроме того, стиль и цвет легенды и кнопки отправки формы настроены для обеспечения высокого контраста. Возможно, такой вид не подойдёт для настоящего веб-приложения, но он определённо демонстрирует доступные возможности.

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• <input> и интерфейс HTMLInputElement, который его реализует.
• RadioNodeList: интерфейс, описывающий список переключателей