Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Input radio: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

— 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

Переключатели | htmlbook.ru

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

<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей
Атрибут Описание
checked Предварительное выделение переключателя. По определению, набор переключателей
может иметь только один выделенный пункт, поэтому добавление checked
сразу к нескольким полям не даст особого результата. В любом случае, будет
отмечен элемент, находящийся в коде HTML последним.
name Имя группы переключателей для идентификации поля. Поскольку переключатели
являются групповыми элементами, то имя у всех элементов группы должно
быть одинаковым.
value Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент
должен иметь свое уникальное значение, чтобы можно было идентифицировать,
какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
  </form> 
 </body>
</html>

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

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

Еще раз о визуализации input типа checkbox и radio. Для тех, кто забыл как / Хабр

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

Недавно у меня была короткая работа по разработке ТЗ на модернизацию давно существующего проекта. И, в частности дело касалось стилизации пресловутых <input type=»checkbox»>. Выяснилось, что исполнитель, программист «на все руки» даже не понял, что я ему на словах объяснял как это сделать. Пришлось делать примеры и, как результат, появился этот текст.

Напомню, что сейчас checkbox и radiobox разные сайты изображают по-разному. Бывает, что не отмеченный input сразу и не разглядишь – такой он «дизайнерский красивый», а у последних версий Chrome выбранные checkbox стали гнусного цвета циан.

Итак, ситуация

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

Маркетологи и рекламщики тоже его используют. Что эта система делает – неважно, на чем написано – неважно.

А важно, что на сайте этого продукта есть много страниц с формами, на которых много input checkbox и radio.

Жалобы сотрудников

Директор

:

На большом экране плохо видно и незаметны «крыжики».
Главбух

:

На моем компе «крыжики» выглядят так, у сотрудниц иначе, дома тоже не так, а на планшете совсем иначе.
Маркетолог

:

А можно, так что бы некоторые не выбранные позиции были красными, а другие выбранные были зелеными?

И т.д., и т.п.

Итак, задача

  1. Минимальными затратами и минимальными изменениями исправить внешний вид checkbox и radiobox.
  2. Сделать стилизацию checkbox и radiobox для разных юзеров. Важно: это закрытый сайт, там «всё свои», «красоты» не нужны, а нужна эффективность восприятия.

Что нельзя

1. Серверную часть трогать нельзя.

2. Файлы javascript трогать нельзя, свой javascript вставлять нельзя.

3. Файлы css трогать нельзя.

А что можно

1. Править html шаблоны.

2. Создать файл стилей для всех юзеров.

4. Создать файл стилей для конкретного юзера или группы юзеров.

А что сделали можно сразу посмотреть на

codepen.io

, но лучше почитать дальше.

Предварительное изучение показало


1. Почти все имеют поле name, а которые не имеют, то у них есть id.


2. Все имеют поле name, некоторые имеют id.

3. Соответственно, в css к checkbox можно обращаться как по id, так и по name. К radio – или по id, или по номеру потомка у родителя.

Фрагменты исходного кода:

/* вариант 1 */
<tag><input type="checkbox"> Некий текст</tag>

/* вариант 2 */
<tag><input type="checkbox"> Некий текст<br>
<input type="checkbox"> Некий текст</tag>

/* вариант 3 */
...<label><input type="checkbox"> Некий текст</label>...

/* вариант 4 */
<td><input type="checkbox"></td>
<td><label for="idxxx">Некий текст</label></td>

Так исправим код:

/* вариант 1 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label></tag>

/* вариант 2 */
<tag><label><input type="checkbox"><s></s><span>Некий текст</span></label><br>...</tag>

/* вариант 3 */
...<label><input type="checkbox"><s></s><span>Некий текст</span></label>...

/* вариант 4 */
<td><label><input type="checkbox"><s></s></label></td>
<td><label for="idxxx">Некий текст</label></td>


Всё тоже самое и для , класс у LABEL тот же.

Что конкретно сделали?

  1. Каждый input (корме варианта 3) обернули тэгом LABEL с нашим классом. Варианту 3 просто добавили класс.
  2. Сразу после input вставили пустой тэг S. Так как сам input будет не видим, то это тэг будет визуализировать это input.
  3. Сопроводительный текст обернули тэгом SPAN (кроме варианта 4). Этот тэг понадобиться, когда будем решать вопрос выравнивания визуального input относительно этого текста.
  4. Варианту 4 добавили еще класс, что бы не осуществлять это выравнивание, раз сопроводительный текст стоит в другой ячейки таблицы. Строго говоря, надо было бы сделать на оборот – вариантам 1-3 добавить класс, отвечающий за выравнивание. Но, вариантов 1-3 гораздо больше, чем 4-го и что бы не раздувать html сделано так.

Риторические вопросы и риторические же ответы

1.

Зачем тэг S?

Ну, не нравится S – можно использовать любой другой строчный элемент. Просто он должен быть, его можно стилизовать в зависимости от состояния предшествующего input.

2. Почему тэги S и SPAN без классов? Ну, зачем раздувать html? Тем более, что не очевидно, что одна из конструкций ниже будет «работать» медленнее другой.

  .new-input > S { }
  .new-input > .new-input-S {}

3. Как вы догадались, мне не нравятся идеи БЭМ, тем более идея «раздувать» html файл обилием упоминаний разных классов. В реальном проекте мы использовали только два класса – mni и mnio. :-))

Некоторые предварительные рассуждения и настройки css касательно box-sizing:border-box, нормализации LABEL, селекторов «A + B», «A ~ B» и «[attr]», псевдоклассов :checked, :disabled и ::before. Кто не уверен, что знает или хочет освежить знания смотрит под катом.

Предварительные рассуждения

1. Напомню, что в «старом» css (box-sizing:content-box) свойства width и height задают только ширину и высоту содержимого, а padding и border добавляются к этим значениям. box-sizing:border-box меняет схему так, что padding и border включаются в width и height.

2. Проверка показала, что в нашем случае используется старая модель, а менять «настройки» страниц запрещено. Не «наши» LABEL это простые строчные элементы, в них только текст. Поэтому стилизуем ВСЕ LABEL.

LABEL {
    box-sizing:border-box; cursor:pointer; user-select:none;
}
LABEL *,
LABEL *::before,
LABEL *::after {
    box-sizing:inherit;
}

Т.е., ставим box-sizing:border-box для тэга LABEL, всем его потомкам. Заодно ставим курсор и запрещаем выделение текст (что бы не мешало клику).

3. Комбинация селекторов «A + B» означает, что стили будут применяться только к селектору B, если он следует сразу ПОСЛЕ селектора A, т.е. только для первого B. С другой стороны, «A ~ B» означает, что ко всем селекторам B после селектора A, т.е. для первого и последующих.

Естественно, всё в пределах одного «родителя».

Как это будем использовать?

<label><input type="checkbox"><s></s><span>Некий текст</span></label>
<label><input type="radio"><s></s><span>Некий текст</span></label>
/* 1 */
.new-input > INPUT + S {}
.new-input > INPUT ~ SPAN {}

/* 2 */
.new-input > INPUT:not(:checked) + S {}
.new-input > INPUT:not(:checked) ~ SPAN {}

/* 3 */
.new-input > INPUT:checked + S {}
.new-input > INPUT:checked ~ SPAN {}

/* 4 */
.new-input > INPUT:disabled + S {}
.new-input > INPUT:disabled ~ SPAN {}

/* 5 */
.new-input > INPUT[type="radio"] + S {}

Первая группа – общие стили для тэгов S и SPAN.

Вторая группа – стили только когда INPUT НЕ выбран.

Третья – стили только когда INPUT выбран.

Четвертая – когда INPUT заблокирован.

И, наконец, пятая группа – общие стили для тэга S ТОЛЬКО, если он стоит после input radio.

Таким образом, можно изменять стили тэгов S и SPAN в зависимости от состояния input.

4. Поскольку у нас тэг S будет изображать из себя input, то самому input поставим display:none, его не будет видно, а тэг LABEL будет его переключать, а тэг S будет соответственно меняться. Почему не используем html свойство hidden у input? Потому, что на некоторых браузерах hidden у input «работает» не совсем верно, плюс не будем перегружать html файл.

Итак, начинаем визуализацию input

Пример N 1. Самый простой – используем алфавитные символы

html код тот же, а css будет такой:

/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

Тэг S буде визуализировать input. Но мы «разделим» его по функционалу: сам тэг

S

будет отвечать за размещение в LABEL и выравнивание относительно следующего SPAN.

А псевдоэлемент S::before разместится внутри тэга S и будет изображать из себя input.

Строка s1 определяет, какой символ будет помещен в S::before когда input не выбран. В принципе надо было бы написать «.new-input > INPUT:not(:checked) + S::before», но некоторые браузеры (например, IE), подобную конструкцию могут и не исполнить.

Строка s2 определяет символ, когда input выбран.

Строки s3 и s4 делают то же для input radio.

Строка s5 описывает, что будет если input заблокирован – в данном случае тэг S будет наполовину прозрачным.

Строка s6 определяет выравнивание, в данном случае дает отбивку слева и справа (только в этом примере). Плюс, убирает штатное перечеркивание.

Строка s7 делает квадратик, s8 превращает его в кружок для input radio.

Пример N 1 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Чуток подробнее про display: inline-block, font-size, line-height

Конченая высота строки текста определяется на основе заданных font-size, line-height. При единичном line-height – высота будет по font-size, при числовом line-height – высота будет по их произведению или, при указании единиц измерения для line-height – высоту определит максимальное значение. В примере указан line-height:1.25, поэтому и у S::before указано width:1.25em.

Для S::before указано display: inline-block – в этом случае S::before «внутри» себя будет блоком (можно указать ширину, высоту, рамки и пр.), а «снаружи» он останется строчным элементом. В дальнейшем об этом будет подробнее.

Вопрос:

Может можно использовать специальные символы? Типа вот этих:

□ ■ ▢ ▣ ○ ● ◎◉

Задать им нужный размер и всё. Нет?

Ответ:

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

Мы пошли другим путем. Хотя в финальном примере есть реализация этой идеи.

Пример N 2. «Рисуем» элементы input средствами css

html код тот же, а css будет такой:

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

Строка

s1

определяет S::before для визуализации input. Это будет inline-block, ширина и высота которого установлена в 0.75em, что примерно равно высоте прописной буквы и зависит от font-size родителя. Задана тонкая рамка текущим цветом, внутренняя отбивка, небольшое скругление углов. И – самое важное! – установлено свойство background-clip:content-box. Это очень интересное свойство – если будет установлен background-color, то он закрасит только контентную часть и не затронет отбивку (padding). Что нам и надо.

Строка s2 для input типа radio делает S::before круглым.

Строка s3 для отмеченного input устанавливает для S::before background-color текущим цветом. Т.е., «рисует» внутри квадратик или кружок.

Строка s4 отрабатывает блокировку input, строка s5 дает отбивки слева и справа.

Преимущества этого метода

  1. Всё очень просто. Работает на всех браузерах. Даже у IE10 (в эмуляции у 11-го).
  2. Можно раскрашивать по своему усмотрению.
  3. Раз S::before это inline-block, то он сидит на попе базовой линии ровно и никуда с нее не слезает. Если он по высоте будет больше текста, то просто увеличит высоту строки и останется на базовой линии.
  4. Раз визуализация input находится внутри тэга S, то его можно легко позиционировать и выравнивать.
  5. Размеры S::before в em дают возможность задавать его размер относительно размера текста подписи. Можно, к примеру, поставить предельные значения высоты и ширины.

Недостатки этого метода

В основном в использовании размеров в em. Дело в том, что может возникнуть ситуация когда ширина и высота при расчете (из em в px) будет иметь дробное значение. На обычных компьютерах с обычным экраном округление может произойти не корректно. Например, размеры 12.8px на 12.8px у той же Мозилы могут стать как 13px на 12px. Тогда надо ставить фиксированные размеры. Хотя на современных мониторах и видеокартах, ноутбуках, на планшетах и смартфонах этого не происходит из-за того, что точка (пиксель) браузера состоит из нескольких пикселей экрана.

Пример N 2 можно посмотреть на codepen.io. Там представлены нативные input и новые. Первые можно убрать.

Итак, первую задачу – визуализацию input – выполнили. Переходим к избранной «раскраске».

Раскрашиваем input

html для примера:

<label><input name="chb1" type="checkbox" ...><s></s><span>Некий текст</span></label>
<label><input type="radio" ...><s></s><span>Некий текст</span></label>

К input типа checkbox будем обращаться по name, к radio по id.

Всё красим в синий

/* только input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/* только text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/* или всё */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

Помним о специфичности в css, эти стили будут более специфичны, чем базовые и сработают обязательно. Чем они отличаются от описанных выше? Тем, что применяются только к избранным input – к тем, что имеет указанное значение name и id.

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

Красим в зеленый, когда input выбран

/* только input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/* только text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/* или всё */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

Первый вариант, на мой взгляд, не очень хорош – зеленым будут и рамка, и внутренний квадратик/кружок. Можно раскрасить только его.

/* только input и только внутри */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

Красим в красный, когда input НЕ выбран

/* только input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/* только text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/* или всё */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

Логика понятна? Можно и дальше делать более сложные конструкции.

Например, при не выбранном input текст должен быть красным и жирным, а при выбранном внутренний элемент input и текст должен быть зеленым. Элементарно!

/* текст, когда нет выбора */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/* внутренний элемент input, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* текст, когда выбран */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

А, к примеру, надо обработать целую группу input (10-15 штук). Что бы не писать кучу строк можно найти их общего родителя (.parent_element) и сократить условие.

.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

Всё можно посмотреть в финальном примере на

codepen.io

Вот, вроде как, и всё. Осталось только «почесать родимые пятна» перфекциониста – проблемы выравнивания.

Выравнивание визуального input и сопроводительного текста

Для начала напомню общеизвестные вещи на тему размещения текста, форматирования и прочего. Всё под катом.

Общеизвестные вещи

Буду стараться не применят специальные термины, ибо в дизайне, верстке и css они иногда отличаются. Всё простыми словами.

1. Свойство font-size не определяет размер букв, а только размер знакоместа. Есть базовая линия (baseline), по которой расположены «нормальные» буквы. У «ненормальных» – g ц – нижние элементы «свисают» ниже её. Есть линия капители (cap height) – это верхняя граница «нормальной» прописной (заглавной) буквы. У «ненормальных» – Ё Й – верхние элементы «вылезают» выше её. Иными словами, размер прописной буквы это расстояние от базовой линии до капители, а знакоместо это чуть больше сверху и снизу. Обычно в «нормальных» шрифтах высота капители это 75% от высоты знакоместо. К примеру, font-size:16px, а размер буквы Н у шрифта Arial будет 12px. Но, бывают «специалисты» у шрифтов которых всё не так.

2. Свойство line-height определяет высоту строки. Если его вычисленное значение больше, чем указано в font-size, то браузер разместит текст так, что бы нормальная прописная буква была по середине высоты строки. Есть нюансы, но тут они не важны.

3. Соответственно, в нашем случае тэги S и SPAN должны иметь одинаковые значения font-size и line-height желательно заданные где-то выше у родителей. В нашем случае в примерах font-size:16px и line-height:1.25. Поэтому в примере N1 у S::before ширина указана 1.25em, а высота у него определяется автоматически. А в примере N2 (и финальный пример) – у S::before ширина и высота 0.75em, что бы был по высоте с прописную букву. Задав другое значение font-size ничего менять не надо. Естественно, эту величину надо подогнать под конкретный шрифт.

4. Если перед текстом стоит какая-то квадратная или круглая «штучка», то любой дизайнер скажет, что она должна быть по высоте с прописную букву. А отбивка между ними должна быть в определенных процентах от размера шрифта. Если высота меньше высоты буквы, то она должна быть визуально значительно меньше, но не меньше 50%. Если больше, то тоже визуально значительно больше, но не больше 150%. А вот чуть-чуть, на пару пикселей больше/меньше – это ужас-ужас! Ну, и расположена эта штучка должна быть на базовой линии или по середине без всяких там чуть-чуть.

Зачем я это упомянул? А затем, что перфекционисту глаза режет, когда input криво стоит рядом с текстом — или прилипает, или далеко, или чуть меньше, или чуть больше. Мы так делать не должны!

Что будет, если сопроводительный текст в SPAN будет выведен в две или три строки? Очевидно, что он «залезет» под input. Это не красиво, надо исправить.

Один древний метод такой: тэгу S делаем float:left, а тэгу SPAN display:block и overflow:hidden.

Получится колонка текста. Подразумевается, что у кого-то из них будет соответствующий margin, что даст отбивку между ними. Ну, ещё добавляется геморрой с прекращением float после SPAN. Мы пойдем современным путем – применим flexbox. Он тут совершенно к месту.

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

В этом случае тэг LABEL (который .new-input) будет flex, S и SPAN будут блоками, разместятся вверху LABEL. Текст в SPAN в случае необходимости будет в несколько строк. Вот из-за этого визуальный input описали в S::before. Независимо от высоты SPAN S::before будет расположен на одной базовой линии с первой строкой SPAN. Как вариант можно было указать align-items:center – тогда при однострочном SPAN визуальный input был бы вверху, а при двух строках – посередине, а при трех – у второй строки. В финальном примере можно переключать расположение input.

Вот и всё

Надеюсь, было интересно и кому-нибудь полезно. Прошу, не сильно меня ругать – это мой первый опыт на Хабр.

Пример N 1 – просто демонстрация взаимодействия изменения input и соседнего элемента.

Пример N 2 – визуализация input средствами css, как основа решения.

Финальный пример – всё описанное вместе.

Про конкретную реализацию

Там были обширные формы, где блоки полей возможные для правки конкретным пользователям выделялись слабым фоном, а остальным input имели свойство disabled и служили только для информации. Поэтому стиль «.new-input > INPUT:disabled + S::before» не применяли.

UPD

В ответ на комментарии

Пример N 3

.

Там работает поддержка клавиш и фокуса для скрытого input.

Радиокнопка — 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

Как выровнять input=»radio» с их метками?

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

У меня есть следующая проблема. Я хочу, чтобы и метки, и входы были в одной строке: Yes o No o (o символизирует вход).

Вот мой следующий код, заметьте, что я изменил свойство отображения метки на встроенный блок:

<div>
        <label>Yes</label>
        <input type="radio" name="yes/no" checked>
        <label>No</label>
        <input type="radio" name="yes/no" >
    </div> 

Извините за ответ, хотя есть много подобных вопросов и ответов, но адаптация их просто не сработала…

css

html

vertical-alignment

Поделиться

Источник


Anna Marie    

14 марта 2019 в 10:40

3 ответа


  • Как вертикально выровнять переключатель html по его метке?

    У меня есть форма с переключателями, которые находятся в той же строке, что и их метки. Однако переключатели не выровнены по вертикали с их метками, как показано на скриншоте ниже. Как я могу выровнять переключатели по вертикали с их метками? Редактировать : Вот код html: <input checked=checked…

  • Выровнять бары с барными метками в Jfreechart

    У меня есть проблема с метками данных, чтобы выровнять их с правильным столбиком на этой диаграмме. Эта гистограмма генерируется с помощью jfreechart в jsp.



4

Если вы хотите, чтобы входные данные и метка были ‘bottom-aligned’, попробуйте использовать vertical-align: text-bottom .

input[type='radio'] {
  vertical-align: text-bottom;
  margin-bottom: 1px;
}
div {
  display: inline-block;
  border: 1px solid black;
}
<div>
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Поделиться


jo_va    

14 марта 2019 в 10:43



3

Примените vertical-align: middle с margin-top: -1px к каждому input[type=’radio’] :

input[type='radio'] {
  margin-top: -1px;
  vertical-align: middle;
}
<div>
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Идеальный центр : просто добавьте строку, пересекающую текст и кнопку в этом втором фрагменте, чтобы показать идеальный центр

input[type='radio'] {
  margin-top: -1px;
  vertical-align: middle;
}

.col-sm-3 {
    position: relative;
    border: 1px solid;
}

.col-sm-3:after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: black;
    top: 50%;
}
<div>
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Поделиться


Kamalesh M. Talaviya    

14 марта 2019 в 10:52



0

Возможно, вы захотите обернуть свой <input> в поля <label> .

Пример:

<div>
  <label>Yes
    <input type="radio" name="yes/no" checked>
  </label>
  <label>No
    <input type="radio" name="yes/no" >
  </label>
</div> 

Эта реализация повысит доступность и удобство использования ваших входных данных и не потребует каких-либо дополнительных css.

Поделиться


Marcus H    

30 марта 2019 в 05:35


  • Центральная группа переключателей с метками

    У меня есть куча переключателей с метками переменной длины. Мне было интересно, как я могу горизонтально центрировать их так, чтобы метки находились в центре страницы, но появлялись ‘left aligned’. Желаемый результат: Текущий код HTML: <input type=radio name=option id=option# value=radiobutton…

  • Bootstrap’. radio-inline ‘ переключатели на ‘vertical’ в режиме XS с помощью css

    Как бы вы взяли кучу переключателей, которые хорошо расположены горизонтально на рабочем столе, и изменили их, чтобы выровнять по вертикали на мобильном устройстве, используя CSS . вот мой пример: <div class=row> <div class=col-md-12> <fieldset> <legend>- fellow…


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

Как выровнять переключатели по горизонтали под метками

Поэтому я использую следующий HTML для отображения 4 переключателей по горизонтали с центром под соответствующими метками в jsp: <s:form action=markUser name=markUser method=post…

привязка <input type=»radio»> к полю модели?

В представлении у меня есть два <input type=radio> , объедините их в радиогруппу. Я хочу связать их с полем модели, таким образом, если значение истинно, то оно должно привязать первый…

как выровнять кнопки в полях ввода с помощью Bootstrap

в настоящее время у меня есть 3 переключателя, которые я пытаюсь разместить рядом с моими 2 полями ввода с помощью bootstrap. я хочу поместить их в ту же строку, что и мои поля ввода, однако они…

Как вертикально выровнять переключатель html по его метке?

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

Выровнять бары с барными метками в Jfreechart

У меня есть проблема с метками данных, чтобы выровнять их с правильным столбиком на этой диаграмме. Эта гистограмма генерируется с помощью jfreechart в jsp.

Центральная группа переключателей с метками

У меня есть куча переключателей с метками переменной длины. Мне было интересно, как я могу горизонтально центрировать их так, чтобы метки находились в центре страницы, но появлялись ‘left aligned’….

Bootstrap’. radio-inline ‘ переключатели на ‘vertical’ в режиме XS с помощью css

Как бы вы взяли кучу переключателей, которые хорошо расположены горизонтально на рабочем столе, и изменили их, чтобы выровнять по вертикали на мобильном устройстве, используя CSS . вот мой пример:…

Добавление / вычитание фреймов данных с различными метками столбцов

Я пытаюсь добавить / вычесть два фрейма данных с разными метками столбцов. Можно ли это сделать без переименования столбцов, чтобы выровнять их? Я хотел бы сохранить оригинальные этикетки.

Как преобразовать форму radio input в форму radio input bootsfaces?

Возможно ли, чтобы преобразовать следующий код для bootsfaces ярлыки? <div class=radio> <label><input type=radio name=optradio/>Option 1</label> </div> <div…

Как выровнять форму по центру с метками внутри div

Я хочу выровнять форму по центру с метками внутри div.login__box Я использую bootstrap 3.3.7 Вот как я этого хочу <form class=form-horizontal> <div class=form-group> <label…

Radio кнопочка — группа переключателей в HTML форме

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

Радио кнопочка создается с помощью тега input
с атрибутом type в значении radio. Внешний вид:

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

Пример

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

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

<input type="radio" name="test" checked value="1">
<input type="radio" name="test" value="2">

:

Пример

А теперь давайте сделаем две группы радио переключателей:
первая группа будет иметь одно значение атрибута name (radio1),
а вторая — другое (radio2). Попробуем понажимать по ним, и увидим,
что группы переключаются независимо друг от друга:

<input type="radio" name="radio1" checked>
<input type="radio" name="radio1">
<input type="radio" name="radio1">

<br>

<input type="radio" name="radio2" checked>
<input type="radio" name="radio2">
<input type="radio" name="radio2">

:

Смотрите также

  • чекбокс,
    с помощью которого можно реализовать флажок
  • атрибут checked,
    который делает радио переключатель отмеченным
  • псевдокласс checked,
    который задает стили для отмеченных радио
  • атрибут disabled,
    который блокирует элементы форм
  • тег label,
    который задает подсказку для радио

html input radio

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

HTML-флажок

С помощью флажков мы можем позволить пользователю сделать несколько вариантов. Например:

<form action="">
<fieldset>
<legend>Известные языки</legend><br>
<input type="checkbox" name="html" value="html"/> html
<br />
<input type="checkbox" name="css" value="css"/> css
<br />
<input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>

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

<form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

Кроме того, благодаря отключенной функции мы можем сделать чекбокс недоступным:

<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

Кнопка HTML-радио

radio button  ( «радио — кнопка» ) эта кнопка чтобы позволить вам сделать эксклюзивный выбор. Следовательно, в этом случае один выбор исключает другой. Чтобы получить этот эффект, поля должны иметь одинаковое имя и другое значение:

<form action="">
<fieldset>
<legend>Известные языки</legend>
HTML <input type="radio" name="language" value="html"/>
CSS <input type="radio" name="language" value="css"/>
JavaScript <input type="radio" name="language" value="javascript"/>
</fieldset>
</form>

Также в этом случае можно назначить значение по умолчанию или отключить кнопку.

<form action="">
<input type="radio" name="language" value="html" checked="checked" disabled="disabled"/>
</form>

Выпадающий список HTML select

Благодаря тегу <select> вы можете создавать меню опций. В этом случае каждая запись должна быть включена в тег <option> (закрытие тега необязательно), а значение должно быть указано с помощью атрибута «value» . С атрибутом «selected» вы можете указать выбор по умолчанию:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" >
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Наконец, с помощью тега выбора также можно установить несколько вариантов. Как вы можете видеть, при использовании атрибута «multiple» внешний вид тега select значительно меняется:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

Используя клавишу CTRL, пользователь может сделать несколько вариантов.

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

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" size="2" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>

Выберите язык программирования htmlcssjavascript

— 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 ();
}, ложный);  

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

В дополнение к общим атрибутам, общим для всех элементов , входы radio поддерживают следующие атрибуты:

Атрибут Описание
проверено Логическое значение, указывающее, является ли этот переключатель выбранным по умолчанию элементом в группе
значение Строка для использования в качестве значения радио при отправке формы, если радио в настоящее время переключено на

проверено

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

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

value

Атрибут 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;
}  

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

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

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

Таблицы BCD загружаются только в браузер

input (type = radio) элемент

Специальные атрибуты

автофокус

Логическое значение, указывающее браузеру установить фокус на этот элемент управления, когда документ завершил загрузку или когда отображается диалоговое окно , в котором находится элемент управления.Если атрибут имеет значение «autofocus» или пустая строка («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после загрузки страницы или диалогового окна .

Пример

  

проверено

Логическое значение, указывающее, следует ли проверять элемент управления по умолчанию, то есть при загрузке страницы или при сбросе формы.Если атрибут принимает значение «checked» или пустую строку («»), или если он просто присутствует, элемент управления будет проверяться по умолчанию.

Пример

  

Пол:

отключено

Логическое значение, указывающее, отключен ли элемент управления.Если атрибут принимает значение «отключен» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.

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

Пример

  

Выберите цвет для своего профиля:


форма

Значение атрибута id формы, с которой связан этот элемент управления.

Этот атрибут является новым в HTML 5 и помогает определять принадлежность элементов управления во вложенных или удаленных формах.

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

Пример

  

Доход:

название

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

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

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

Пример

  

Работает как:

требуется

Логическое значение, указывающее, может ли пользователь оставить все опции в группе снятыми.Если этот атрибут имеет значение "required" или пустую строку (""), или если он просто присутствует, пользователь должен будет выбрать параметр в группе, чтобы иметь возможность отправить форму .

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

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

Пример

  

Путешествие:

тип

Значение, указывающее тип поля, которое представляет этот элемент.Есть двадцать два возможных значения (без учета регистра):

  • скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
  • текст: элемент управления, используемый для ввода однострочного фрагмента текста.
  • поиск: то же, что и текст, но для целей поиска.
  • tel: контрольный номер телефона.
  • URL-адрес

  • : текстовое поле, используемое для ввода единственного и абсолютного URL-адреса .
  • электронная почта: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
  • пароль: текстовое поле для редактирования паролей, где символы представлены точками.
  • Дата

  • : элемент управления для ввода определенной даты.
  • месяц: элемент управления для ввода определенного месяца.
  • неделя: элемент управления для ввода определенной недели.
  • time: элемент управления для ввода определенного времени.
  • datetime-local: элемент управления для ввода определенной местной даты и времени.
  • число: элемент управления для ввода числа.
  • диапазон: элемент управления для ввода одного или двух чисел внутри диапазона.
  • цвет: элемент управления для ввода цвета.
  • Флажок

  • : элемент управления для ввода логического значения (истина / ложь).
  • Радио

  • : элемент управления, используемый для выбора одного варианта из множества.
  • файл: элемент управления, используемый для загрузки файлов на сервер.
  • submit: кнопка, используемая для отправки формы.
  • Изображение

  • : то же, что и submit, но с возможностью отображения в виде изображения вместо использования кнопки по умолчанию.
  • сброс: кнопка, используемая для сброса элементов управления формы до значений по умолчанию.
  • Кнопка

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

Если этого атрибута нет, элемент ведет себя так, как если бы он имел значение «текст».

Пример

  
  
значение

Значение для элемента управления, которое будет отправлено агенту обработки вместе со значением атрибута name , только если переключатель установлен.

Пример

  

Способ отправки:

Как использовать «обязательный» атрибут с полем ввода радио

Как использовать «обязательный» атрибут с полем ввода радио

  1. Фрагменты
  2. HTML
  3. Как использовать «обязательный» атрибут с полем ввода радио

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

Хотя установка обязательного атрибута для всех входов более понятна, в этом нет необходимости (если вам не нужно динамически генерировать переключатели).

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

Создать HTML¶

  • Используйте элемент
    .
  • Добавьте три элемента
  • Добавьте обязательный атрибут в первый
  • Добавьте с типом «submit».
  <форма>
  Выберите пол:
  <метка>
     Мужской
  
  <метка>
     Женский
  
  <метка>
     Другое
  
  
  

Пример использования обязательного атрибута с полем ввода радио: ¶

  

  
     Название документа 
  
  
    
Выберите пол: <метка> Мужской <метка> Женский <метка> Другое

Попробуйте сами »

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайтов.Принимаю

Входные радиокнопки

Назначение этого элемента - предоставить как минимум две "радио-кнопки", маленькие кружки с подписями. Они «взаимоисключающие»: одновременно можно выбрать только один переключатель в группе. Кнопки можно расположить горизонтально или вертикально.

Использование

Для этого элемента требуется слой данных для предоставления элементов, которые будут отображаться как параметры кнопок.Для каждой записи в слое данных будет отображаться одна кнопка. Если список параметров короткий и неизменный, элемент DataLayer.Static можно использовать для «жесткого кодирования» параметров. Если список длиннее, элемент DataLayer.XML можно использовать для чтения данных из файла XML. Если параметры являются динамическими, такие элементы, как DataLayer.SQL , могут использоваться для извлечения элементов из
источник данных, возможно, с группировкой для предоставления уникальных значений.

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

Элемент имеет множество атрибутов, общих для всех элементов ввода, а также эти дополнительные атрибуты:

Атрибут Описание

Столбец заголовка

(Обязательно) Задает имя столбца уровня данных, который содержит текст, который будет отображаться рядом с переключателями.Этот текст всегда отображается под справа от кнопки. Чтобы текст отображался слева, оставьте этот атрибут пустым и поставьте перед элементом элементы Label и Space.

Столбец значений

(Обязательно) Задает имя столбца уровня данных, который содержит значение, которое должно быть передано в следующий отчет или задачу процесса.Например, если в списке выбран переключатель «Больше», в следующий отчет может быть передано значение «4». Это позволяет гибко отображать и передавать разные значения и даже разные типы значений, например числа.

Значение по умолчанию

Определяет, какой переключатель будет выбран по умолчанию; введите фактическое значение (из столбца «Значение»), а не отображаемый текст, чтобы установить его.Может использоваться с токенами @Request, переданными из другого отчета или задачи процесса, или с другими токенами.

Направление радиокнопки

Определяет физическое расположение переключателей: горизонтальное ( поперек ) или вертикальное ( вниз ) расположение, как показано на изображении выше.

Колонка всплывающей подсказки

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


Этот элемент может использоваться сам по себе или внутри элемента Input Grid , чтобы упростить выравнивание с другими элементами Input.

Этот элемент не может использоваться под элементом Data Table , поэтому вы не можете отображать переключатели внутри столбцов таблицы.

Вернуться к началу

Получение данных

Значение (из столбца «Значение»), связанное с выбранной радиокнопкой (из столбца «Заголовок»), доступно в следующем отчете или процессе с токеном @Request. Например, если для идентификатора элемента установлено значение radFonts , то токен @Request.radFonts ~ будет равно этому значению.

Если нет выбора по умолчанию, не выбран переключатель и страница отправлена, то этот токен @Request не будет существовать . Это важное различие, которое следует учитывать при создании условной обработки, которая оценивает этот токен.

Вернуться к началу

Дополнительная информация

Для получения дополнительной информации см. Запись «Ссылка на элемент» для радиокнопок ввода.

Вернуться к началу

Переплет: Радио | Aurelia

Введение

Группа радиовходов - это тип интерфейса «единственного выбора». Aurelia поддерживает двустороннюю привязку любого типа свойства к группе радиовходов. Приведенные ниже примеры иллюстрируют привязку числа, объекта, строки и логических свойств к наборам входов радио.В каждом из примеров есть общий набор шагов:

  1. Сгруппируйте радиостанции по свойству name . Радиокнопки с одинаковым значением атрибута name находятся в одной «группе радиокнопок»; одновременно можно выбрать только один переключатель в группе.
  2. Определите значение каждого радио, используя свойство model .
  3. Двусторонняя привязка проверенного атрибута каждого радио к свойству «выбранный элемент» в модели представления.

Числа

Начнем с примера, в котором используется числовое свойство «выбранный элемент».В этом примере каждому радио-входу будет присвоено числовое значение через свойство модели. Выбор радио приведет к тому, что его модельное значение будет присвоено свойству selectedProductId .

     
  export class App {
    продукты = [
      {id: 0, name: 'Motherboard'},
      {id: 1, name: 'CPU'},
      {id: 2, name: 'Память'},
    ];
  
    selectedProductId = null;
  }
   
   
     
  экспортный интерфейс IProduct {
      идентификационный номер;
      имя: строка;
  }
  
  export class App {
    продукты: IProduct [] = [
      {id: 0, name: 'Motherboard'},
      {id: 1, name: 'CPU'},
      {id: 2, name: 'Память'},
    ];
  
    selectedProductId: число = ноль;
  }
   
   
     
  <шаблон>
    <форма>
      
Продукты
<повтор ярлыка.for = "продукт из продуктов"> $ {product.id} - $ {product.name}
Идентификатор выбранного продукта: $ {selectedProductId}

Объекты

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

     
  export class App {
    продукты = [
      {id: 0, name: 'Motherboard'},
      {id: 1, name: 'CPU'},
      {id: 2, name: 'Память'},
    ];
  
    selectedProduct = null;
  }
   
   
     
  экспортный интерфейс IProduct {
      идентификационный номер;
      имя: строка;
  }
  
  export class App {
    продукты: IProduct [] = [
      {id: 0, name: 'Motherboard'},
      {id: 1, name: 'CPU'},
      {id: 2, name: 'Память'},
    ];
  
    selectedProduct: IProduct = null;
  }
   
   
     
  <шаблон>
    <форма>
      
Продукты
<повтор ярлыка.for = "продукт из продуктов"> $ {product.id} - $ {product.name} Выбранный продукт: $ {selectedProduct.id} - $ {selectedProduct.name}

Объекты с сопоставлением

Вы можете столкнуться с ситуациями, когда объект, к которому привязана модель вашего входного элемента, не имеет ссылочного равенства ни одному из объектов в вашем атрибуте checked.Объекты могут совпадать по идентификатору, но они не могут быть одним и тем же экземпляром объекта. Для поддержки этого сценария вы можете переопределить «сопоставитель» Aurelia по умолчанию, который представляет собой функцию сравнения равенства, которая выглядит следующим образом: (a, b) => a === b . Вы можете заменить функцию по вашему выбору, которая имеет правильную логику для сравнения ваших объектов.

     
  export class App {
    selectedProduct = {id: 1, name: 'CPU'};
  
    productMatcher = (a, b) => a.id === b.id;
  }
   
   
     
  экспортный интерфейс IProduct {
      идентификационный номер;
      имя: строка;
  }
  
  export class App {
    selectedProduct: IProduct = {id: 1, name: 'CPU'};
  
    productMatcher = (а, б) => а.id === b.id;
  }
   
   
     
  <шаблон>
    <форма>
      
Продукты
<метка> Материнская плата <метка> ЦПУ <метка> объем памяти Выбранный продукт: $ {selectedProduct.id} - $ {selectedProduct.name}

Логические значения

В этом примере каждому радио-входу назначается одно из трех буквальных значений: null , true и false .При выборе одного из радиомодулей его значение будет присвоено свойству likeCake .

     
  export class App {
    likeCake = null;
  }
   
   
     
  export class App {
    likeCake = null;
  }
   
   
     
  <шаблон>
    <форма>
      
Тебе нравится торт?
<метка> Не знаю <метка> да <метка> Нет likeCake = $ {likeCake}

Строки

Наконец, вот пример использования строк. Этот пример уникален, потому что он не использует model.bind для присвоения значения каждому радио.Вместо этого используется атрибут стандартного входного значения . Обычно мы не можем использовать стандартный атрибут value в сочетании с проверенным связыванием, потому что он приводит к чему-либо, присвоенному строке.

     
  export class App {
    products = ['Материнская плата', 'ЦП', 'Память'];
    selectedProduct = null;
  }
   
   
     
  export class App {
    products: string [] = ['Материнская плата', 'ЦП', 'Память'];
    selectedProduct = null;
  }
   
   
     
  <шаблон>
    <форма>
      
Продукты
<повтор ярлыка.for = "продукт из продуктов"> $ {product}
Выбранный продукт: $ {selectedProduct}

Пример кода

для радио типа ввода (и что он определяет в форме) »

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше

Значение
Как определить тип ввода в HTML (все значения и атрибуты)
Что делает Пример кода для радио типа ввода (и что он определяет в форме) ?
Определяет круглую кнопку выбора в форме.

Пример кода

  

Выберите языки, на которых вы наиболее хорошо владеете.







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

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

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

Клэр - опытный технический писатель, редактор и энтузиаст HTML.Она пишет для HTML.com и управляет контент-агентством Red Robot Media.

Браузер Поддержка радио

Все значения типа

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

Все входные атрибуты

Имя атрибута Значения Примечания
step Задает интервал между допустимыми значениями в числовом вводе.
требуется Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто.
только для чтения Запрещает пользователю редактировать значение ввода.
заполнитель Задает текст-заполнитель в текстовом вводе.
шаблон Задает регулярное выражение, по которому проверяется значение ввода.
несколько Позволяет пользователю вводить несколько значений при загрузке файла или электронной почте.
мин. Задает минимальное значение для полей ввода числа и даты.
макс. Задает максимальное значение для полей ввода числа и даты.
список Задает идентификатор элемента , который предоставляет список предложений автозаполнения для поля ввода.
высота Определяет высоту входного изображения.
formtarget Задает контекст просмотра, в котором открывается ответ от сервера после отправки формы.Для использования только с типами ввода «отправить» или «изображение».
formmethod Задает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение».
formenctype Определяет, как данные формы должны отправляться на сервер. Только для использования с типами ввода «отправить» и «изображение».
formaction Задает URL-адрес для отправки формы.Может использоваться только для type = "submit" и type = "image".
форма Задает форму, которой принадлежит поле ввода.
автофокус Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы.
accesskey Определяет сочетание клавиш для элемента.
автозаполнение Указывает, должен ли браузер пытаться автоматически завершить ввод на основе ввода данных пользователем в аналогичные поля.
граница Используется для указания границы на входе. Устарело. Вместо этого используйте CSS.
проверено Указывает, следует ли по умолчанию проверять ввод формы с помощью флажка или переключателя.
отключено Отключает поле ввода.
maxlength Задает максимальное количество символов, которое может быть введено при вводе текстового типа.
язык Используется для указания языка сценариев, используемого для событий, запускаемых вводом.
имя Задает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы.
размер Определяет ширину ввода в символах.
src Определяет исходный URL-адрес для ввода изображения.
тип кнопка
флажок
файл
скрыто
изображение
пароль
радио
сброс
отправить
текст
Определяет тип ввода.
значение Определяет начальное значение или выбор по умолчанию для поля ввода.

Form Radio | Компоненты | BootstrapVue

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

Индивидуальные радиостанции

 <шаблон>
  
Вариант A Вариант B
Выбрано: {{selected}}
<сценарий> экспорт по умолчанию { данные() { возвращение { выбрано: '' } } }

Сгруппированные радиомодули

Отдельные радиовходы в можно указать с помощью опций options prop или вручную разместив подкомпонент .При использовании вручную размещенных компонентов внутри , они унаследуют большинство свойств и v-модель из .

 <шаблон>
  
<б-форма-радио-группа v-model = "selected" : options = "options" : aria-Describedby = "ariaDescribedby" name = "параметры радио" > <б-форма-радио-группа v-model = "selected" : aria-Describedby = "ariaDescribedby" name = "радио-субкомпонент" > Переключить это настраиваемое радио Или переключить другое настраиваемое радио Это отключено Это четвертое радио
Выбрано: {{selected}}
<сценарий> экспорт по умолчанию { данные() { возвращение { выбрано: 'первый', опции: [ {текст: 'Переключить это настраиваемое радио', значение: 'первое'}, {text: 'Или переключить это другое пользовательское радио', значение: 'second'}, {текст: 'Этот отключен', значение: 'третий', отключен: истина}, {text: 'Это 4-е радио', значение: {4th: 4}} ] } } }

Не стесняйтесь комбинировать options prop и в .Помещенные вручную входы будут отображаться на ниже любых радиовходов, сгенерированных опциями options prop. Чтобы они отображались над входами, сгенерированными опциями , поместите их в именованный слот , первый .

 <шаблон>
  
<б-форма-радио-группа v-model = "selected" : options = "options" : aria-Describedby = "ariaDescribedby" name = "радио-опции-слоты" > <шаблон # первый> Переключить это настраиваемое радио из слота первым Это четвертое радио Это 5-е радио
Выбрано: {{selected}}
<сценарий> экспорт по умолчанию { данные() { возвращение { выбрано: '', опции: [ {text: 'Или переключить это другое пользовательское радио', значение: 'second'}, {текст: 'Третье радио', значение: 'третье'} ] } } }

Массив опций радиогруппы

опций может быть массивом строк или объектов.Доступные поля:

  • значение Выбранное значение, которое будет установлено на v-модели
  • отключено Отключает элемент для выбора
  • текст Отображаемый текст или
    6 html
    Показать базовый встроенный HTML-код

Значение может быть строкой, числом или простым объектом. Избегайте использования сложных типов в значениях.

Если указаны как html , так и текст , приоритет будет иметь html .В поле html поддерживается только базовый / собственный HTML (компоненты работать не будут). Обратите внимание, что не все браузеры будут отображать встроенный html (например, , и т. Д.) Внутри элементов из