Содержание
— 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.
| Атрибут | Описание |
|---|---|
| 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.
Жалобы сотрудников
Директор
:
На большом экране плохо видно и незаметны «крыжики».
Главбух
:
На моем компе «крыжики» выглядят так, у сотрудниц иначе, дома тоже не так, а на планшете совсем иначе.
Маркетолог
:
А можно, так что бы некоторые не выбранные позиции были красными, а другие выбранные были зелеными?
И т.д., и т.п.
Итак, задача
- Минимальными затратами и минимальными изменениями исправить внешний вид checkbox и radiobox.
- Сделать стилизацию 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 тот же.
Что конкретно сделали?
- Каждый input (корме варианта 3) обернули тэгом LABEL с нашим классом. Варианту 3 просто добавили класс.
- Сразу после input вставили пустой тэг S. Так как сам input будет не видим, то это тэг будет визуализировать это input.
- Сопроводительный текст обернули тэгом SPAN (кроме варианта 4). Этот тэг понадобиться, когда будем решать вопрос выравнивания визуального input относительно этого текста.
- Варианту 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 дает отбивки слева и справа.
Преимущества этого метода
- Всё очень просто. Работает на всех браузерах. Даже у IE10 (в эмуляции у 11-го).
- Можно раскрашивать по своему усмотрению.
- Раз S::before это inline-block, то он сидит на
попебазовой линии ровно и никуда с нее не слезает. Если он по высоте будет больше текста, то просто увеличит высоту строки и останется на базовой линии. - Раз визуализация input находится внутри тэга S, то его можно легко позиционировать и выравнивать.
- Размеры 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> тоже существует два способа:
Связь по
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>Вложить
<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 выглядит так:
<форма>
Здесь особо нечего отметить, за исключением добавления элементов