Содержание

— HTML | MDN

Атрибут type тега <input> со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.

<input type="radio">

Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».

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

Примечание

: Чекбоксы похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют «включать» и «выключать»  значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.

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

Создание группы радиокнопок

Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута (

name). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе. 

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

Например, если в вашей форме необходимо запросить  предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с name= "contact" , но с разными value = "email", value ="phone" и value =  "mail" соответственно. Пользователь не видит атрибуты 

name  и value (если только вы не добавляете код для их отображения).

HTML будет выглядеть следующим образом:

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

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

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

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

Вы можете опробовать этот код здесь: 

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

Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке,  то её данные  включают запись в виде 

«contact=name». Например, если пользователь кликает на радиокнопку «Phone», а затем отправляет форму на сервер, данные формы будут включать в себя строку "contact=phone".

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

Примечание: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.

Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута "checked". Смотрите здесь Selecting a radio button by default.

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

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

Затем добавим немного JavaScript. Установим обработчик события submit (en-US), которая будет отправляться при клике пользователя на кнопку «Отправить»:

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

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);

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

Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые  функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.

Выбор радиокнопки по умолчанию

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

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

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

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

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

Примечание: Если вы устанавливаете атрибут checked более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут checked отменяет предыдущий, то  есть как отмеченная будет выбрана последняя радиокнопка с атрибутом checked. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.

Providing a bigger hit area for your radio buttons

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

<label>  в ваших формах.

Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.

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

HTML будет выглядеть следующим образом:

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

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

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

Здесь не так много нового, кроме дополнения в виде элементов <fieldset>

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

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 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

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

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  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: #999;
}

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

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

Стоит иметь в виду, что свойство  appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере! 

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

BCD tables only load in the browser

Радиокнопка — HTML

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

Для созданий переключателя, который умеет обрабатывать только один из множества вариантов, существуют радиокнопки. Название они получили от старых автомобильных радиоприёмников, в которых выбор радио осуществялся нажатием на одну из множеств кнопок для выбора частоты.

Выбор радиостанции

Для создания радиокнопки, также, как и чекбокса, используются два тега:

  • <input> с указанием type="radio". Обязательным атрибутом является name, значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними.
  • <label>, в котором будет текст, связанный с нужной нам радиокнопкой.

Для создания связи <label> с <input> тоже существует два способа:

  1. Связь по id. Для этого необходимо задать уникальный id для <input>, и связать <label> с радиокнопкой с помощью атрибута for.

      <form>
      <input type="radio" name="question">
      <label for="yes">Да</label>

      <input type="radio" name="question">
      <label for="no">Нет</label>
  </form>

  2. Вложить <input> внутрь тега <label>. При этом указание уникального id не требуется.

      <form>
      <label>
          <input type="radio" name="question">
          Да
      </label>
      <br>
      <label>
          <input type="radio" name="question">
          Нет
      </label>
  </form>

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

<form>
    <label>
        <input type="radio" name="question" value="yes">
        Да
    </label>
    <br>
    <label>
        <input type="radio" name="question" value="no">
        Нет
    </label>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 радиокнопки. Свяжите их вложив <input> внутри <label>. Уникальное имя для радиокнопок gender. Не забудьте добавить атрибут value

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Радиокнопки и чекбоксы в HTML, их теги и атрибуты

Здравствуйте, уважаемые читатели сайта Uspei.com. Следующий элемент, который сегодня мы успеем разобрать радиокнопки и чекбоксы в html. Обычно они используются в целях задания вопроса внутри формы (о создании форм мы говорили тут) и, соответственно, через них мы можем предложить человеку варианты ответа. При этом он может выбрать только один из этих вариантов.

К оглавлению ↑

Радиокнопки — тип radio

Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега input.

Тип укажем radio. Зададим кнопке имя и укажем значение, т.е. какое значение будет отослано обработчику, если эта кнопка будет активна. Для этой кнопке мы укажем значение «yes», т.к. эта кнопка будет отвечать за положительный ответ.

<input type="radio" name="time" value="yes">

Давайте добавим метку label c ответом «Да» для того, чтобы человек кликнул по метке, и кнопка активировалась автоматически.

реклама
<label>Да<input type="radio" name="time" value="yes"></label>

Теперь создадим ей противоположную кнопку с ответом «Нет». Для этого скопируем label и вставим после первого label. Поменяем «Да» на «Нет» и меняем значение «yes» на «no». Обратите внимание, что имя мы должны оставить то же самое. Это скажет браузеру о том, что эти радиокнопки принадлежат к единой группе и что они взаимоисключающие друг друга. То есть, если активировать одну кнопку, то другая деактивируется. Если имена кнопкам дать разные, то можно одновременно активировать обе кнопки.

<label>Да<input type="radio" name="time" value="yes"></label>
<label>Нет<input type="radio" name="time" value="no"></label>

Вот таким образом можно передавать обработчику значение = выбор того или иного ответа.

Давайте добавим сам вопрос после открытия абзаца. Спросим человека, любит ли он экономить время?

<p>Любите ли Вы экономить время?</p>
<label>Да<input type="radio" name="time" value="yes"></label> 
<label>Нет<input type="radio" name="time" value="no"></label>

И еще один момент, который может вам пригодиться – это автоматическая активация кнопок изначально. Для этого есть специальный атрибут, который можно добавить к нужной кнопке. Эта кнопка будет активирована изначально. Атрибут называется checked — можно перевести как отмеченный. Этому атрибуту не нужно указывать никакого значения.

реклама
<p>Любите ли Вы экономить время?</p> 
<label>Да<input type="radio" name="time" value="yes" checked></label> 
<label>Нет<input type="radio" name="time" value="no"></label>

А вот и конечный результат.

К оглавлению ↑

Чекбоксы — тип checkbox

Альтернативой радиокнопкам в HTML являются чекбоксы, только в этом случае возможно выделять несколько элементов. Давайте для примера создадим новый абзац и спросим, какими инструментами для экономии времени вы любите пользоваться?
После вопроса укажем новый абзац для создания этих самых чекбоксов. Первый чекбокс будет для ежедневника.

<p>Какими инструментами для экономии времени Вы пользуетесь?</p> 
<label><input type="checkbox" name="ez">Ежедневник</label>

Если проверить наш код в браузере, то выглядеть это будет так:

 

реклама

Теперь таким же образом создадим еще два чекбокса: хронометраж и свои наработки.

<p>Какими инструментами для экономии времени Вы пользуетесь?</p> 
<label><input type="checkbox" name="ez">Ежедневник</label> 
<label><input type="checkbox" name="hr">Хронометраж</label> 
<label><input type="checkbox" name="sv">Свои наработки</label>

Обязательно каждый чекбокс называйте своим уникальным именем.
Если сохранить файл и проверить, то можно увидеть следующее:

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

реклама

Правильный способ использования HTML radiobutton?



У меня есть 3 радиокнопки. Я хочу, чтобы они действовали как радиокнопки : если пользователь нажимает одну, другую нельзя нажать. Но почему-то мои кнопки действуют как флажки, пользователь может выбрать все 3. Вот мой код, чего мне не хватает ? Спасибо!

<div>
<div>
<label for="input-status1" ></label>
<input type="radio" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label>Option 1</label>
</div>
<div>
<label for="input-status2" ></label>
<input type="radio" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label>Option 2</label></div>
<div>
<label for="input-status3" ></label>
<input type="radio" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label>Option 3</label>
</div>

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

javascript html twitter-bootstrap
Поделиться Источник delphirules     11 июля 2017 в 14:11

2 ответа

  • Правильный способ использования памяти Cap Mathematica?

    В 32-разрядной операционной системе, где максимальная память, выделенная для любой программы, ограничена, Mathematica изящно завершает kernel и возвращает ошибку максимального выделения памяти. Однако на a 64-bit OS Mathematica будет свободно использовать всю доступную память и остановит работу…

  • правильный способ использования шаблона html?

    Я начал переносить простой сайт на Jekyll. У меня есть набор шаблонов, от которых все наследуется, так что все, что мне нужно сделать, это заполнить фактический контент. Однако при перемещении содержимого я нахожу, что некоторые из них должны изменить теги, ранее указанные шаблоном. Например, у…


3

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

Вот документация для <input type='radio'> , которая включает в себя:

Параметр «name» является важным атрибутом переключателей, поскольку он определяет, к какой группе принадлежит переключатель. Поскольку группы переключателей действуют как единое целое, необходимо указать общее имя для всех связанных переключателей. Когда две или более переключателей имеют общее имя, выбор одной из кнопок отменит выбор всех остальных с тем же именем. Если у вас есть несколько групп переключателей на одной странице, кнопки в разных группах должны иметь разные «name» атрибуты.

Поделиться Scott Marcus     11 июля 2017 в 14:12


2

Переключатели группируются вместе с помощью атрибута name . дайте им то же самое name .

<div>
<div>
   <label for="input-status1" ></label>
   <input type="radio" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
   <label>Option 1</label>
</div>
<div>
   <label for="input-status2" ></label>
   <input type="radio" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
   <label>Option 2</label>
</div>
<div>
   <label for="input-status3" ></label>
   <input type="radio" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
   <label>Option 3</label>
</div>

Поделиться denvaar     11 июля 2017 в 14:12

Похожие вопросы:


WPF RadioButton привязка команд

В настоящее время у меня есть ObservableCollection пользовательских объектов, которые находятся в моем ViewModel. Эта коллекция привязана к свойству ItemsSource в A ListBox , на мой взгляд, где…


Как изменить свойство radiobutton без использования его id тега

Мне нужно пройти через петлю и проверить правильный радиобаттон. У меня есть несколько переключателей с именем rb с таким цветом, как rbGreen, rbRed, rbYellow… Вот мой код: (listColors — это…


Стиль radiobutton без использования JS или CSS3 или HTML5

Мне было поручено создать следующий radiobutton без использования JS, CSS3 или HTML5. Возможно ли это как-то?


Правильный способ использования памяти Cap Mathematica?

В 32-разрядной операционной системе, где максимальная память, выделенная для любой программы, ограничена, Mathematica изящно завершает kernel и возвращает ошибку максимального выделения памяти….


правильный способ использования шаблона html?

Я начал переносить простой сайт на Jekyll. У меня есть набор шаблонов, от которых все наследуется, так что все, что мне нужно сделать, это заполнить фактический контент. Однако при перемещении…


ListView, RadioButton: правильный дисплей, но неактивен

У меня есть ListView с собственным адаптером: CityZipCodesAdapter . В конструкторе я даю List<CityZipCodesDataModel> , где я держу String , String и boolen (был выбран RadioButton или нет)….


Правильный способ использования BeginTransaction с Dapper.IDbConnection

Что такое правильный способ использования BeginTransaction() с IDbConnection в щеголеватой ? Я создал метод, в котором я должен использовать BeginTransaction() . Вот код. using (IDbConnection cn =…


Правильный способ использования invoke_result?

На cppreference написано, что правильный способ использования std::result_of -это: template<class F, class… Args> std::result_of_t<F&&(Args&&…)> // instead of…


Правильный способ использования радиокнопок

Я не совсем понимаю, как правильно использовать радиокнопки. Допустим, у меня есть группа из 3 радиокнопок : если все они имеют один и тот же идентификатор / имя, то она будет работать правильно ,…


Правильный способ использования SVG в файле HTML

Что такое правильный способ, чтобы добавить SVG мой файл HTML? Хорошо ли добавлять SVG непосредственно в файл HTML с помощью тега <svg> вместо использования другого метода, так как это делает…

Привлекательные радиокнопки HTML & CSS

На чтение 1 мин. Просмотров 508 Опубликовано Обновлено

HTML

<form>
  <label>
    <input type="radio" name="radio" checked />
    <span>HTML</span>
  </label>
  <label>
    <input type="radio" name="radio" />
    <span>CSS</span>
  </label>
  <label>
    <input type="radio" name="radio" />
    <span>Javascript</span>
  </label>
</form>

CSS

form {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

label {
  display: -webkit-box;
  display: flex;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
}

label input {
  position: absolute;
  left: -9999px;
}

label input:checked+span {
  background-color: #ebe1eb;
}

label input:checked+span:before {
  box-shadow: inset 0 0 0 0.4375em #844685;
}

label span {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
}

label span:hover {
  background-color: #ebe1eb;
}

label span:before {
  display: -webkit-box;
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #844685;
}

html — Сначала отображается текст радиокнопки HTML, а затем — изображение кнопки

Ниже мой код, я не понимаю, почему текст показан слева.

<label for="dfg">
                On which OS device do you play? <br>
            </label>
<input type="radio" name="OS" value="android" required>Android <br>
<input type="radio" name="OS" value="ios" required>IOS <br>
<input type="radio" name="OS" value="other" required>Other <br>

0

vikramvi 23 Июл 2020 в 10:47

2 ответа

Лучший ответ

Проблема была вызвана тем, что я установил width: 100%

Я изучаю веб-разработку и извлекаю большой урок, когда что-то выглядит странно; сначала посмотрите на CSS

0

vikramvi 23 Июл 2020 в 08:32

Это не так хорошо

<input type="radio" name="OS" value="ios" required>IOS <br>

Потому что текст (IOS) является потомком контейнера или тела, поэтому вы вызываете что-то вроде тега label, и это будет выглядеть как

<input type="radio" name="OS" value="android" required><label>Android</label> <br>

И текст появится справа от радио ввода, а следующие

<label>Android</label><input type="radio" name="OS" value="android" required> <br>

Текст появится слева от радио ввода, а также label это не единственный тег для вставки текста для input, но вы также можете использовать что-то вроде span, div и так далее, если у вас есть особые причины

1

Umutambyi Gad 23 Июл 2020 в 15:17

Выравнивание radio-button и текста по вертикали

Даже когда занимаешься версткой довольно долго, иногда некторые простые моменты могут отнять некоторое время. Один из таких для меня было то, что когда выводишь рядом radio-button и текст к нему, то текст получается немного ниже, чем следовало бы. И лично меня это немного раздражало и поэтому я решил выровнять текст и радио-кнопку по вертикали по центру, чтобы они смотрелись красиво.

В исходном варианте всё выглядело так:


<input type="radio" value="1" /> test radio-button

На экране (при увеличении масштаба) это выглядит так:

Т.е. видно, что текст чуть ниже, чем нужно. Как же выровнять текст относительно radio-button по вертикали, чтобы он был по середине, как и сам radio-button. Чтобы каждый раз не искать решение когда оно потребуется, я и написал эту заметку.

Есть несколько вариантов как сделать выравнивание. Но я приведу на мой взгляд самый простой и самый короткий способ, как говорится без всяких заморочек.

Выравнивание radio-button по вертикали в одну линию с текстом

Этот способ работает во всех современных браузерах.


<input type="radio" value="1" /> test radio-button

Выглядеть после выравнивания будет так:

Если вы применяете какие-то особенные шрифты или просто хочется немного сместить радио кнопку по вертикали, можно воспользоваться таким тоже простым вариантом:


<input type="radio" value="1" /> test radio-button

Результат будет такой:

В интернете есть и другие варианты выравнивания.

Выравнивание radio-button с помощью таблицы


<table border="0">
  <tr>
    <td><input type="radio" value="1" /></td>
    <td>test radio-button</td>
  </tr>
</table>

Однако по-моему это очень громоздкий вариант, да и устаревший очень.

 

HTML input type = «radio»

❮ Атрибут типа HTML

Пример

Радиокнопки позволяют пользователю выбрать только один из ограниченного числа вариантов:








Попробуй сам »

Определение и использование

определяет переключатель.

Радиокнопки обычно представлены в радиогруппах (набор радиокнопок). описание набора связанных опций). Только один переключатель в группе может быть выбранными одновременно.

Примечание: Радиогруппа должна иметь одно и то же имя ( значение атрибута name ) для обработки как группы. Как только радиогруппа создан, выбор любого переключателя в этой группе автоматически отменяет выбор любого другой выбранный переключатель в той же группе.У вас может быть столько радиогрупп на странице, как хотите, при условии, что каждая группа имеет собственное имя.

Примечание: Атрибут value определяет уникальное значение связанный с каждой радиокнопкой. Значение не отображается пользователю, но отображается значение, которое отправляется на сервер при «отправке», чтобы определить, какой переключатель что было выбрано.

Совет: Всегда добавляйте тег за лучшие практики доступности!

Поддержка браузера

Атрибут
type = «радио» Есть Есть Есть Есть Есть

Синтаксис

❮ Атрибут типа HTML


— HTML: язык разметки гипертекста

элементы типа radio обычно используются в радиогруппах — наборах радиокнопок, описывающих набор связанных опций.Одновременно можно выбрать только один переключатель в данной группе. Радиокнопки обычно отображаются в виде маленьких кружков, которые при выборе заполняются или подсвечиваются.

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

Примечание : Флажки похожи на переключатели, но с важным отличием: переключатели предназначены для выбора одного значения из набора, тогда как флажки позволяют включать и выключать отдельные значения.Если существует несколько элементов управления, радиокнопки позволяют выбрать один из них, тогда как флажки позволяют выбрать несколько значений.

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

Определение радиогруппы

Радиогруппа определяется присвоением каждой радиокнопке в группе одного и того же имени .Как только радиогруппа установлена, выбор любой радиокнопки в этой группе автоматически отменяет выбор любой выбранной радиокнопки в той же группе.

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

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

Итоговый HTML-код выглядит так:

  <форма>
  
 Выберите предпочтительный способ связи:

Здесь вы видите три радиокнопки, каждая с именем , установленным на , контакт и каждая с уникальным значением , которое однозначно идентифицирует эту индивидуальную радиокнопку в группе.У каждого из них также есть уникальный идентификатор id , который используется атрибутом для элемента для связывания меток с переключателями.

Вы можете попробовать этот пример здесь:

Представление данных радиогруппы

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

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

Примечание : Если при отправке формы не выбран переключатель, радиогруппа вообще не включается в отправленные данные формы, поскольку нет значения для отчета.

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

Давайте добавим немного кода в наш пример, чтобы мы могли исследовать данные, генерируемые этой формой. В HTML добавлен блок 

  для вывода данных формы в: 


 
  <форма>
  
 Выберите предпочтительный способ связи: 

  

    
    
    
    
    
    
  

  

    
  



 
 Затем мы добавляем некоторый JavaScript для настройки прослушивателя событий для события  submit , которое отправляется, когда пользователь нажимает кнопку «Отправить»:
  var form = document.querySelector ("форма");
var log = document.querySelector ("# журнал");

form.addEventListener ("отправить", функция (событие) {
  var data = new FormData (форма);
  var output = "";
  for (постоянный ввод данных) {
    вывод = вывод + запись [0] + "=" + запись [1] + "\ r";
  };
  log.innerText = вывод;
  event.preventDefault ();
}, ложный);  
 Попробуйте этот пример и убедитесь, что для группы  contact  никогда не бывает более одного результата.
 В дополнение к общим атрибутам, общим для всех элементов   , входы  radio  поддерживают следующие атрибуты:
 Атрибут Описание
  проверено  Логическое значение, указывающее, является ли этот переключатель выбранным по умолчанию элементом в группе
  значение  Строка для использования в качестве значения радио при отправке формы, если радио в настоящее время переключено на
 проверено 
 Логический атрибут, который, если он присутствует, указывает, что этот переключатель является выбранным по умолчанию в группе.
 В отличие от других браузеров, Firefox по умолчанию сохраняет состояние динамической проверки    при загрузке страницы. Используйте атрибут  автозаполнения  для управления этой функцией.
 значение 
 Атрибут  value  является атрибутом, который разделяют все    s; однако он служит специальной цели для входных данных типа  radio : при отправке формы на сервер отправляются только переключатели, которые в настоящее время проверены, а сообщаемое значение является значением атрибута  value .Если значение   не указано иначе, по умолчанию это строка  на . Это показано в разделе «Значение» выше.
 Мы уже рассмотрели основы переключателей выше. Давайте теперь посмотрим на другие распространенные функции и методы, связанные с переключателями, о которых вам, возможно, потребуется знать.
 Выбор радиокнопки по умолчанию 
 Чтобы сделать радиокнопку выбранной по умолчанию, вы включаете  проверенный атрибут , как показано в этой измененной версии предыдущего примера:
  <форма>
  
 Выберите предпочтительный способ связи: 

  

    
    

    
    

    
    
  

  

    
  

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

     Выберите предпочтительный способ связи: 
    

      
      

      
      

      
      
    

    

      
    

  

  
 Здесь особо нечего отметить, за исключением добавления элементов 
  и  , которые помогают сгруппировать функциональность красиво и семантически.
 Используемый CSS немного более значим:
  html {
  семейство шрифтов: без засечек;
}

div: first-of-type {
  дисплей: гибкий;
  выровнять элементы: гибкий старт;
  нижнее поле: 5 пикселей;
}

метка {
  поле справа: 15 пикселей;
  высота строки: 32 пикселя;
}

Вход {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;

  радиус границы: 50%;
  ширина: 16 пикселей;
  высота: 16 пикселей;

  граница: 2px solid # 999;
  переход: 0,2 с, все линейные;
  поле справа: 5 пикселей;

  положение: относительное;
  верх: 4 ​​пикселя;
}

input: checked {
  граница: сплошной черный 6 пикселей;
}

кнопка,
legend {
  цвет белый;
  цвет фона: черный;
  отступ: 5 пикселей 10 пикселей;
  радиус границы: 0;
  граница: 0;
  размер шрифта: 14 пикселей;
}

кнопка: навести,
button: focus {
  цвет: # 999;
}

button: active {
  цвет фона: белый;
  черный цвет;
  контур: сплошной черный 1px;
}  
 Наиболее примечательным здесь является использование свойства  Appearance  (с префиксами, необходимыми для поддержки некоторых браузеров).По умолчанию радиокнопки (и флажки) имеют собственный стиль операционной системы для этих элементов управления. Указав внешний вид : нет , вы можете полностью удалить собственные стили и создать для них свои собственные стили. Здесь мы использовали границу   вместе с границей  border-radius  и переходом  , чтобы создать красивый анимированный выбор радио. Также обратите внимание, как псевдокласс : checked  используется для определения стилей внешнего вида переключателя при его выборе.
  Примечание о совместимости : Если вы хотите использовать свойство  внешний вид , вам следует очень внимательно его протестировать. Хотя он поддерживается в большинстве современных браузеров, его реализация сильно различается. В старых браузерах даже ключевое слово  none  не оказывает одинакового эффекта в разных браузерах, а некоторые вообще не поддерживают его. В новейших браузерах различий меньше.
 Обратите внимание, что при нажатии на радиокнопку появляется приятный, плавный эффект исчезновения / появления, когда две кнопки меняют состояние.Кроме того, стиль и цвет легенды и кнопки отправки настроены так, чтобы иметь сильный контраст. Возможно, это не тот вид, который вы хотели бы видеть в реальном веб-приложении, но он определенно демонстрирует возможности.
 Таблицы BCD загружаются только в браузере
 Как создавать радиокнопки в HTML [+ примеры] 
 Хотя кажется, что каждый год для привлечения посетителей вводятся новые веб-технологии, некоторые из них выдержали испытание временем и не уйду.В этом посте мы обсудим один из таких элементов - скромную радиокнопку HTML.
 От контактных форм до тестов с множественным выбором - вы, вероятно, уже видели радио-кнопки (даже если вы не знали, как они называются). Эти круглые элементы необходимо знать, если вы хотите собирать информацию о пользователях из внешнего интерфейса вашего веб-сайта.
 Удобно, что HTML имеет встроенный тип ввода для переключателей, и реализовать их на странице довольно просто. Здесь мы рассмотрим, что такое переключатели, когда их использовать и как кодировать форму с переключателями в HTML.
 Что такое радио-кнопка HTML? 
 В HTML радиокнопка - это интерактивный элемент страницы для выбора одного варианта из нескольких. Если флажок не установлен, переключатель отображается в виде пустого кружка. При щелчке мышью или выборе с помощью клавиатуры кружок заполняется, указывая на выбор. Радиокнопка сопряжена с меткой (обычно текст или иногда изображение) - это то, что выбирает пользователь, когда выбирает конкретную радиокнопку. .
 Радиокнопки почти всегда появляются группами по два или более для обозначения связанных, взаимоисключающих вариантов. В этой группе опций пользователь может выбирать только одну за раз. Это означает, что выбор переключателя отменяет выбор другой выбранной кнопки в группе. Кроме того, пользователи не могут отменить выбор переключателя, щелкнув его. Единственный способ отменить выбор переключателя - выбрать другой вариант в группе.
 Радиокнопки и флажки 
 Радиокнопки похожи на другой распространенный интерактивный элемент - флажок.Различия между ними невелики, но важно отметить: в то время как переключатели позволяют пользователям выбирать только один вариант для каждой группы, флажки позволяют пользователям выбирать (или «отмечать») один, несколько или ни одного варианта для каждой группы. Пользователи также могут снять флажок, щелкнув его - переключатели не позволяют этого.
 Признаюсь, это не самая захватывающая тема. Однако их смешение может вызвать у посетителей серьезное недоумение. Поэтому обязательно используйте радиокнопки для меню «Выбрать одно» и сохраните флажки для своих меню «Выбрать все подходящие» или своих одноразовых вопросов (т.д., «Отметьте это поле, если…»).
 Теперь, когда мы понимаем назначение переключателей HTML, давайте узнаем, как их создавать.
 Как сделать радиокнопку в HTML 
 Чтобы создать переключатель в HTML, используйте элемент    с типом  radio . Это создает единственную радиокнопку, с которой пользователи могут взаимодействовать:
 См. Радиокнопку Pen Single от Кристины Перриконе (@hubspot) на CodePen.
 Конечно, нам нужно добавить немного больше кода, чтобы сделать это полезным.В частности, нам нужно несколько кнопок и меток для каждой кнопки. Вот как должна выглядеть простая группа переключателей, использующая только HTML:
 См. Группу переключателей пера Кристины Перриконе (@hubspot) на CodePen.
 Здесь у нас есть три элемента    типа  radio  с некоторыми новыми атрибутами. Также есть новый элемент   для каждого   . Давайте рассмотрим все, что мы добавили в код.
 Во-первых, атрибут id является уникальным идентификатором тега   . Его можно использовать в качестве селектора CSS для элемента переключателя, а также он объединяет кнопку с соответствующим ей  .
 Как уже упоминалось, переключатели располагаются группами. Используйте обязательный атрибут  name , чтобы сгруппировать набор связанных переключателей. В приведенном выше примере все    имеют одно и то же значение для  name , поэтому они рассматриваются как часть одной группы.Это позволяет пользователям выбирать только один вариант в группе за раз - попробуйте его выше.
 Затем атрибут  value  представляет уникальное значение для переключателя. Пользователи его не видят, но отправлено для представления выбранной опции. Например, если форма выше была отправлена ​​с выбранным элементом «17 лет или моложе», система, обрабатывающая форму, получит значение  age = child . Если пользователь не выберет какой-либо переключатель, значение не будет отправлено. Если атрибут  value  отсутствует для выбранной опции, форма отправит значение по умолчанию  на .
 Обратите внимание, что теги    создают только элемент радиокнопки, но не метку. Чтобы пометить радиокнопку, добавьте элемент   после элемента    и вставьте атрибут  для  с тем же значением, что и идентификатор  id  связанного элемента   . Затем напишите текст вашей метки в теге  .
 Хотя использование   не является строго необходимым, оно считается оптимальным по двум причинам.Во-первых, семантически богатый элемент   делает ваш веб-сайт более доступным для людей, использующих программы чтения с экрана. Он сообщает им, какая метка связана с каким переключателем. Во-вторых, атрибут  для  позволяет пользователям выбирать радиокнопку, щелкая саму метку в дополнение к кнопке, что упрощает использование вашей формы.
 Наконец, теги 
 (разрыв строки) помещают каждую опцию в новую строку. Попробуйте удалить эти теги в приведенном выше примере, чтобы разместить все параметры в одной строке.
 Проверяемый атрибут 
 У входов радиокнопок есть один дополнительный атрибут,  проверил атрибут  .  Если включена в тег   , кнопка будет выбрана по умолчанию.
 См. Форму «Переключатель пера с выбором по умолчанию» Кристины Перриконе (@hubspot) на CodePen.
 Как разместить радиокнопки HTML в форме 
 Что хорошего в переключателях, если пользователи не могут отправлять свои ответы? Вот почему радиокнопки обычно находятся внутри HTML-форм.Элемент HTML 
  содержит дочерние элементы, которые собирают вводимые пользователем данные, например   .
 Чтобы создать базовую форму с переключателями внутри, оберните группу (и) переключателей в тег   и включите