Input radio checked

Стилизуем checkbox

HTML

 <label>
<input class="checkbox" type="checkbox" name="checkbox-test">
<span class="checkbox-custom"></span>
<span class="label">Lorem ipsum dolor</span>
</label>

Вся разметка у нас состоит из трех основных элементов, а именно:

.checkbox — реальный чекбокс input[type=»checkbox»]
.checkbox-custom — этот элемент я называю — кастомный чекбокс. Ему мы и будем менять внешний вид и позиционировать, как стилизованный чекбокс, ведь реальный чекбокс будет скрыт
.label — текст лейбла, который будет выводится справа от чекбокса

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

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

CSS

Теперь добавляем CSS стили.

/* Скрываем реальный чекбокс */ .checkbox { 	display: none; } /* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */ .checkbox-custom { 	position: relative; /* Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */ 	width: 20px; /* Обязательно задаем ширину */ 	height: 20px; /* Обязательно задаем высоту */ 	border: 2px solid #ccc; 	border-radius: 3px; } /* Кастомный чекбокс и лейбл центрируем по вертикали. Если вам это не требуется, то вы можете убрать свойство vertical-align: middle из данного правила, но свойство display: inline-block обязательно должно быть */ .checkbox-custom, .label { 	display: inline-block; 	vertical-align: middle; } /* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */ .checkbox:checked + .checkbox-custom::before { 	content: ""; /* Добавляем наш псевдоэлемент */ 	display: block;			 /* Делаем его блочным элементом */ 	position: absolute; /* Позиционируем его абсолютным образом */ 	/* Задаем расстояние от верхней, правой, нижней и левой границы */ 	top: 2px; 	right: 2px; 	bottom: 2px; 	left: 2px; 	background: #413548; /* Добавляем фон. Если требуется, можете поставить сюда картинку в виде "галочки", которая будет символизировать, что чекбокс отмечен */ 	border-radius: 2px; } 

Если вы базово знаете CSS, то разобраться в данных стилях не составит труда.

Но а для тех, кто еще только учится, я постараюсь объяснить, что именно мы делаем данным CSS кодом.

1. Мы скрываем наш реальный чекбокс. Это мы делаем из-за того, что сам по себе чекбокс нельзя кроссбраузерно стилизовать на чистом CSS. Поэтому мы применяем небольшую уловку, реальный чекбокс скрываем, а кастомный чекбокс (напомню, что это элемент с классом .checkbox-custom), стилизуем так, как нам нужно.

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

2. Задаем внешний вид для нашего кастомного чекбокса. Ко всем важным свойствам я дал комментарии в приведенном выше CSS, поэтому не буду здесь останавливаться.

3. Это пожалуй самое интересное. Я думаю вы обратили внимание на селектор .checkbox:checked + .checkbox-custom::before

Он задает следующее

Если наш реальный чекбокс отмечен (за этим следит селектор .checkbox:checked), то тогда внутрь нашего кастомного чекбокса мы добавляем псевдоэлемент (за это отвечает .checkbox-custom::before). Данный псевдоэлемент выводится, как квадратик внутри нашего кастомного чекбокса. По данному квадратику мы и можем понять, отмечен чекбокс или нет. Разумеется данный квадратик вы сможете поменять на все что угодно, например на привычную всем «галочку». В данном вопросе CSS нас ничем не ограничивает.

И также мы видим, что селекторы .checkbox:checked и .checkbox-custom::before соединены знаком «+», с его помощью мы по сути задаем отношение, что если реальный чекбокс отмечен, то только лишь в этом случае мы должны добавить псевдоэлемент внутрь кастомного чекбокса, в противном же случае ничего делать не нужно.

Стилизуем radio-кнопки

Процесс стилизации radio-кнопок, аналогичен чекбоксам.

Создаем привычную нам разметку (в данном случае отличаются только названия некоторых классов)

HTML

 <label>
<input class="radio" type="radio" name="radio-test">
<span class="radio-custom"></span>
<span class="label">Lorem ipsum dolor sit amet, consectetur</span>
</label>

CSS

Я добавил в стили указанные выше, новые селекторы, которые относятся как раз к radio-кнопкам.

.checkbox, .radio { 	display: none; } .checkbox-custom, .radio-custom { 	width: 20px; 	height: 20px; 	border: 2px solid #ccc; 	border-radius: 3px; 	position: relative; } .checkbox-custom, .radio-custom, .label { 	display: inline-block; 	vertical-align: middle; } .checkbox:checked + .checkbox-custom::before, .radio:checked + .radio-custom::before { 	content: ""; 	display: block; 	position: absolute; 	top: 2px; 	right: 2px; 	bottom: 2px; 	left: 2px; 	background: #413548; 	border-radius: 2px; } .radio-custom, .radio:checked + .radio-custom::before { 	border-radius: 50%; } 

Теперь у нас на странице будут нормально работать, как checkbox, так и radio-кнопки.

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

Единственный недостаток данного способа — это то, что нам приходится создавать некий пустой элемент .checkbox-custom для чекбоксов и .radio-custom для radio-кнопок. Который внутри себя не содержит никакого смысла с точки зрения HTML, ведь в разметке он валяется, как «мусорный» тег.

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

webcareer.ru

Переключатель стилей на чистом CSS с помощью :checked

От автора: еще пару лет назад разработчики уже могли создавать множество проектов с помощью одного лишь CSS без применения JavaScript. Но сегодня CSS настолько окреп, что можно писать поистине удивительные вещи без единой строки JavaScripta’а. Скорее всего вы уже читали статьи на тему «способы на чистом CSS», в которых демонстрируется мощь каскадных таблиц стилей.

Когда дело касается чисто CSS методов, мы не можем игнорировать псевдокласс :checked, его я и буду использовать в этой статье. Конечно, я не первый, кто пишет об этом способе, уже велись довольно обширные споры по поводу использования элементов формы в качестве замены JavaScript’у. К примеру, статья с Adobe Louis Lazaris и это замечательное слайд шоу от Ryan Seddon.

Применение :checked

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

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

А теперь можно продолжать.

Создание блока настроек

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

Поскольку нам необходимо отображать только лейблы, то код выше как раз и прячет чекбоксы и радиокнопки. Более того, всем лейблам присвоен класс settings-box-element со свойством z-index , нам нужно, чтобы эти поля всегда оставались поверх страницы.

Теперь мы можем разобраться в коде блока настроек. Начнем с кнопки-шестеренки. Ее код:

HTML

CSS

Если вы читали хоть одну или даже две статьи о том, как использовать элементы формы, чтобы не применять JavaScript, то вы уже знаете, что нужно использовать input’ы вместе с лейблами. А значит, если хоть один удалить, то ничего не сработает. У нас есть чекбокс с id=»settings-btn» и лейбл с атрибутом for, указывающим на значение id. Также я добавил класс settings-btn, чтобы использовать его потом.

В CSS лейбл спозиционирован фиксировано position: fixed с соответствующими значениями top и right. Следом идет белый бокс, якобы содержащий кнопки:

HTML

CSS

Наш бокс это пустой DIV с классами «buttons-wrapper» и «settings-box-element». Как я уже говорил выше, последний класс в основном используется для добавления z-index. «buttons-wrapper» нужен чтобы стилизовать сам DIV. И, как вы можете заметить, боксу задана ширина в 200px и высота в 240px. Это чтобы вместились 5 кнопок, можете посмотреть демо. Также задано позиционирование fixed и соответствующие значения right top. Единственное, что стоит отметить, что значение свойства right должно совпадать с шириной блока, но с отрицательным значением (чтобы блок исчез из поля зрения).

Теперь взглянем на код оставшихся 5 кнопок. В комментариях указан фон, к которому относится кнопка:

Обратите внимание на то, что первый чекбокс уже отмечен атрибутом «checked». Мы используем его по умолчанию.
Каждый инпут имеет свой id, а каждый лейбл свой for, и они совпадают между собой. И вы можете знать, а может и нет, но весь секрет с атрибутом for в том, что, если мы его используем, то при клике на лейбл с атрибутом for автоматически выбирается чекбокс или радиокнопка. Вот почему мы можем использовать псевдокласс :checked.

Всем лейблам присвоен класс «layout-buttons». Он используется для добавления базовых и общих стилей, как ширина, padding, border и т.д. Другие классы используются для индивидуальной стилизации. Как вы могли заметить, для иконки шестеренки и для белого бокса используется фиксированное позиционирование с определенными значениями top и right. А значение top для каждого лейбла больше на 45px, чем у предыдущего; это нужно, чтобы кнопки стали в столбец, не налегая друг на друга. Также обратите внимание на то, что значение right равняется ширине кнопок, только с отрицательным значением.

Осталась последняя часть CSS кода:

Эти стили используются для замены стилей по умолчанию для лейблов с выбранными радиокнопками (у нас их 4). Я использовал смежные селекторы, чтобы определить из всех инпутов радиокнопки. Свойствам присвоено значение #e83737, цвет #fff.

Ничего сверх сложного. Оставшиеся элементы обернуты DIV’ом.

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

Итак, основной контент обернут в div с классом class=»main-wrapper». И, как вы увидите позже, чтобы изменить стили этого DIV’а, нам нужно будет написать что-то похожее:

Чтобы выбрать главный DIV мы используем селектор ~.

Клик по иконке настроек

По клику должен появляться блок настроек. Код ниже позволяет это сделать:

Когда пользователь кликает на иконку настроек, будет выбран чекбокс с id=»settings-btn». После нажатия происходит следующее:

Оба селектора в нашем примере незаменимы, и без них ничего бы не работало.

Замена фона

Я напомню вам HTML радио кнопок:

Мы будем менять фон у элемента .main-wrapper. CSS код:

По HTML коду мы имеем 4 набора инпутов типа type=»radio» и 4 лейбла. По клику на любой лейбл будет выбран связанный с ним инпут, а значит сработает псевдокласс :checked. Затем в зависимости от выбранного лейбла будет применен один из четырех стилей к блоку-обертке.

Прячем/показываем контент

Я использую чекбокс для отображения и скрытия контента:

В этом случае, когда пользователь кликает на соответствующий лейбл, тем самым выбирая чекбокс, мы даем браузеру команду выбрать элемент с классом class=»content» и установить значение display: none.

webformyself.com

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <div class="tabs-conf">   <ul class="tabs__caption">  <li class="tabs__caption-item active">Конференц-зал №20</li>  <li class="tabs__caption-item">Конференц-зал "Театральный"</li>  <li class="tabs__caption-item">Конференц-зал №7</li>  <li class="tabs__caption-item">Конференц-зал №10</li>  </ul>   <div class="tabs__content-conf active">  <div class="tabs__content-conf-text">  <p class="b-tabs-conf-title">Конференц-зал №20</p>  <div id="myForm" class="b-form-conf">  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-1" class="b-radio-conf" name="radioName" value="Театр" />  <label for="c20-1">Театр</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-2" class="b-radio-conf" name="radioName" value="Классная комната" />  <label for="c20-2">Классная комната</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-3" class="b-radio-conf" name="radioName" value="Классная комната" disabled/>  <label for="c20-3">Круглый стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-4" class="b-radio-conf" name="radioName" value="П-стол" disabled/>  <label for="c20-4">П-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-5" class="b-radio-conf" name="radioName" value="T-стол" />  <label for="c20-5">T-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-6" class="b-radio-conf" name="radioName" value="Переговорный стол" />  <label for="c20-6">Переговорный стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-7" class="b-radio-conf" name="radioName" value="Банкет" disabled/>  <label for="c20-7">Банкет</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c20-8" class="b-radio-conf" name="radioName" value="Фуршет" disabled/>  <label for="c20-8">Фуршет</label></div>  <div class="clr"></div>  </div>  </div>  </div>   <div class="tabs__content-conf">  <div class="tabs__content-conf-text">  <p class="b-tabs-conf-title">Конференц-зал "Театральный"</p>  <div id="myForm" class="b-form-conf">  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-1" class="b-radio-conf" name="radioName" value="Театр" />  <label for="ct-1">Театр</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-2" class="b-radio-conf" name="radioName" value="Классная комната" disabled/>  <label for="ct-2">Классная комната</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-3" class="b-radio-conf" name="radioName" value="Классная комната" disabled/>  <label for="ct-3">Круглый стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-4" class="b-radio-conf" name="radioName" value="П-стол" disabled/>  <label for="ct-4">П-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-5" class="b-radio-conf" name="radioName" value="T-стол" disabled/>  <label for="ct-5">T-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-6" class="b-radio-conf" name="radioName" value="Переговорный стол" disabled/>  <label for="ct-6">Переговорный стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-7" class="b-radio-conf" name="radioName" value="Банкет" disabled/>  <label for="ct-7">Банкет</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="ct-8" class="b-radio-conf" name="radioName" value="Фуршет" disabled/>  <label for="ct-8">Фуршет</label></div>  <div class="clr"></div>  </div>  </div>  </div>     <div class="tabs__content-conf">  <div class="tabs__content-conf-text">  <p class="b-tabs-conf-title">Конференц-зал №7</p>  <div id="myForm" class="b-form-conf">  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-1" class="b-radio-conf" name="radioName" value="Театр" />  <label for="c7-1">Театр</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-2" class="b-radio-conf" name="radioName" value="Классная комната" />  <label for="c7-2">Классная комната</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-3" class="b-radio-conf" name="radioName" value="Классная комната" disabled/>  <label for="c7-3">Круглый стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-4" class="b-radio-conf" name="radioName" value="П-стол" />  <label for="c7-4">П-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-5" class="b-radio-conf" name="radioName" value="T-стол" />  <label for="c7-5">T-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-6" class="b-radio-conf" name="radioName" value="Переговорный стол" />  <label for="c7-6">Переговорный стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-7" class="b-radio-conf" name="radioName" value="Банкет" disabled/>  <label for="c7-7">Банкет</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c7-8" class="b-radio-conf" name="radioName" value="Фуршет" disabled/>  <label for="c7-8">Фуршет</label></div>  <div class="clr"></div>  </div>  </div> </div>  <div class="tabs__content-conf">  <div class="tabs__content-conf-text">  <p class="b-tabs-conf-title">Конференц-зал №10</p>  <div id="myForm" class="b-form-conf">  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-1" class="b-radio-conf" name="radioName" value="Театр" />  <label for="c10-1">Театр</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-2" class="b-radio-conf" name="radioName" value="Классная комната" />  <label for="c10-2">Классная комната</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-3" class="b-radio-conf" name="radioName" value="Классная комната" />  <label for="c10-3">Круглый стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-4" class="b-radio-conf" name="radioName" value="П-стол" />  <label for="c10-4">П-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-5" class="b-radio-conf" name="radioName" value="T-стол" />  <label for="c10-5">T-стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-6" class="b-radio-conf" name="radioName" value="Переговорный стол" />  <label for="c10-6">Переговорный стол</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-7" class="b-radio-conf" name="radioName" value="Банкет" disabled/>  <label for="c10-7">Банкет</label></div>  <div class="b-conf-wrap-radio">  <img class="b-conf-wrap-radio-img" src="http://placehold.it/100x100/FFB6C1/222222">  <input type="radio" id="c10-8" class="b-radio-conf" name="radioName" value="Фуршет" disabled/>  <label for="c10-8">Фуршет</label></div>  <div class="clr"></div>  </div>  </div> </div>   </div>     

codepen.io

The value attribute

The value attribute is a DOMString containing the radio button’s value. The value is never shown to the user by their user agent. Instead, it’s used to identify which radio button in a group is selected.

Defining a radio group

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

You can have as many radio groups on a page as you like, as long as each has its own unique name.

For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to "contact" but one with the value "email", one with the value "phone", and one with the value "mail". The user never sees the value or the name (unless you expressly add code to display it).

The resulting HTML looks like this:

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

Here you see the three radio buttons, each with the name set to "contact" and each with a unique value that uniquely identifies that individual radio button within the group. They each also have a unique id, which is used by the <label> element’s for attribute to associate the labels with the radio buttons.

You can try out this example here:

Data representation of a radio group

When the above form is submitted with a radio button selected, the form’s data includes an entry in the form "contact=value". For example, if the user clicks on the «Phone» radio button then submits the form, the form’s data will include the line "contact=phone".

If you omit the value attribute in the HTML, the submitted form data assigns the value "on" to the group. In this scenario, if the user clicked on the «Phone» option and submitted the form, the resulting form data would be "contact=on", which isn’t helpful. So don’t forget to set your value attributes!

It’s fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the "checked" state. See Selecting a radio button by default below.

Let’s add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a <pre> block to output the form data into:

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

Then we add some JavaScript to set up an event listener on the submit event, which is sent when the user clicks the «Submit» button:

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

Try this example out and see how there’s never more than one result for the "contact" group.

Additional attributes

In addition to the common attributes shared by all <input> elements, "radio" inputs support the following attributes:

Attribute Definition
checked A Boolean indicating whether or not this radio button is the currently-selected item in the group

checked

A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.Delete Rows

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the autocomplete attribute to control this feature.

Using radio inputs

We already covered the fundamentals of radio buttons above. Let’s now look at the other common radio-button-related features and techniques you may need to know about.

Selecting a radio button by default

To make a radio button selected by default, you simply include checked attribute, as shown in this revised version of the previous example:

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

In this case, the first radio button is now selected by default.

Providing a bigger hit area for your radio buttons

In the above examples, you may have noticed that you can select a radio button by clicking on its associated <label> element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.

Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.

Validation

Radio buttons don’t participate in constraint validation; they have no real value to be constrained.

Styling radio inputs

The following example shows a slightly more thorough version of the example we’ve seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:

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

There’s not much new to note here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely and in a semantic way.

The CSS involved is a bit more significant:

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

Most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system’s native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we’ve used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the :checked pseudo-class is used to specify the styles for the radio button’s appearance when selected.

Notice that when clicking on a radio button, there’s a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you’d want in a real web application, but it definitely shows off the possibilities.

Specifications

Specification Status  
HTML Living Standard
The definition of ‘<input type=»radio»>’ in that specification.
Living Standard  
HTML5
The definition of ‘<input type=»radio»>’ in that specification.
Recommendation  

developer.mozilla.org

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.