— 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 изменяется путём добавления блока
<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-radius, а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс :checked используется для указания стилей внешнего вида кнопок при их выборе.
Стоит иметь в виду, что свойство appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере!
Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки «Submit» имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.
BCD tables only load in the browser
Radio buttons, checkboxes и другие виды селекторов
Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются. В отличие от большинства других моих статей, основное внимание будет уделено двум компонентам (радиокнопкам (radio buttons) и флажкам (checkboxes), а также их сравнению с парой других селекторов.
Читайте также: Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)
1. Что такое селекторы
Селектор (selector) – это поле ввода, в котором пользователь должен выбрать один (или несколько) параметров, в отличие от текстового поля, в котором пользователь имеет полную свободу действий. Селекторы, как прически Lady Gaga, бывают разных форм и стилей. Выпадающие списки, флажки, переключатели, ползунки и т.д. – это разные типы селекторов, но они не похожи друг на друга. Основное функциональное различие между этими типами селекторов состоит в том, сколько вариантов пользователь может выбрать: один или несколько.
В идеальном мире, где нет голода, браконьерства, парниковых газов или преступлений, я бы ходатайствовала об изменении названия радиокнопок на «одиночные селекторы», а флажков на «мультиселекторы». Я думаю, что подобные названия намного лучше описывают их функциональность, но, увы, эти устаревшие названия слишком укоренились, и, вероятно, останутся с нами навсегда.
2. Анатомия флажков и радиокнопок
Хотя, в этой статье мы рассмотрим различные типы селекторов, мы сосредоточимся на радиокнопках (radio buttons) и флажках (checkboxes). Ниже их анатомия.
Анатомия радиокнопок и флажковПримечание: Иногда люди говорят «radio button»/ «checkbox», когда имеют ввиду метку и селектор вместе, в то время, как в других случаях они подразумевают только селектор. Я предпочитаю последний вариант.
3. В чем разница между радиокнопками и флажками
Радиокнопки и флажки очень похожи, за исключением нескольких ключевых отличий. Основное отличие состоит в том, что с помощью радиокнопок вы можете выбрать только один элемент, а с помощью флажков – любое количество. Я собиралась составить таблицу, чтобы объяснить это, но не стала. Не потому, что а) это звучало скучно, б) Medium не позволяет вставлять таблицы, а поэтому у меня была лучшая идея:
Викторина! Ура! Давайте посмотрим, кто даст 100% правильных ответов.
1) Сколько элементов можно выбрать в стандартном компоненте флажков (если не указано иное)?
- 1
- 3
- Неограниченное кол-во
- 0
2) Какова форма селектора радиокнопки?
- Квадрат
- Круг
- Шестиугольник
- Треугольник
3) Если вы хотите создать интерфейс, в котором пользователь сможет выбрать несколько начинок для мороженого, вы должны использовать:
- Радиокнопки
- Флажки
4) Если вы хотите создать интерфейс, в котором пользователь может выбрать тип банковского счета, который он может открыть, вы должны использовать:
- Радиокнопки
- Флажки
5) Если бы вы хотели создать селектор «Подписаться на рассылку», какой тип вы бы использовали?
- Радиокнопка
- Флажок
6) Выберите на картинке ниже вариант с радиокнопкой.
- A
- B
ОТВЕТЫ:
1): 3. Неограниченное кол-во
2): 2. Круг
3): 2. Флажки
4): 1. Радиокнопки
5): 2. Флажок
6): 1. A
Вы справились! (Надеюсь).
4. Распространенные стили селекторов
Ниже представлен ряд распространенных стилей флажков и радиокнопок, с которыми вы можете столкнуться в Интернете.
Стандартный стиль (радиокнопки / флажки)
Самый стандартный стиль флажков и радиокнопок – это кнопки с «галочками» или заполненные кружки. Я предпочитаю кнопки с галочкой, если вы не имеете дело с образовательными тестами (см. ниже).
Стандартный стиль с галочкамиСтандартный стиль без галочекСтиль кнопки в тестах (радиокнопки / флажки)Когда пользователь отвечает на вопросы теста или викторины, мы должны убедиться в двух вещах: 1) что он может четко видеть, какие ответы выбирает, 2) что он не запутается, когда получит фидбек на свой ответ.
Если вы посмотрите на приведенный ниже пример, то увидите, что «галочка» может сбить с толку – кажется, что эти ответы верны, хотя еще не проверены.
Селекторы викторины, показывающие, что наличие галочки вызывает путаницуОсновной стиль с изображением (радиокнопки/ флажки)Хотя этот стиль селектора может дать пользователю лучшее представление о том, что он выбирает, я редко использую его, поскольку, все равно изображение всегда будет слишком маленьким, чтобы его можно было разглядеть.
Радиокнопки и флажки с изображениями. Изображения: (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocauxИзображения в стиле сетки (одно / несколько)Я предпочитаю этот стиль изображений базовому, поскольку вы можете сделать изображения намного больше, и они лучше смотрятся.
Селекторы с сеткой изоражений. Изображения (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocauxВпервые я узнал об этом стиле в тестах Buzzfeed. Они просто показывают изображение без текста. Если вы используете этот макет, пожалуйста, убедитесь, что у вас есть альтернативный текст для пользователей, использующих программу чтения с экрана или на случай плохого подключение к Интернету.
Пример одиночного селектора в стиле сетки. Скриншот: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-youМногоуровневые флажки
Многоуровневые флажки необходимы, если элементы нужно разделить на группы. Также обратите внимание, что, если выбраны лишь несколько дочерних элементов, родительская категория выбирается только частично.
Многоуровневые флажкиЭто один из наиболее сложных элементов интерфейса, потому что верхний элемент (родительский) действует одновременно, как селектор и, как аккордеон. А что, если вы нажмете на метку, она выберет селектор или откроет / закроет аккордеон? Я не смогла найти определенное исследование того, какой вариант лучше, поскольку это необычный паттерн, но в прошлом я делала метку не селектором, а частью аккордеона. Пишите в комментариях, если у вас есть предложения, как решить эту дилемму.
Принудительный выбор
Иногда вам нужно разрешить пользователям выбирать только определенное количество элементов. Если пользователь выберет на одно значение больше разрешенного количества, самый первый выбранный вариант будет заменен («вытеснен») последним выбранным вариантом.
Флажки с принудительным выборомСтиль кнопки (одиночный / множественный выбор)
Этот стиль позволяет вам складывать много разных элементов в стек. Это означает, что вы можете сэкономить место и иметь больше вариантов ответа. Поскольку этот паттерн не является распространенным, я предлагаю вам сообщить пользователю, сколько вариантов он может выбрать. Хотя нет причин не использовать его для одиночных селекторов, я никогда не встречала такой вариант.
Селектор в стиле кнопкиЭтот стиль очень распространен, когда пользователя просят выбрать несколько тегов контента (хотя он может не знать об этом). В приведенном ниже примере Apple Music просит пользователей выбрать свои любимые жанры, которые, в свою очередь, порекомендуют песни и исполнителей в зависимости от выбора пользователя.
Выбор жанра Apple Music при регистрации. Изображение: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=TПереключатель (одиночный выбор)
Переключатель (toggle) чаще всего используется для настроек и позволяет пользователю выбирать между вариантами да / нет.
На мобильном устройстве сам переключатель обычно находится в крайнем правом положении, а метка – в крайнем левом. Это сделано для того, чтобы большому пальцу правой руки было легче менять параметры.
Пример переключателя5. Состояния
Флажки и радиокнопки должны изменять свое состояние / внешний вид, чтобы пользователи знали, что они были выбраны. Нам нужно добавить эти маленькие визуальные подсказки, чтобы подтолкнуть пользователя в правильном направлении, используя паттерны, которые они уже знают и понимают.
По умолчанию / активно (Default/active)
Это начальное состояние селекторов. Это состояние указывает пользователю, что он может кликать по пунктам в вопросах.
Пример радиокнопок и флажков в их стандартном / активном состоянииНеактивно (Inactive)
Когда установлено неактивное состояние, пользователь не сможет взаимодействовать с вариантами ответа. Пользователь редко сталкивается с этим состоянием, если это не указано в правилах продукта.
Пример радиокнопок и флажков в их неактивном состоянииНаведение курсора (Hover)
Как и кнопки, селекторы должны указывать пользователям, что они интерактивны или кликабельны. Обычно это делается с помощью подсветки фона элемента при наведении курсора. Это также указывает, какая область элементов является кликабельной. Если вы уберете курсор, он должен вернуться в исходное состояние.
Пример радиокнопок и флажков в состоянии наведения курсораСовет для нубов: у сенсорных устройств нет состояния наведения курсора
Фокус / выделение (Focus/highlighted)
Фокус или выделенное состояние обычно обозначается синим ореолом вокруг активируемого кликом элемента. Вы можете убедиться в этом сами, щелкнув по интерфейсу. Пользователь редко сталкивается с этим состоянием, если только не нажмет «Enter», чтобы выбрать элемент.
Пример радиокнопок и флажков в их состоянии фокуса / выделенияНажато (Pressed)
Это состояние, когда пользователь удерживает свою мышь / палец, и элемент указывает пользователю, что на него нажимают.
Пример радиокнопок и флажков в их нажатом состоянииВыбрано (Selected)
После того, как пользователь щелкнул по элементу, интерфейс должен сообщить ему об этом. Как упоминалось ранее, радиокнопки могут иметь только один выбранный элемент, а флажки могут иметь несколько, в зависимости от бизнес-правил.
Пример радиокнопок и флажков в их выбранном состоянииОшибка обратной связи (Fail feedback)
При свободном вводе текста пользователь может сделать опечатку и т. д. Однако, поскольку параметры в селекторе предопределены, должен быть только один тип обратной связи при ошибке: «incomplete», который пользователь получит только, если нажмет кнопку «отправить» до того, как закончат заполнение формы. Для флажков это будет необходимо, только если вопрос заставит их выбрать один или несколько элементов.
Пример радиокнопок и флажков в состоянии ошибки6. Правила для текста метки
Существует только одно жесткое правило для меток селектора: быть последовательным.
- Убедитесь, что регистр на каждой метке селектора одинаков (регистр предложений, регистр заголовков и т. д.)
- Убедитесь, что все элементы либо заканчиваются точкой, либо нет.
- Постарайтесь убедиться, что все элементы являются либо предложением, либо фразой, либо словом. Старайтесь избегать, чтобы часть вариантов была предложениями, а другая – отдельными словами. Использование комбинации усложняет решение вопроса о том, какой регистр и пунктуацию использовать.
7. Когда вы должны их использовать
Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).
Когда использовать радиокнопки
У меня есть четыре правила, когда использовать радиокнопки. Вот они:
- Когда вы хотите, чтобы пользователь выбрал только один элемент
Если вы хотите, чтобы пользователь выбрал более одного элемента, лучше использовать флажки. - Если у вас меньше шести вариантов ответа
В зависимости от ваших правил дизайна, если есть более пяти или шести элементов, используйте раскрывающийся список. Да, да, я знаю, что они неуклюжие, но они экономят много пространства вашего дизайна.
При этом, если пространство не является проблемой, возможно, стоит использовать радиокнопки – особенно, если вы проектируете для мобильных устройств. Я видела, что это идеально подходит для служб доставки еды.
Если хотите узнать больше о раскрывающихся списках, прочитайте мою предыдущую статью.
- Вы хотите принудить выбрать один вариант ответа
Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.
- Если у вопроса есть только два варианта: да / нет
Если ваш вопрос «Хотите получать уведомления?», «Воспроизвести фоновую музыку?» и т. д., то лучше используйте переключатель. Они занимают гораздо меньше места, являются более понятными, и поскольку это относительно новый тип селектора, они модные.
Сравнение радиокнопок и переключателяДополнение к статье после ее публикации:
5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта
Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.
Этот вариант предложил Thomas Veit, спасибо ему:)
6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором
Вы очень редко будете встречать этот вариант. Переключатели со множественным выбором соединяют в себе лучшее от радиокнопок и переключателей. Компактные, аккуратные и удобные. Я бы рекомендовал использовать их только в том случае, если метки ответов короткие – в противном случае это может стать неудобным на мобильных устройствах.
Пример переключателя с множественным выборомЭтот вариант предложил Thomas Weitz, спасибо ему.
Когда использовать флажки
У меня есть два правила, когда использовать флажки, и вот они:
- Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать
Если вы хотите, чтобы ваш пользователь мог добавить несколько начинок в свою пиццу, этот вариант для вас. Пользователь может выбрать все, несколько или ни один из флажков.
- Один элемент
Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?
Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.
8. Проверка доступности
Вы сделали это! Вы завершили проектирование своих селекторов, и пришло время отправить их команде разработчиков. Но погодите! Вы проверили их доступность?
- Соответствует ли ваш селектор стандартам цветового контраста WCAG AAA? Вместо этого некоторые дизайнеры используют стандарты АА. Моя любимая программа проверки контрастности – WebAIM.
- Варианты ответа / элементы больше, чем 44px для сенсорных экранов? (Иногда используют 36px.)
- Расстояние между каждым вариантом ответа / элементом больше 8px?
- Всегда ли видна метка / вопрос?
- Есть ли в соответствующих полях полезный текст обратной связи? (Например, «Пожалуйста, заполните этот вопрос»)
Подробнее: https://webaim.org/techniques/forms/controls
9. Мысли в заключение
После этой статьи я собираюсь отойти от темы паттернов интерфейса форм и перейти к другим типам паттернов интерфейса. НО, если вы хотите, чтобы я рассмотрела другие типы полей формы, сообщите об этом в комментариях.
Берегите себя, ибо сейчас мир совсем обезумел.
Работа с полями ввода форм
Работа с полями ввода форм
Последнее обновление: 17.03.2021
Формы могут содержать различные элементы — текстовые поля, флажки, переключатели и т.д., обработка которых имеет свои особенности.
Обработка флажков
Флажки или чекбоксы (html-элемент <input type="checkbox"/>) могут находиться в двух состояниях: отмеченном (checked) и
неотмеченном. Например:
Запомнить: <input type="checkbox" name="remember" checked="checked" />
Если флажок находится в неотмеченном состоянии, например:
Запомнить: <input type="checkbox" name="remember" />
то при отправке формы значение данного флажка не передается на сервер.
Если флажок отмечен, то при отправке на сервер для поля remember будет передано значение on:
$remember = $_POST["remember"];
Если нас не устраивает значение on, то с помощью атрибута value мы можем установить нужное нам значение:
Запомнить: <input type="checkbox" name="remember" value="1" />
Иногда необходимо создать набор чекбоксов, где можно выбрать несколько значений. Например:
<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["technologies"])){
$technologies = $_POST["technologies"];
foreach($technologies as $item) echo "$item<br />";
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
<p>ASP.NET: <input type="checkbox" name="technologies[]" value="ASP.NET" /></p>
<p>PHP: <input type="checkbox" name="technologies[]" value="PHP" /></p>
<p>Node.js: <input type="checkbox" name="technologies[]" value="Node.js" /></p>
<input type="submit" value="Отправить">
</form>
</body>
</html>
В этом случае значение атрибута name должно иметь квадратные скобки. И тогда после отправки сервер будет получать массив отмеченных значений:
$technologies = $_POST["technologies"]; foreach($technologies as $item) echo "$item<br />";
В данном случае переменная $technologies будет представлять массив, который можно перебрать и выполнять все другие операции с массивами.
Переключатели
Переключатели или радиокнопки позволяют сделать выбор между несколькими взаимоисключающими вариантами:
<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["course"]))
{
$course = $_POST["course"];
echo $course;
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
<input type="radio" name="course" value="ASP.NET" />ASP.NET <br>
<input type="radio" name="course" value="PHP" />PHP <br>
<input type="radio" name="course" value="Node.js" />Node.js <br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
На сервер передается значение атрибута value у выбранного переключателя. Получение переданного значения:
if(isset($_POST["course"]))
{
$course = $_POST["course"];
echo $course;
}
Список
Список представляет элемент select, который предоставляет выбор одного или нескольких элементов:
<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["course"]))
{
$course = $_POST["course"];
echo $course;
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
<select name="course" size="1">
<option value="ASP.NET">ASP.NET</option>
<option value="PHP">PHP</option>
<option value="Ruby">RUBY</option>
<option value="Python">Python</option>
</select>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Элемент <select> содержит ряд вариантов выбора в виде элементов <option>:
Получить выбранный элемент в коде PHP как и обычное одиночное значение:
if(isset($_POST["course"]))
{
$course = $_POST["course"];
echo $course;
}
Но элемент <select> также позволяет сделать множественный выбор. И в этом случае обработка выбранных
значений изменяется, так как сервер получает массив значений:
<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
if(isset($_POST["courses"]))
{
$courses = $_POST["courses"];
foreach($courses as $item) echo "$item<br>";
}
?>
<h4>Форма ввода данных</h4>
<form method="POST">
<select name="courses[]" size="4" multiple="multiple">
<option value="ASP.NET">ASP.NET</option>
<option value="PHP">PHP</option>
<option value="Ruby">RUBY</option>
<option value="Python">Python</option>
</select><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
Такие списки имеют атрибут multiple="multiple". Для передачи массива также указываются в атрибуте name квадратные скобки:
name="courses[]"
Использование массивов HTML radiobutton в ASP.NET MVC
Я попытался следовать этому , но modelbinder по умолчанию позволил моему массиву null на стороне сервера.
HTML:
Question 1:
<input name="list[0]" type="radio" value="1000" />No
<input name="list[0]" type="radio" value="1001" />Yes
Question 2:
<input name="list[1]" type="radio" value="1002" />No
...
Действие контроллера:
public ActionResult Anamnesis(string[] list)
{
Если я выберу только второй «No» (list[0] отсутствует), то DefaultModelBinder невозможно преобразовать в массив.
Заранее спасибо!
Update#1
Переформатировано на основе комментария, спасибо!
Update#2
Просто хитрость: создал скрытый вход после всего элемента списка, и таким образом он работает. Но это безобразие, без сомнения.
Question 1:
<input name="list[0]" type="radio" value="1000" />No
<input name="list[0]" type="radio" value="1001" />Yes
<input type="hidden" name="list[0]"/>
Question 2:
<input name="list[1]" type="radio" value="1002" />No
<input type="hidden" name="list[1]"/>
...
Порядок это очень важно: скрытое значение передается только тогда, когда радио снято. Идея эта исходит от помощников ASP.NET MVC. (Кстати, я не могу использовать Html.RadioButton для архивирования этого поведения.)
c# asp.net-mvc model-view-controllerПоделиться Источник boj 17 июня 2009 в 22:41
2 ответа
- ASP.NET MVC AjaxHelpers рекомендуемое использование
Похоже, что все примеры, с которыми я сталкиваюсь, указывают на UpdateTargetId, чтобы отобразить содержимое HTML ответа Ajax. Это довольно сильно отличается от того, как это делается в мире Rails, где содержимое ответа содержит код JavaScript, который манипулирует страницей. Конвенция Rails…
- Использование ASP.NET MVC в качестве веб-службы
Есть ли у кого-нибудь опыт использования проекта ASP.NET MVC в качестве веб-сервиса? то есть использование ASP.NET MVC без представлений, поэтому другие приложения могут использовать URL для GET или POST для действий в контроллере. Кто-нибудь им пользовался? Если да, то есть ли какие-либо…
0
Ваше обновление #2, похоже, решает вашу проблему. Ваше обновление #2 также интересно тем, что вы также можете использовать этот подход для предоставления значения по умолчанию (например, 999), которое будет использоваться всякий раз, когда ничего не проверяется.
Возможно, есть еще один подобный способ сделать то, что вы просите, который основан на этой статье и который также использует скрытые входные данные. Идея заключается в том, что вы можете создать индексы для каждого из ваших радиоприемников, чтобы избежать ситуации, когда пропущенный ранее выбор в форме приводит к удалению всех последующих выборов:
Question 1:
<input name="list.Index" type="hidden" value="0" />
<input name="list[0]" type="radio" value="1000" />No
<input name="list[0]" type="radio" value="1001" />Yes
Question 2:
<input name="list.Index" type="hidden" value="1" />
<input name="list[1]" type="radio" value="1000" />No
<input name="list[1]" type="radio" value="1001" />Yes
Причина, по которой я предлагаю это, заключается в том, что вы можете связать свои ответы с конкретным вопросом с помощью уникального ID, а не просто использовать 0, 1, 2 и т. д. В статье, которую я связал, будет показан пример того, как это сделать.
Удачи вам!
-Майк
Поделиться Funka 26 июня 2009 в 00:33
-1
Атрибут name переключателя должен быть list, а не list[n].
Поделиться eulerfx 17 июня 2009 в 23:36
Похожие вопросы:
Использование контроллеров SessionLess в Asp.net MVC 3.0
Я новичок в ASP.Net MVC 3.0 и нашел концепцию контроллера SessionLess. Однако концепция мне не ясна, и не могли бы вы объяснить использование бессессионных контроллеров vs SessionState ? Каковы…
Использование проверки ASP.NET MVC в ASP.NET
В настоящее время я ищу элементы управления valiadation в javascript и ASP.NET и наткнулся на новый MVC jquery.validate.unobtrusive.js, который, по-видимому, использует теги данных в HTML для…
ASP.NET MVC: использование LINQ — XML для рендеринга (X)HTML
Было много дискуссий о движках просмотра для ASP.NET MVC и некоторые критические замечания в адрес встроенного tag-soup с for-loops и тому подобными вещами. Альтернативой или дополнением было…
ASP.NET MVC AjaxHelpers рекомендуемое использование
Похоже, что все примеры, с которыми я сталкиваюсь, указывают на UpdateTargetId, чтобы отобразить содержимое HTML ответа Ajax. Это довольно сильно отличается от того, как это делается в мире Rails,…
Использование ASP.NET MVC в качестве веб-службы
Есть ли у кого-нибудь опыт использования проекта ASP.NET MVC в качестве веб-сервиса? то есть использование ASP.NET MVC без представлений, поэтому другие приложения могут использовать URL для GET или…
Использование HtmlTextWriter в ASP.NET MVC
Я переношу какой-то старый код, где HtmlTextWriter широко используется для рендеринга элементов UI. Я переношу код на использование ASP.NET MVC 1.0. Насколько мне известно, я не использую ни одну из…
ASP.NET MVC 2 — Проверка переключателей
Как я могу проверить radiobutton в asp.net mvc?
Вспомогательные методы HTML приложения в Asp.Net MVC
Как мы знаем, что в asp.net mvc, если мы используем @HtmlTextbox(t1,Model.val) затем он создаст вывод html как <input type=text value=Value of val in Model/> но скорее с помощью htmlhelpers в…
Узнать значение выбранного RadioButton в asp.net проектирования MVC
<td> @if (ViewBag.MyList as System.Collections.IEnumerable != null) { int i = 1; foreach (var m in new SelectList(ViewBag.MyList as System.Collections.IEnumerable, Value, Text, 0)) {…
Как иметь простую страницу .html в Asp.net MVC
Я хочу добавить страницу html, доступную с помощью www.myhost.com/mypage. html, в мой проект ASP.net MVC. Я знаю, что нормой является использование контроллеров и представлений cshtml, но у меня…
| AccessKey | Возвращает или задает клавишу доступа, обеспечивающую быстрый переход к серверному веб-элементу управления.Gets or sets the access key that allows you to quickly navigate to the Web server control. (Унаследовано от WebControl) |
| Adapter | Возвращает конкретный адаптер браузера для элемента управления.Gets the browser-specific adapter for the control. (Унаследовано от Control) |
| AppRelativeTemplateSourceDirectory | Возвращает или задает относительно приложения виртуальный каталог объекта Page или UserControl, который содержит этот элемент управления.Gets or sets the application-relative virtual directory of the Page or UserControl object that contains this control. (Унаследовано от Control) |
| Attributes | Получает коллекцию произвольных атрибутов (только для отрисовки), которые не соответствуют свойствам элемента управления.Gets the collection of arbitrary attributes (for rendering only) that do not correspond to properties on the control. (Унаследовано от WebControl) |
| AutoPostBack | Возвращает или задает значение, показывающее, отправляется ли автоматически состояние CheckBox обратно на сервер при его выборе.Gets or sets a value indicating whether the CheckBox state automatically posts back to the server when clicked. (Унаследовано от CheckBox) |
| BackColor | Получает или задает цвет фона серверного веб-элемента управления.Gets or sets the background color of the Web server control. (Унаследовано от WebControl) |
| BindingContainer | Возвращает элемент управления, который содержит привязку данных элемента управления.Gets the control that contains this control’s data binding. (Унаследовано от Control) |
| BorderColor | Возвращает или задает цвет рамки элемента управления Веба.Gets or sets the border color of the Web control. (Унаследовано от WebControl) |
| BorderStyle | Получает или задает стиль границы серверного веб-элемента управления.Gets or sets the border style of the Web server control. (Унаследовано от WebControl) |
| BorderWidth | Возвращает или задает ширину границы серверного веб-элемента управления.Gets or sets the border width of the Web server control. (Унаследовано от WebControl) |
| CausesValidation | Возвращает или задает значение, показывающее, выполняется ли проверка при выборе элемента управления CheckBox.Gets or sets a value indicating whether validation is performed when the CheckBox control is selected. (Унаследовано от CheckBox) |
| Checked | Возвращает или задает значение, указывающее, выбран ли элемент управления CheckBox.Gets or sets a value indicating whether the CheckBox control is checked. (Унаследовано от CheckBox) |
| ChildControlsCreated | Возвращает значение, которое указывает, созданы ли дочерние элементы управления серверного элемента управления.Gets a value that indicates whether the server control’s child controls have been created. (Унаследовано от Control) |
| ClientID | Получает идентификатор элемента управления для HTML-разметки, созданной ASP.NET.Gets the control ID for HTML markup that is generated by ASP.NET. (Унаследовано от Control) |
| ClientIDMode | Возвращает или задает алгоритм, используемый для создания значения свойства ClientID.Gets or sets the algorithm that is used to generate the value of the ClientID property. (Унаследовано от Control) |
| ClientIDSeparator | Возвращает значение символа разделителя, используемого в свойстве ClientID.Gets a character value representing the separator character used in the ClientID property. (Унаследовано от Control) |
| Context | Возвращает объект HttpContext, связанный с серверным элементом управления для текущего веб-запроса.Gets the HttpContext object associated with the server control for the current Web request. (Унаследовано от Control) |
| Controls | Возвращает объект ControlCollection, который представляет дочерние элементы управления для указанного элемента управления сервера в иерархии пользовательского интерфейса.Gets a ControlCollection object that represents the child controls for a specified server control in the UI hierarchy. (Унаследовано от Control) |
| ControlStyle | Возвращает или задает стиль серверного веб-элемента управления.Gets the style of the Web server control. Это свойство используется преимущественно разработчиками элементов управления.This property is used primarily by control developers. (Унаследовано от WebControl) |
| ControlStyleCreated | Возвращает значение, определяющее, был ли объект Style создан для свойства ControlStyle.Gets a value indicating whether a Style object has been created for the ControlStyle property. Этот свойство в основном используется разработчиками элементов управления.This property is primarily used by control developers. (Унаследовано от WebControl) |
| CssClass | Возвращает или задает класс каскадных листов стилей (CSS), преобразовываемый для просмотра в серверном веб-элементе управления на клиентском компьютере.Gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client. (Унаследовано от WebControl) |
| DataItemContainer | Возвращает ссылку на контейнер именования, если контейнер именования реализует класс IDataItemContainer.Gets a reference to the naming container if the naming container implements IDataItemContainer. (Унаследовано от Control) |
| DataKeysContainer | Возвращает ссылку на контейнер именования, если контейнер именования реализует класс IDataKeysControl.Gets a reference to the naming container if the naming container implements IDataKeysControl. (Унаследовано от Control) |
| DesignMode | Возвращает значение, указывающее, используется ли элемент управления на поверхности разработки.Gets a value indicating whether a control is being used on a design surface. (Унаследовано от Control) |
| Enabled | Возвращает или задает значение, определяющее, включен ли серверный веб-элемент управления.Gets or sets a value indicating whether the Web server control is enabled. (Унаследовано от WebControl) |
| EnableTheming | Возвращает или задает значение, указывающее, применяются ли темы к этому элементу управления.Gets or sets a value indicating whether themes apply to this control. (Унаследовано от WebControl) |
| EnableViewState | Получает или задает значение, указывающее запрашивающему клиенту, сохраняет ли серверный элемент управления состояние представления и состояние представления своих дочерних элементов управления.Gets or sets a value indicating whether the server control persists its view state, and the view state of any child controls it contains, to the requesting client. (Унаследовано от Control) |
| Events | Возвращает список делегатов обработчиков событий элемента управления.Gets a list of event handler delegates for the control. Это свойство доступно только для чтения.This property is read-only. (Унаследовано от Control) |
| Font | Возвращает свойства шрифта, связанные с серверным веб-элементом управления.Gets the font properties associated with the Web server control. (Унаследовано от WebControl) |
| ForeColor | Возвращает или задает основной цвет (обычно это цвет текста) для серверного веб-элемента управления.Gets or sets the foreground color (typically the color of the text) of the Web server control. (Унаследовано от WebControl) |
| GroupName | Получает или задает имя группы, к которой принадлежит переключатель.Gets or sets the name of the group that the radio button belongs to. |
| HasAttributes | Получает значение, определяющие наличие атрибутов у элемента управления.Gets a value indicating whether the control has attributes set. (Унаследовано от WebControl) |
| HasChildViewState | Возвращает значение, которое указывает на наличие сохраненных параметров состояния представления у дочернего элемента серверного элемента управления.Gets a value indicating whether the current server control’s child controls have any saved view-state settings. (Унаследовано от Control) |
| Height | Получает или задает высоту серверного веб-элемента управления.Gets or sets the height of the Web server control. (Унаследовано от WebControl) |
| ID | Возвращает или задает программный идентификатор, назначенный серверному элементу управления.Gets or sets the programmatic identifier assigned to the server control. (Унаследовано от Control) |
| IdSeparator | Возвращает символ, используемый для разделения идентификаторов элементов управления.Gets the character used to separate control identifiers. (Унаследовано от Control) |
| InputAttributes | Возвращает ссылку на коллекцию атрибутов для обработанного элемента ввода в элементе управления CheckBox.Gets a reference to the collection of attributes for the rendered input element of the CheckBox control. (Унаследовано от CheckBox) |
| IsChildControlStateCleared | Возвращает значение, указывающее, имеют ли элементы управления в этом элементе управления состояние элемента управления.Gets a value indicating whether controls contained within this control have control state. (Унаследовано от Control) |
| IsEnabled | Возвращает значение, определяющее, включен ли элемент управления.Gets a value indicating whether the control is enabled. (Унаследовано от WebControl) |
| IsTrackingViewState | Возвращает значение, отражающее сохранение изменений в состояние представления серверного элемента управления.Gets a value that indicates whether the server control is saving changes to its view state. (Унаследовано от Control) |
| IsViewStateEnabled | Возвращает значение, указывающее, используется ли состояние представления для этого элемента управления.Gets a value indicating whether view state is enabled for this control. (Унаследовано от Control) |
| LabelAttributes | Возвращает ссылку на коллекцию атрибутов для обработанного элемента LABEL в элементе управления CheckBox.Gets a reference to the collection of attributes for the rendered LABEL element of the CheckBox control. (Унаследовано от CheckBox) |
| LoadViewStateByID | Возвращает значение, указывающее, участвует ли элемент управления в загрузке состояния представления ID вместо индекса.Gets a value indicating whether the control participates in loading its view state by ID instead of index. (Унаследовано от Control) |
| NamingContainer | Возвращает ссылку на контейнер именования элемента управления, создающий уникальное пространство имен для различения серверных элементов управления с одинаковыми значениями свойства ID.Gets a reference to the server control’s naming container, which creates a unique namespace for differentiating between server controls with the same ID property value. (Унаследовано от Control) |
| Page | Возвращает ссылку на экземпляр Page, содержащий серверный элемент управления.Gets a reference to the Page instance that contains the server control. (Унаследовано от Control) |
| Parent | Возвращает ссылку на родительский элемент управления серверного элемента управления в иерархии элементов управления страницы.Gets a reference to the server control’s parent control in the page control hierarchy. (Унаследовано от Control) |
| RenderingCompatibility | Возвращает значение, которое задает версию ASP.NET, с которой совместим созданный HTML.Gets a value that specifies the ASP.NET version that rendered HTML will be compatible with. (Унаследовано от Control) |
| Site | Возвращает сведения о контейнере, который содержит текущий элемент управления при визуализации на поверхности конструктора.Gets information about the container that hosts the current control when rendered on a design surface. (Унаследовано от Control) |
| SkinID | Возвращает или задает обложку, применяемую к элементу управления.Gets or sets the skin to apply to the control. (Унаследовано от WebControl) |
| Style | Возвращает коллекцию атрибутов текста, которые будут отображены в виде атрибута стиля на внешнем теге серверного веб-элемента управления.Gets a collection of text attributes that will be rendered as a style attribute on the outer tag of the Web server control. (Унаследовано от WebControl) |
| SupportsDisabledAttribute | Получает значение, указывающее, должен ли элемент управления устанавливать для атрибута |
| TabIndex | Возвращает или задает индекс перехода по клавише Tab для серверного веб-элемента управления.Gets or sets the tab index of the Web server control. (Унаследовано от WebControl) |
| TagKey | Возвращает значение HtmlTextWriterTag, которое соответствует этому элементу управления веб-сервера.Gets the HtmlTextWriterTag value that corresponds to this Web server control. Это свойство используется преимущественно разработчиками элементов управления.This property is used primarily by control developers. (Унаследовано от WebControl) |
| TagName | Возвращает имя тега элемента управления.Gets the name of the control tag. Это свойство используется преимущественно разработчиками элементов управления.This property is used primarily by control developers. (Унаследовано от WebControl) |
| TemplateControl | Возвращает или задает ссылку на шаблон, содержащий этот элемент управления.Gets or sets a reference to the template that contains this control. (Унаследовано от Control) |
| TemplateSourceDirectory | Возвращает виртуальный каталог Page или UserControl, содержащий текущий серверный элемент управления.Gets the virtual directory of the Page or UserControl that contains the current server control. (Унаследовано от Control) |
| Text | Возвращает или задает текстовую подпись, связанную с объектом CheckBox.Gets or sets the text label associated with the CheckBox. (Унаследовано от CheckBox) |
| TextAlign | Возвращает или задает выравнивание текстовой подписи, связанной с элементом управления CheckBox.Gets or sets the alignment of the text label associated with the CheckBox control. (Унаследовано от CheckBox) |
| ToolTip | Возвращает или задает текст, который отображается при наведении указателя мыши на серверный веб-элемент управления.Gets or sets the text displayed when the mouse pointer hovers over the Web server control. (Унаследовано от WebControl) |
| UniqueID | Возвращает уникальный идентификатор серверного элемента управления в иерархии.Gets the unique, hierarchically qualified identifier for the server control. (Унаследовано от Control) |
| ValidateRequestMode | Возвращает или задает значение, указывающее, проверяет ли элемент управления полученный из браузера клиентский ввод на предмет потенциально опасных значений.Gets or sets a value that indicates whether the control checks client input from the browser for potentially dangerous values. (Унаследовано от Control) |
| ValidationGroup | Получает или задает группу элементов управления, для которых элемент управления CheckBox инициирует проверку при обратной передаче на сервер.Gets or sets the group of controls for which the CheckBox control causes validation when it posts back to the server. (Унаследовано от CheckBox) |
| ViewState | Возвращает словарь сведений о состоянии, позволяющих сохранять и восстанавливать состояние представления серверного элемента управления при нескольких запросах одной и той же страницы.Gets a dictionary of state information that allows you to save and restore the view state of a server control across multiple requests for the same page. (Унаследовано от Control) |
| ViewStateIgnoresCase | Возвращает значение, указывающее, является ли объект StateBag нечувствительным к регистру.Gets a value that indicates whether the StateBag object is case-insensitive. (Унаследовано от Control) |
| ViewStateMode | Возвращает или задает режим состояния представления данного элемента управления.Gets or sets the view-state mode of this control. (Унаследовано от Control) |
| Visible | Получает или задает значение, указывающее, отрисовывается ли серверный элемент управления как пользовательский интерфейс на странице.Gets or sets a value that indicates whether a server control is rendered as UI on the page. (Унаследовано от Control) |
| Width | Получает или задает ширину серверного веб-элемента управления.Gets or sets the width of the Web server control. (Унаследовано от WebControl) |
| AddAttributesToRender(HtmlTextWriter) | Добавляет атрибуты и стили HTML элемента управления CheckBox, которые должны преобразовываться для просмотра в указанном потоке вывода.Adds the HTML attributes and styles of a CheckBox control to be rendered to the specified output stream. (Унаследовано от CheckBox) |
| AddedControl(Control, Int32) | Вызывается после добавления дочернего элемента управления в коллекцию Controls объекта Control.Called after a child control is added to the Controls collection of the Control object. (Унаследовано от Control) |
| AddParsedSubObject(Object) | Уведомляет серверный элемент управления, что элемент XML или HTML был проанализирован, и добавляет элемент в серверный элемент управления объекта ControlCollection.Notifies the server control that an element, either XML or HTML, was parsed, and adds the element to the server control’s ControlCollection object. (Унаследовано от Control) |
| ApplyStyle(Style) | Копирует любой непустой элемент указанного стиля в элемент управления Веба, перезаписывая уже существующие элементы стиля.Copies any nonblank elements of the specified style to the Web control, overwriting any existing style elements of the control. Этот метод, в основном, используется разработчиками элементов управления.This method is primarily used by control developers. (Унаследовано от WebControl) |
| ApplyStyleSheetSkin(Page) | Применяет свойства стиля, определенные в таблице стилей страницы, к элементу управления.Applies the style properties defined in the page style sheet to the control. (Унаследовано от Control) |
| BeginRenderTracing(TextWriter, Object) | Запускает трассировку во время разработки данных отрисовки.Begins design-time tracing of rendering data. (Унаследовано от Control) |
| BuildProfileTree(String, Boolean) | Собирает сведения о серверном элементе управления и доставляет их свойству Trace, которое отображается при включенной на странице трассировке.Gathers information about the server control and delivers it to the Trace property to be displayed when tracing is enabled for the page. (Унаследовано от Control) |
| ClearCachedClientID() | Задает для кэшированного свойства ClientID значение |
| ClearChildControlState() | Удаляет сведения о состоянии элемента управления для дочерних элементов управления серверного элемента управления.Deletes the control-state information for the server control’s child controls. (Унаследовано от Control) |
| ClearChildState() | Удаляет сведения о состоянии элемента управления и состоянии представления для всех дочерних элементов серверного элемента управления.Deletes the view-state and control-state information for all the server control’s child controls. (Унаследовано от Control) |
| ClearChildViewState() | Удаляет сведения о состоянии представления для всех дочерних элементов серверного элемента управления.Deletes the view-state information for all the server control’s child controls. (Унаследовано от Control) |
| ClearEffectiveClientIDMode() | Задает для свойства ClientIDMode текущего экземпляра элемента управления и любых его дочерних элементов управления значение Inherit.Sets the ClientIDMode property of the current control instance and of any child controls to Inherit. (Унаследовано от Control) |
| CopyBaseAttributes(WebControl) | Копирует не инкапсулированные объектом Style свойства из указанного серверного веб-элемента управления веб-сервера в элемент управления веб-сервера, откуда вызывается этот метод.Copies the properties not encapsulated by the Style object from the specified Web server control to the Web server control that this method is called from. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| CreateChildControls() | Вызывается платформой страницы ASP.NET для уведомления серверных элементов управления, использующих составную реализацию, о необходимости создания дочерних элементов управления, содержащихся в них для обратной передачи или отрисовки.Called by the ASP.NET page framework to notify server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering. (Унаследовано от Control) |
| CreateControlCollection() | Создает новый объект ControlCollection для хранения дочерних элементов управления (литеральных и серверных) серверного элемента управления.Creates a new ControlCollection object to hold the child controls (both literal and server) of the server control. (Унаследовано от Control) |
| CreateControlStyle() | Создает объект стиля, который используется внутри класса WebControl для реализации всех относящихся к стилю свойств.Creates the style object that is used internally by the WebControl class to implement all style related properties. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| DataBind() | Привязывает источник данных к вызываемому серверному элементу управления и всем его дочерним элементам управления.Binds a data source to the invoked server control and all its child controls. (Унаследовано от Control) |
| DataBind(Boolean) | Привязывает источник данных к вызванному серверному элементу управления и всем его дочерними элементами управления с возможностью вызова события DataBinding.Binds a data source to the invoked server control and all its child controls with an option to raise the DataBinding event. (Унаследовано от Control) |
| DataBindChildren() | Привязывает источник данных к дочерним элементам управления серверного элемента управления.Binds a data source to the server control’s child controls. (Унаследовано от Control) |
| Dispose() | Включает серверный элемент управления для выполнения окончательной чистки до освобождения памяти.Enables a server control to perform final clean up before it is released from memory. (Унаследовано от Control) |
| EndRenderTracing(TextWriter, Object) | Завершает трассировку во время разработки данных отрисовки.Ends design-time tracing of rendering data. (Унаследовано от Control) |
| EnsureChildControls() | Определяет наличие у серверного элемента управления дочерних элементов управления.Determines whether the server control contains child controls. Если дочерних элементов управления нет, они будут созданы.If it does not, it creates child controls. (Унаследовано от Control) |
| EnsureID() | Создает идентификатор для элементов управления, которые не имеют назначенного идентификатора.Creates an identifier for controls that do not have an identifier assigned. (Унаследовано от Control) |
| Equals(Object) | Определяет, равен ли указанный объект текущему объекту.Determines whether the specified object is equal to the current object. (Унаследовано от Object) |
| FindControl(String) | Выполняет поиск серверного элемента управления с заданным параметром |
| FindControl(String, Int32) | Выполняет поиск в текущем контейнере именования серверного элемента управления с указанным |
| Focus() | Задает фокус ввода на элемент управления.Sets input focus to a control. (Унаследовано от Control) |
| GetDesignModeState() | Возвращает данные времени разработки для элемента управления.Gets design-time data for a control. (Унаследовано от Control) |
| GetHashCode() | Служит хэш-функцией по умолчанию.Serves as the default hash function. (Унаследовано от Object) |
| GetRouteUrl(Object) | Возвращает URL-адрес, соответствующий набору параметров маршрута.Gets the URL that corresponds to a set of route parameters. (Унаследовано от Control) |
| GetRouteUrl(RouteValueDictionary) | Возвращает URL-адрес, соответствующий набору параметров маршрута.Gets the URL that corresponds to a set of route parameters. (Унаследовано от Control) |
| GetRouteUrl(String, Object) | Возвращает URL-адрес, соответствующий набору параметров маршрута и имени маршрута.Gets the URL that corresponds to a set of route parameters and a route name. (Унаследовано от Control) |
| GetRouteUrl(String, RouteValueDictionary) | Возвращает URL-адрес, соответствующий набору параметров маршрута и имени маршрута.Gets the URL that corresponds to a set of route parameters and a route name. (Унаследовано от Control) |
| GetType() | Возвращает объект Type для текущего экземпляра.Gets the Type of the current instance. (Унаследовано от Object) |
| GetUniqueIDRelativeTo(Control) | Возвращает часть с префиксом свойства UniqueID указанного элемента управления.Returns the prefixed portion of the UniqueID property of the specified control. (Унаследовано от Control) |
| HasControls() | Определяет наличие у серверного элемента управления дочерних элементов управления.Determines if the server control contains any child controls. (Унаследовано от Control) |
| HasEvents() | Возвращает значение, указывающее, регистрируются ли события для элемента управления или каких-либо дочерних элементов управления.Returns a value indicating whether events are registered for the control or any child controls. (Унаследовано от Control) |
| IsLiteralContent() | Определяет наличие у серверного элемента управления только текстового содержимого.Determines if the server control holds only literal content. (Унаследовано от Control) |
| LoadControlState(Object) | Восстанавливает сведения о состоянии элемента управления предыдущего запроса страницы, сохраненные методом SaveControlState().Restores control-state information from a previous page request that was saved by the SaveControlState() method. (Унаследовано от Control) |
| LoadPostData(String, NameValueCollection) | Обрабатывает данные обратной передачи для элемента управления RadioButton.Processes postback data for the RadioButton control. |
| LoadPostData(String, NameValueCollection) | Обрабатывает данные обратной передачи для элемента управления CheckBox.Processes the postback data for the CheckBox control. (Унаследовано от CheckBox) |
| LoadViewState(Object) | Загружает предварительно сохраненное состояние представления элемента управления CheckBox.Loads the previously saved view state of the CheckBox control. (Унаследовано от CheckBox) |
| MapPathSecure(String) | Извлекает физический путь, к которому ведет виртуальный путь (абсолютный или относительный).Retrieves the physical path that a virtual path, either absolute or relative, maps to. (Унаследовано от Control) |
| MemberwiseClone() | Создает неполную копию текущего объекта Object.Creates a shallow copy of the current Object. (Унаследовано от Object) |
| MergeStyle(Style) | Копирует любой непустой элемент указанного стиля в элемент управления Веба, но не перезаписывает уже существующие элементы стиля.Copies any nonblank elements of the specified style to the Web control, but will not overwrite any existing style elements of the control. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| OnBubbleEvent(Object, EventArgs) | Определяет, передается ли событие серверного элемента управления вверх по иерархии серверных элементов управления пользовательского интерфейса страницы.Determines whether the event for the server control is passed up the page’s UI server control hierarchy. (Унаследовано от Control) |
| OnCheckedChanged(EventArgs) | Вызывает событие CheckedChanged элемента управления CheckBox.Raises the CheckedChanged event of the CheckBox control. Это позволяет непосредственно обрабатывать событие.This allows you to handle the event directly. (Унаследовано от CheckBox) |
| OnDataBinding(EventArgs) | Вызывает событие DataBinding.Raises the DataBinding event. (Унаследовано от Control) |
| OnInit(EventArgs) | Вызывает событие Init.Raises the Init event. (Унаследовано от Control) |
| OnLoad(EventArgs) | Вызывает событие Load.Raises the Load event. (Унаследовано от Control) |
| OnPreRender(EventArgs) | Вызывает событие PreRender.Raises the PreRender event. |
| OnUnload(EventArgs) | Вызывает событие Unload.Raises the Unload event. (Унаследовано от Control) |
| OpenFile(String) | Возвращает Stream, используемое для чтения файла.Gets a Stream used to read a file. (Унаследовано от Control) |
| RaiseBubbleEvent(Object, EventArgs) | Присваивает родительскому элементу управления все источники события и сведения о них.Assigns any sources of the event and its information to the control’s parent. (Унаследовано от Control) |
| RaisePostDataChangedEvent() | Вызывает событие CheckedChanged, если свойство Checked было изменено при обратной передаче.Raises the CheckedChanged event, if the Checked property has changed on postback. |
| RaisePostDataChangedEvent() | Вызывает событие OnCheckedChanged(EventArgs), если отправленные данные для элемента управления CheckBox изменились.Invokes the OnCheckedChanged(EventArgs) method when the posted data for the CheckBox control has changed. (Унаследовано от CheckBox) |
| RemovedControl(Control) | Вызывается после удаления дочернего элемента управления из коллекции Controls объекта Control.Called after a child control is removed from the Controls collection of the Control object. (Унаследовано от Control) |
| Render(HtmlTextWriter) | Отображает объект CheckBox на стороне клиента.Displays the CheckBox on the client. (Унаследовано от CheckBox) |
| RenderBeginTag(HtmlTextWriter) | Выводит открывающий HTML-тег элемента управления в указанное средство записи.Renders the HTML opening tag of the control to the specified writer. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| RenderChildren(HtmlTextWriter) | Выводит содержимое дочерних элементов серверного элемента управления в предоставленный объект HtmlTextWriter, который записывает это содержимое для подготовки к просмотру на клиенте.Outputs the content of a server control’s children to a provided HtmlTextWriter object, which writes the content to be rendered on the client. (Унаследовано от Control) |
| RenderContents(HtmlTextWriter) | Выводит содержимое элемента управления в заданный модуль записи.Renders the contents of the control to the specified writer. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| RenderControl(HtmlTextWriter) | Выводит содержимое серверного элемента управления в указанный объект HtmlTextWriter и сохраняет сведения о трассировке элемента управления, если трассировка включена.Outputs server control content to a provided HtmlTextWriter object and stores tracing information about the control if tracing is enabled. (Унаследовано от Control) |
| RenderControl(HtmlTextWriter, ControlAdapter) | Выводит серверный элемент управления в указанный объект HtmlTextWriter, используя указанный объект ControlAdapter.Outputs server control content to a provided HtmlTextWriter object using a provided ControlAdapter object. (Унаследовано от Control) |
| RenderEndTag(HtmlTextWriter) | Отображает закрывающий HTML-тег элемента управления в указанное средство записи.Renders the HTML closing tag of the control into the specified writer. Этот метод используется в основном разработчиками элементов управления.This method is used primarily by control developers. (Унаследовано от WebControl) |
| ResolveAdapter() | Возвращает адаптер элемента управления, отвечающий за отрисовку определенного элемента управления.Gets the control adapter responsible for rendering the specified control. (Унаследовано от Control) |
| ResolveClientUrl(String) | Возвращает URL-адрес, который может использоваться браузером.Gets a URL that can be used by the browser. (Унаследовано от Control) |
| ResolveUrl(String) | Преобразует URL-адрес в адрес, доступный для клиента.Converts a URL into one that is usable on the requesting client. (Унаследовано от Control) |
| SaveControlState() | Сохраняет любые изменения состояния серверного элемента управления, произошедшие после отправки страницы обратно на сервер.Saves any server control state changes that have occurred since the time the page was posted back to the server. (Унаследовано от Control) |
| SaveViewState() | Сохраняет изменения в состояние представления объекта CheckBox после того, как страница отправлена на сервер.Saves the changes to the CheckBox view state since the time the page was posted back to the server. (Унаследовано от CheckBox) |
| SetDesignModeState(IDictionary) | Задает данные времени разработки для элемента управления.Sets design-time data for a control. (Унаследовано от Control) |
| SetRenderMethodDelegate(RenderMethod) | Назначает делегата обработчика событий для преобразования серверного элемента управления и его содержимого для просмотра в родительский элемент управления.Assigns an event handler delegate to render the server control and its content into its parent control. (Унаследовано от Control) |
| SetTraceData(Object, Object) | Задает данные трассировки для трассировки данных отрисовки во время разработки, используя ключ данных трассировки и значение данных трассировки.Sets trace data for design-time tracing of rendering data, using the trace data key and the trace data value. (Унаследовано от Control) |
| SetTraceData(Object, Object, Object) | Задает данные трассировки для трассировки данных отрисовки во время разработки, используя трассируемый объект, ключ данных трассировки и значение данных трассировки.Sets trace data for design-time tracing of rendering data, using the traced object, the trace data key, and the trace data value. (Унаследовано от Control) |
| ToString() | Возвращает строку, представляющую текущий объект.Returns a string that represents the current object. (Унаследовано от Object) |
| TrackViewState() | Отслеживает изменения состояния представления элемента управления CheckBox для сохранения в объекте элемента управления StateBag.Tracks view-state changes to the CheckBox control so that they can be stored in the control’s StateBag object. Этот объект доступен с помощью свойства ViewState.This object is accessible through the ViewState property. (Унаследовано от CheckBox) |
| CheckedChanged | Происходит, если значение свойства Checked изменяется между отправками на сервер.Occurs when the value of the Checked property changes between posts to the server. (Унаследовано от CheckBox) |
| DataBinding | Происходит при привязке серверного элемента управления к источнику данных.Occurs when the server control binds to a data source. (Унаследовано от Control) |
| Disposed | Происходит при освобождении памяти, занятой серверным элементом управления, т.е. на последнем этапе жизненного цикла серверного элемента управления при запросе страницы ASP.NET.Occurs when a server control is released from memory, which is the last stage of the server control lifecycle when an ASP.NET page is requested. (Унаследовано от Control) |
| Init | Происходит при инициализации серверного элемента управления, который находится на первом этапе его жизненного цикла.Occurs when the server control is initialized, which is the first step in its lifecycle. (Унаследовано от Control) |
| Load | Происходит при загрузке серверного элемента управления в объект Page.Occurs when the server control is loaded into the Page object. (Унаследовано от Control) |
| PreRender | Происходит после загрузки объекта Control, но перед отрисовкой.Occurs after the Control object is loaded but prior to rendering. (Унаследовано от Control) |
| Unload | Происходит при выгрузке серверного элемента управления из памяти.Occurs when the server control is unloaded from memory. (Унаследовано от Control) |
| IAttributeAccessor.GetAttribute(String) | Возвращает атрибуту веб-элемента управления указанное имя.Gets an attribute of the Web control with the specified name. (Унаследовано от WebControl) |
| IAttributeAccessor.SetAttribute(String, String) | Задает атрибуту веб-элемента управления указанное имя и значение.Sets an attribute of the Web control to the specified name and value. (Унаследовано от WebControl) |
| IControlBuilderAccessor.ControlBuilder | Описание этого члена см. в разделе ControlBuilder.For a description of this member, see ControlBuilder. (Унаследовано от Control) |
| IControlDesignerAccessor.GetDesignModeState() | Описание этого члена см. в разделе GetDesignModeState().For a description of this member, see GetDesignModeState(). (Унаследовано от Control) |
| IControlDesignerAccessor.SetDesignModeState(IDictionary) | Описание этого члена см. в разделе SetDesignModeState(IDictionary).For a description of this member, see SetDesignModeState(IDictionary). (Унаследовано от Control) |
| IControlDesignerAccessor.SetOwnerControl(Control) | Описание этого члена см. в разделе SetOwnerControl(Control).For a description of this member, see SetOwnerControl(Control). (Унаследовано от Control) |
| IControlDesignerAccessor.UserData | Описание этого члена см. в разделе UserData.For a description of this member, see UserData. (Унаследовано от Control) |
| IDataBindingsAccessor.DataBindings | Описание этого члена см. в разделе DataBindings.For a description of this member, see DataBindings. (Унаследовано от Control) |
| IDataBindingsAccessor.HasDataBindings | Описание этого члена см. в разделе HasDataBindings.For a description of this member, see HasDataBindings. (Унаследовано от Control) |
| IExpressionsAccessor.Expressions | Описание этого члена см. в разделе Expressions.For a description of this member, see Expressions. (Унаследовано от Control) |
| IExpressionsAccessor.HasExpressions | Описание этого члена см. в разделе HasExpressions.For a description of this member, see HasExpressions. (Унаследовано от Control) |
| IParserAccessor.AddParsedSubObject(Object) | Описание этого члена см. в разделе AddParsedSubObject(Object).For a description of this member, see AddParsedSubObject(Object). (Унаследовано от Control) |
| IPostBackDataHandler.LoadPostData(String, NameValueCollection) | Описание этого члена см. в разделе LoadPostData(String, NameValueCollection).For a description of this member, see LoadPostData(String, NameValueCollection). |
| IPostBackDataHandler.RaisePostDataChangedEvent() | Описание этого члена см. в разделе RaisePostDataChangedEvent().For a description of this member, see RaisePostDataChangedEvent(). |
| FindDataSourceControl(Control) | Возвращает источник данных, связанный с элементом управления данными, для заданного элемента управления.Returns the data source that is associated with the data control for the specified control. |
| FindFieldTemplate(Control, String) | Возвращает шаблон поля для заданного столбца в контейнере именования заданного элемента управления.Returns the field template for the specified column in the specified control’s naming container. |
| FindMetaTable(Control) | Возвращает объект метатаблицы для контейнерного элемента управления данными.Returns the metatable object for the containing data control. |
Radiobutton и Checkbutton. Переменные Tkinter. Урок 5
В Tkinter от класса Radiobutton создаются радиокнопки, от класса Checkbutton – флажки.
Радиокнопки не создают по одной, а делают связанную группу, работающую по принципу переключателей. Когда включена одна, другие выключены.
Экземпляры Checkbutton также могут быть визуально оформлены в группу, но каждый флажок независим от остальных. Каждый может быть в состоянии «установлен» или «снят», независимо от состояний других флажков. Другими словами, в группе Checkbutton можно сделать множественный выбор, в группе Radiobutton – нет.
Radiobutton – радиокнопка
Если мы создадим две радиокнопки без соответствующих настроек, то обе они будут включены и выключить их будет невозможно:
Эти переключатели никак не связаны друг с другом. Кроме того для них не указано исходное значение, должны ли они быть в состоянии «вкл» или «выкл». По-умолчанию они включены.
Связь устанавливается через общую переменную, разные значения которой соответствуют включению разных радиокнопок группы. У всех кнопок одной группы свойство variable устанавливается в одно и то же значение – связанную с группой переменную. А свойству value присваиваются разные значения этой переменной.
В Tkinter нельзя использовать любую переменную для хранения состояний виджетов. Для этих целей предусмотрены специальные классы-переменные пакета tkinter – BooleanVar, IntVar, DoubleVar, StringVar. Первый класс позволяет принимать своим экземплярам только булевы значения (0 или 1 и True или False), второй – целые, третий – дробные, четвертый – строковые.
r_var = BooleanVar()
r_var.set(0)
r1 = Radiobutton(text='First',
variable=r_var, value=0)
r2 = Radiobutton(text='Second',
variable=r_var, value=1)Здесь переменной r_var присваивается объект типа BooleanVar. С помощью метода set он устанавливается в значение 0.
При запуске программы включенной окажется первая радиокнопка, так как значение ее опции value совпадает с текущим значением переменной r_var. Если кликнуть по второй радиокнопке, то она включится, а первая выключится. При этом значение r_var станет равным 1.
В программном коде обычно требуется «снять» данные о том, какая из двух кнопок включена. Делается это с помощью метода get экземпляров переменных Tkinter.
from tkinter import *
def change():
if var.get() == 0:
label['bg'] = 'red'
elif var.get() == 1:
label['bg'] = 'green'
elif var.get() == 2:
label['bg'] = 'blue'
root = Tk()
var = IntVar()
var.set(0)
red = Radiobutton(text="Red",
variable=var, value=0)
green = Radiobutton(text="Green",
variable=var, value=1)
blue = Radiobutton(text="Blue",
variable=var, value=2)
button = Button(text="Изменить",
command=change)
label = Label(width=20, height=10)
red.pack()
green.pack()
blue.pack()
button.pack()
label.pack()
root.mainloop()
В функции change в зависимости от считанного значения переменной var ход выполнения программы идет по одной из трех веток.
Мы можем избавиться от кнопки «Изменить», связав функцию change или любую другую со свойством command радиокнопок. При этом не обязательно, чтобы радиокнопки, объединенные в одну группу, вызывали одну и ту же функцию.
from tkinter import *
def red_label():
label['bg'] = 'red'
def green_label():
label['bg'] = 'green'
def blue_label():
label['bg'] = 'blue'
root = Tk()
var = IntVar()
var.set(0)
Radiobutton(text="Red", command=red_label,
variable=var, value=0).pack()
Radiobutton(text="Green", command=green_label,
variable=var, value=1).pack()
Radiobutton(text="Blue", command=blue_label,
variable=var, value=2).pack()
label = Label(width=20, height=10, bg='red')
label.pack()
root.mainloop()Здесь метка будет менять цвет при клике по радиокнопкам.
Если посмотреть на пример выше, можно заметить, что код радиокнопок почти идентичный, как и код связанных с ними функций. В таких случаях более грамотно поместить однотипный код в класс.
from tkinter import *
def paint(color):
label['bg'] = color
class RBColor:
def __init__(self, color, val):
Radiobutton(
text=color.capitalize(),
command=lambda i=color: paint(i),
variable=var, value=val).pack()
root = Tk()
var = IntVar()
var.set(0)
RBColor('red', 0)
RBColor('green', 1)
RBColor('blue', 2)
label = Label(width=20, height=10, bg='red')
label.pack()
root.mainloop()В двух последних вариациях кода мы не используем метод get, чтобы получить значение переменной var. В данном случае нам это не требуется, потому что цвет метки меняется в момент клика по соответствующей радиокнопке и не находится в зависимости от значения переменной. Несмотря на это использовать переменную в настройках радиокнопок необходимо, так как она обеспечивает связывание их в единую группу и выключение одной при включении другой.
Checkbutton – флажок
Флажки не требуют установки между собой связи, поэтому может возникнуть вопрос, а нужны ли тут переменные Tkinter? Они нужны, чтобы снимать сведения о состоянии флажков. По значению связанной с Checkbutton переменной можно определить, установлен флажок или снят, что в свою очередь повлияет на ход выполнения программы.
У каждого флажка должна быть своя переменная Tkinter. Иначе при включении одного флажка, другой будет выключаться, так как значение общей tkinter-переменной изменится и не будет равно значению опции onvalue первого флажка.
from tkinter import *
root = Tk()
def show():
s = f'{var1.get()}, ' \
f'{var2.get()}'
lab['text'] = s
frame = Frame()
frame.pack(side=LEFT)
var1 = BooleanVar()
var1.set(0)
c1 = Checkbutton(frame, text="First",
variable=var1,
onvalue=1, offvalue=0,
command=show)
c1.pack(anchor=W, padx=10)
var2 = IntVar()
var2.set(-1)
c2 = Checkbutton(frame, text="Second",
variable=var2,
onvalue=1, offvalue=0,
command=show)
c2.pack(anchor=W, padx=10)
lab = Label(width=25, height=5, bg="lightblue")
lab.pack(side=RIGHT)
root.mainloop()С помощью опции onvalue устанавливается значение, которое принимает связанная переменная при включенном флажке. С помощью свойства offvalue – при выключенном. В данном случае оба флажка при запуске программы будут выключены, так как методом set были установлены отличные от onvalue значения.
Опцию offvalue можно не указывать. Однако при ее наличии можно отследить, выключался ли флажок.
С помощью методов select и deselect флажков можно их программно включать и выключать. То же самое относится к радиокнопкам.
from tkinter import *
class CheckButton:
def __init__(self, master, title):
self.var = BooleanVar()
self.var.set(0)
self.title = title
self.cb = Checkbutton(
master, text=title, variable=self.var,
onvalue=1, offvalue=0)
self.cb.pack(side=LEFT)
def ch_on():
for ch in checks:
ch.cb.select()
def ch_off():
for ch in checks:
ch.cb.deselect()
root = Tk()
f1 = Frame()
f1.pack(padx=10, pady=10)
checks = []
for i in range(10):
checks.append(CheckButton(f1, i))
f2 = Frame()
f2.pack()
button_on = Button(f2, text="Все ВКЛ",
command=ch_on)
button_on.pack(side=LEFT)
button_off = Button(f2, text="Все ВЫКЛ",
command=ch_off)
button_off.pack(side=LEFT)
root.mainloop()Практическая работа
Виджеты Radiobatton и Checkbutton поддерживают большинство свойств оформления внешнего вида, которые есть у других элементов графического интерфейса. При этом у Radiobutton есть особое свойство indicatoron. По-умолчанию он равен единице, в этом случае радиокнопка выглядит как нормальная радиокнопка. Однако если присвоить этой опции ноль, то виджет Radiobutton становится похожим на обычную кнопку по внешнему виду. Но не по смыслу.
Напишите программу, в которой имеется несколько объединенных в группу радиокнопок, индикатор которых выключен (indicatoron=0). Если какая-нибудь кнопка включается, то в метке должна отображаться соответствующая ей информация. Обычных кнопок в окне быть не должно.
Помните, что свойство command есть не только у виджетов класса Button.
Курс с примерами решений практических работ: android-приложение, pdf-версия.
| Tap or click the radio button next to every instance of Turn on Windows Firewall on the page. | Нажмите переключатели возле всех пунктов Включить брандмауэр Windows на этой странице. |
| Tap or click the radio button next to every instance of Turn off Windows Firewall on the page. | Нажмите переключатели возле всех пунктов Выключить брандмауэр Windows на этой странице. |
| Check the radio button for In-Stream. | Выберите вариант Вставка в видео. |
| Compare this to a radio button, in which only a single option is selectable from several mutually-exclusive choices. | Сравните это с переключателем, в котором из нескольких взаимоисключающих вариантов выбирается только один вариант. |
| Другие результаты | |
| Do you see what I see, they sing as he swings his legs out, grimaces his way across the cold floor to the radio, and bangs the button that turns it off. | Видишь ли ты, что вижу я, выпевают они, когда он сбрасывает ноги с кровати, шлепает, гримасничая, по холодному полу к радио и нажимает клавишу отключения. |
| New options included a push-button Weather Band built into the AM/FM stereo signal-seeking radio. | Новые опции включали в себя кнопочный погодный диапазон, встроенный в AM / FM стереосигнал, ищущий радио. |
| The shaft-style radio was replaced with a more modern DIN-and-a-half style radio, while the pull-out headlight switch was replaced by a push button style switch. | Радиоприемник в стиле вала был заменен более современным радиоприемником в стиле DIN-and-half, в то время как выдвижной переключатель фар был заменен кнопочным переключателем. |
| Generally the operator depresses the PTT button and taps out a message using a Morse Code crib sheet attached as a sticker to the radio. | Обычно оператор нажимает кнопку PTT и выстукивает сообщение, используя шпаргалку с азбукой Морзе, прикрепленную в качестве наклейки к радио. |
| In that location instead is a clock, and a button to deploy an electric radio antenna, if so equipped. | В этом месте вместо этого есть часы и кнопка для развертывания электрической радиоантенны, если таковая имеется. |
| For 1967 and 1968, trucks used Ford interior trim only, such as the horn button, dash cluster bezel and radio block-off plate. | В 1967 и 1968 годах грузовики использовали только внутреннюю отделку Ford, такую как кнопка звукового сигнала, панель приборной панели и радиоблок. |
| The radio triggers were separate buttons I would have to tape to my right forearm. | Радиопередатчик с отдельными кнопками мне предстояло прилепить скотчем к правому запястью. |
| I’ve tried Twinkle on it already, and the main lack of function seems to be clicking on radio buttons for CSD’s and the like. | Еда из Уттраханда, как известно, является здоровой и полезной для удовлетворения высоких энергетических потребностей холодного горного региона. |
— 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 по умолчанию сохраняет состояние динамической проверки при загрузке страницы. Используйте атрибут автозаполнения для управления этой функцией.
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 загружаются только в браузере
88 Radio Buttons CSS
Коллекция HTML и CSS radio button Примеры кода : custom, multiple и radio button group . Обновление коллекции за март 2020 года. 11 новинок.
- Bootstrap Radio Buttons
- Флажки CSS
- Тумблеры CSS
О коде
Пользовательские кнопки радио
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Джон Кантнер
О коде
Радио под капотом
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Скотт Кеннеди
О коде
Стиль радиокнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Ашар Сетиаван
О коде
Фильтр статуса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: попутный ветер.css
О коде
Буквальные радиокнопки
Радиокнопки превратились в радиокнопки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Абубакер Саид
О коде
CSS Пользовательские радиокнопки
Доступные настраиваемые переключатели только с CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Håvard Brynjulfsen
О коде
Кнопки радио в стиле таблеток, полностью масштабируемые
Пользовательский стиль переключателя, использующий только CSS (SCSS), используя преимущества родственных селекторов и псевдо-класса : checked .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Андреас Сторм
О коде
Группа радиокнопок
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Неуморфный переключатель CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Bounce Radio
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Милан Раринг
О коде
Анимация радиокнопок - только CSS
Простая анимация радиокнопок - только CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Джон Кантнер
О коде
Радиокнопки из мрамора и дерева
Взаимодействие с переключателями в виде китайских шашек на деревянной доске.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Нейморфное радио
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Джон Кантнер
О коде
Radio Hopping
При выборе различных параметров наблюдайте, как точка-червь перескакивает от предыдущего к текущему.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Аарон Икер
О коде
2020 Переключает
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Bulgy Радио
Еще одна чрезмерно проработанная радио-анимация.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Дин Хидри
О коде
Переключатель тем для карточек
Вот взаимодействие, которое позволяет вам изменить тему вашей карты. Мы сосредоточились на двух простых микро-анимациях, которые указывают на завершение смены карты, что является весьма радостным моментом для большинства пользователей.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Абубакер Саид
О коде
Пользовательские кнопки радио
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Иван Гроздич
О коде
Радиокнопки на чистом CSS (Темный / Светлый)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css, unicons.css
Автор
- Брэндон МакКоннелл
О коде
Готовься
Брэндон МакКоннелл
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Андрей Шарапов
О коде
Анимированные кнопки радио в формате SVG
Анимированные переключатели SVG с использованием CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Микаэль Айналем
О коде
Подземные радиокнопки
Выделение радиокнопки перемещается под землю.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Брэндон МакКоннелл
О коде
Селективная кнопка на чистом CSS с точкой-ползунком
Ползунок с перемещением по диапазону, точечным индикатором, метками, стилем с условием действительности и без JS.Работает на 100% на сайтах с ограниченным доступом к JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Бенджамин Келер
О коде
Кнопки мобильного радио с небольшой анимацией
Мобильные радиокнопки как настоящие кнопки, простой внешний вид с небольшой анимацией.Легко использовать и обрабатывать.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Необычные флажки и радиокнопки
Необычные флажки и переключатели с Font Awesome.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Автор
- Дронка Рауль
О коде
Взаимодействие с радио-кнопками
Взаимодействие радиокнопок с HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Радиовход
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Андреас Сторм
О коде
Флажок и радио-кнопки
Флажок и переключателиmacOS Mojave dark mode.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Радиокнопки выравнивания
Уловки CSS: используйте flex-grow для перехода.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: -
Автор
- Андреас Сторм
О коде
Радиокнопки Material Design
Радиокнопки Pure CSS Material Design.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: bootstrap.css
Автор
- Тамино Мартиниус
О коде
Колебание кнопок радио
Фрагмент пользовательского интерфейса для переключателей в HTML, CSS и JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
О коде
Адаптивный тумблер
Переключатель для использования в ваших формах (с использованием радио-входов в качестве ядра), который реагирует.Стилизован с помощью CSS, с использованием flexbox для изменения размера.
Автор
- Кэмерон Фицуильям
О коде
Переключатель улыбки (HTML + CSS)
Радиокнопка с CSS с использованием состояния : checked ~ (classname) .
Автор
- Никки Пантони
О коде
Кнопки выбора радиоприемника на чистом CSS-SVG
Пример, созданный с использованием только CSS и SVG, JS не требуется.В духе Google Material Design.
Автор
- Ярив Фруенд
О коде
Переключатель шлепка
Переключатель шлепка CSS.
Автор
- Андреас Сторм
О коде
Входное радио
Простой стиль ввода радио.
О коде
☑️ Переключатели трансформации, будет меняться ☑️
Версия Flexbox Toggles только для преобразования для сравнения производительности и кода. Это идет немного дальше: будет заменять на масляно-гладкую анимацию без перерисовок.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: -
Автор
- Бадди Рино
О коде
Радиогруппы, вдохновленные материалами
Радиогруппы HTML и CSS.
Автор
- Андрей Верещак
- 03.08.2017
Сделано с
- HTML
- CSS / SCSS
- JavaScript (jQuery.js, bootstrap.js, slick.js)
О коде
Переключить вход радио
Переключить вход радио с меткой.
Автор
- Тобиас Больоло
- 07.07.2017
Сделано с
- HTML
- CSS
- JavaScript (jQuery.js)
О коде
Обзор пользовательских радиокнопок
Обзор пользовательских переключателей с помощью jQuery.
Автор
- Репета Александр
- 30.06.2017
О коде
Стильные кнопки радио
Радиокнопки стиля чистого CSS.
Сделано с
- HTML
- CSS / SCSS
- JavaScript (jQuery.js, TweenMax.js)
- SVG
О коде
Жидкая радиокнопка
Переключатель Liquid с использованием SVG и GSAP (GreenSock).
Автор
- Тамино Мартиниус
- 02.06.2017
О коде
Жидкая радиокнопка
Радиокнопка Liquid с SVG.
О коде
Пользовательские кнопки радио
Пользовательские переключатели HTML и CSS.
О коде
Цепь радиокнопки
Схема радиокнопки с HTMl и CSS.
Демонстрационное изображение: Jelly Radio ButtonJelly Radio Button
Закрепленная радиокнопка. Наслаждайтесь этим простым и плоским дизайном радиокнопки только на ванильном CSS 🙂
Сделано Томмазо Полетти
9 февраля 2017 г.
Скрытые радиосообщения / всплывающие подсказки
Скрытые радиосообщения / всплывающие подсказки в HTML и CSS.
Сделано Джошуа Уордом
6 января 2017 г.
Анимация пульсаций на радио и флажке типа ввода
Пульсирующая анимация HTML и CSS на переключателе типа ввода и флажке.
Сделано WILDER TAYPE
27 декабря 2016 г.
CSS Radio Buttons
Простая и элегантная радиокнопка CSS.
Сделано Тристаном Уайтом
13 декабря 2016 г.
Радиогруппа с использованием меток
Радиогруппа с использованием меток с HTML и CSS.
Сделано Сэмом Кедди
5 декабря 2016 г.
Radio Button Big Square
Радиокнопка на чистом CSS, большой квадрат.
Сделано Габриэлем Феррейрой
12 ноября 2016 г.
Анимированный флажок и радио-кнопки
Анимированные флажки и переключатели только для CSS.
Автор Коля Кучера
12 октября 2016 г.
Радио выбирает
Радио выбирает: флексбокс и прикол.
Сделано Адамом Кларком
17 августа 2016 г.
Форма оплаты
Форма оформления заказа с использованием стилизованных переключателей.
Сделано Rosa
16 июля 2016 г.
Радиокнопки SVG Splat
Переключатели для HTML, CSS и SVG splat.
Сделано Крисом Гэнноном
18 июня 2016 г.
Radio Buttons
Открывайте разные окна, щелкая переключатели.
Сделано Саумитрой Бозе
1 июня 2016 г.
Концепция выбора радио для ввода только для CSS
Тестирование концепции выбора входного радио с помощью анимированного слайда, чтобы узнать, какой из них выбран.
Сделано в web-tiki
9 мая 2016 г.
Вход и радио-кнопка
Чистый ввод CSS и переключатель.
Автор Офелия Фурнье-Лафламм
27 апреля 2016 г.
Очень простые радиокнопки
HTML и CSS просто очень простые переключатели.
Сделано Памелой Дайн
17 апреля 2016 г.
Флажок "Чистый CSS Fancy" / Радио
Необычный флажок / радио-кнопки с небольшим переходом, наслаждайтесь!
Сделано Раулем Баррерой
11 апреля 2016 г.
Google Dots Radio Buttons
4 различных способа простой настройки переключателей.
Сделано Виктором Фрейре
5 марта 2016 г.
Анимированный переключатель для радиокнопок
CSS только анимированная сборка переключателя с радио-кнопками.
Сделано Фредриком Йенсеном
23 января 2016 г.
Материал радиокнопки
Переключатель «Материал» с HTML, CSS и JavaScript.
Сделано CODEARMADA
14 января 2016 г.
Радиокнопки Google Maps Только CSS
Радиокнопки, стилизованные под настоящие кнопки. Только CSS.
Сделано Элиасом Мейре
7 декабря 2015 г.
Simple Toggle
Простая кнопка переключения.
Сделано Домиником Магнифико
28 сентября 2015 г.
Radio Button CSS
Простой стиль ввода радио. Sass - это путь!
Сделано Лоренцо Д'Ианни
25 сентября 2015 г.
Необычная радиокнопка
Необычный переключатель, похожий на флажок.
Сделано Стейси
17 сентября 2015 г.
Пользовательский переключатель CSS3
Переключатель "Пользовательский HTML и CSS".
Сделано sodapop
4 сентября 2015 г.
CSS Ripple / Wave Checkbox and Radio Button
Анимируйте проверку и снятие флажка с помощью SASS и Bourbon.
Сделано Мэттом Систо
21 августа 2015 г.
Масштаб ввода радиокнопки
Переосмысление радиокнопок. Это основано на распространенных ответах опросов: «никогда, иногда, часто, обычно, всегда».«
Сделано Калебом Дуреном
2 августа 2015 г.
Стильные радиокнопки
CSS только стильные радиокнопки.
Сделано Саймоном Бьюиссоном
31 июля 2015 г.
Стиль радиокнопки
Стили переключателей HTML и CSS.
Сделано Мортеном Олсеном
16 июня 2015 г.
Радиокнопка стиля CSS
Уловки, придающие стиль переключателю.
Сделано Анжелой Веласкес
26 мая 2015 г.
Strikethrough Radios
Эксперимент по зачеркиванию частей предложения как способ взаимодействия с радиовходами ...
Сделано Эдом Хиксом
23 апреля 2015 г.
Radio Input
Простой радиовход с использованием псевдо-класса: checked.
Автор Ховард Бриньюлфсен
15 апреля 2015 г.
Плоские входы для радиокнопок
Стилизованные переключатели, которые по-прежнему позволяют ввод с клавиатуры (по крайней мере, в Chrome).
Автор Крис Хедстром
4 апреля 2015 г.
Radio Control
Это перо используется в статье SitePoint - Тематика элементов формы с помощью Sass.
Сделано SitePoint
31 марта 2015 г.
Radio Buttons
Нет JS, нет img, полный em, редактируемый текст (гибкий).
Автор Джонатан Левайян
29 января 2015 г.
Плоское Радио - Да / Нет
На основе пера Нейта Уайли "Стилизованные радиокнопки".Аналогичная концепция, но с плоским дизайном. Поиграйте с цветовыми переменными ($ красный, $ синий, $ зеленый), чтобы настроить цвета кнопок.
Сделано Мэтью Блодом
27 октября 2014 г.
Awesome Toggle Button
Две очень красивые радиокнопки, соединенные вместе как тумблер.
Сделано Эндрю
7 октября 2014 г.
Стиль с проверкой на радио
Проверено радио стиля. Потрясающие.
Сделано Фолькером Отто
30 сентября 2014 г.
2 элемента 1 стильное радио
Чистый HTML / CSS анимированные и стилизованные радиокнопки с меткой (дополнительные элементы не требуются).
Сделано Тобиасом Харисоном, Денби
8 сентября 2014 г.
Кнопки радио с воздушным шаром
Облегчены некоторые переключатели, чтобы придать им повышенный эффект.
Сделано Крисом Симари
26 июля 2014 г.
Пользовательские флажки / переключатели
Пример некоторых простых настраиваемых флажков и переключателей, созданных с помощью чистого CSS.Они работают только в хроме, но используются в других браузерах.
Сделано Сэмом
7 июля 2014 г.
Бодрые кнопки радио!
Радиокнопки с HTML и CSS.
Сделано Джо Рингенбергом
19 июня 2014 г.
Простая радиогруппа с использованием CSS3
Простая радиогруппа с использованием CSS3.
Сделал Игорь Амадо
16 мая 2014 г.
Radio Buttons
Радиокнопки HTML и CSS.
Сделано Мастером Белого Волка
19 февраля 2014 г.
Cool Radio Buttons
Переключатель HTML и CSS.
Сделано Эриком Роггом
20 ноября 2013 г.
Стилизация радиокнопок с помощью CSS (59 пользовательских примеров)
Радиокнопки - это элементы веб-сайта, которые позволяют пользователю выбрать один из нескольких вариантов. Они очень похожи на флажки. Разница в том, что флажки не ограничиваются одним выбором.С переключателями, когда пользователь пытается выбрать более одного варианта, предыдущий выбор отменяется.
Настоящие радио-кнопки послужили вдохновением для термина "радио-кнопка". У старых радиоприемников были кнопки, которые выскакивали при нажатии другой.
Чтобы найти определенные кнопки, соответствующие стилю веб-сайта, CodePen - отличное место для начала. Эта статья, созданная нашей командой, стоящей за Slider Revolution, предоставляет фрагменты стилей переключателей, которые вы можете использовать в своих проектах.
CSS Радиокнопки
Первый выбор - классический и простой дизайн от Тристана Уайта. Стиль, шрифт и цвет фона очень просты, но имеют все основные функции. Полный чистый код доступен в CSS и HTML, но не в JS.
Доступны три варианта кнопок. При выборе кнопка выделяется цветом заливки.
Также имеется радио-кнопка отключенного стиля. Он очень отзывчивый и хорошо работает на экранах любого размера, от настольных компьютеров до мобильных устройств.
Pure CSS - Кнопки выбора радио SVG
Этот стиль радиокнопок создал Никки Пантони. Он доступен в CSS и SVG. JS не нужен.
Селектор треугольника управления проектом
Джей построил Селектор треугольника управления проектами.
В этой итерации пользователи могут выбрать два из трех вариантов. Он будет полностью сброшен, если пользователи попытаются также выбрать третий вариант. Этот принцип можно распространить на несколько вариантов.
Радиокнопки из мрамора и дерева
Эти кнопки от Джона Кантнера имеют другой стиль. Анимированный селектор выглядит как китайские шашки на деревянной доске.
Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода
WoW ваших клиентов, создавая инновационные и быстро реагирующие веб-сайты.
быстро, без опыта программирования.
Slider Revolution позволяет привлечь к вам поток клиентов за модным дизайном веб-сайтов.
CSS Радиокнопка
CSS Radio-button на 147-й - это радио-кнопки CSS. Они выделяются своим разным стилем.
В качестве фона разработчик использовал дизайн карточного стола для размещения кнопок. Функционирование кнопок очень простое. Посетитель сайта может нажимать только одну кнопку за раз.
Весь дизайн акцентирует внимание на анимированных кнопках.
Код избегает использования JS и вместо этого написан на расширенных CSS и HTML.Благодаря этому с шаблоном легче работать.
Ссылка выше показывает код и дает дополнительную информацию.
Google Dots Radio Buttons
Google Dots Radio Buttons предоставляет четыре способа настройки переключателей. Разработчик этого набора кнопок - Виктор Фрейре.
Выбор одной из кнопок выделен обычной белой заливкой. Но что делает эти кнопки такими особенными, так это анимация. Каждая из кнопок ритмично подпрыгивает вверх и вниз.
Это обязательно привлечет внимание посетителей. Когда пользователь нажимает на предпочтительный вариант, кнопки заполняются анимированными. Выбранная кнопка также перестанет двигаться.
Пользовательская радиокнопка SCSS3 - Радиосплозия
Разработано и разработано Sodapop.
Это нестандартная радиокнопка. Дизайн и анимация добавляют что-то особенное. Щелкните ссылку для демонстрации.
Пользовательские флажки / радиокнопки
Помимо набора флажков CSS, Сэм предлагает набор переключателей.Кнопки CSS работают только в Chrome, но оригинальные кнопки работают в других браузерах.
HTML-кнопки радио
Эти кнопки HTML, созданные Саумитрой Бозе, выполняют свое основное назначение. При нажатии одной из радиокнопок открывается окно с дополнительной информацией.
Адаптивный тумблер
Как видно из названия, этот элемент является адаптивным. Это позволяет ему работать на любом устройстве или платформе.
Другой взгляд на радиопереключатель, разработанный Дарином.Это просто, но добавляет креативности сайту.
Работает как переключатель, с двумя положениями. Переключатель показывает доступные варианты и регулирует длину текста. При выборе одного варианта выбор другого отменяется.
Кнопка радио Nerf Gun
Поначалу это выглядит как одна из многих других доступных радиокнопок. Но анимация выбора делает этот дизайн Olivia Ng особенным. Это выделит любой веб-сайт.
НЕЙМОРФНОЕ РАДИО
Halvves разработали этот набор кнопок.Изменение затенения показывает выбранный параметр. Простой и стильный дизайн.
Переключатель шлепка
Ярив Фруенд. Переключатель slap - еще один вариант переключателя CSS.
При нажатии на одну из опций цвет сразу меняется. Это более сложная и творческая альтернатива простому переключению между параметрами.
Анимация также обеспечивает визуальную индикацию изменения выбора. Эффект «пощечину и прыгай» делает его более интересным и привлекательным для просмотра.Это будет развлекать посетителей сайта.
Переключатель улыбки
Вариант переключателя, разработанный Кэмероном Фицуильямом. Он отличается от других, на него интересно смотреть и весело использовать.
Это анимированный индикатор настроения. Переключатель - это смайлик, который переходит в «забавную» или «плохую» сторону. В зависимости от выбранной стороны вид смайлика меняется.
Когда он на «плохой» стороне, он серый и невеселый. Но когда ползунок перемещается в сторону «веселья», цвет меняется на синий, и лицо начинает улыбаться.
Чтобы дать обратную связь, радио-кнопка может быть немного утомительной. Но этот «измеритель настроения» делает вещи интересными и интересными. В результате вы с большей вероятностью получите обратную связь.
Кнопки радио с воздушным шаром
Крис Симари добавил несколько скинов к переключателям. Это придает им другой и более интересный вид.
UI // Радиокнопка
Радиокнопка пользовательского интерфейса представляет собой серию кнопок с добавленной анимацией, чтобы придать дополнительный эффект.Дизайн Козимо Скарпа.
Radio Hopping
На этих анимированных кнопках Джона Кантнера точка выделения перескакивает от одного выделения к другому.
Пользовательский опрос радиокнопок
Эти кнопки CSS подходят для углубленных опросов. Инноватор, стоящий за ними, Тобиас Больоло, создал эти переключатели, чтобы добавить творчества на веб-сайт. Добавление этих элементов произведет впечатление на посетителей.
Позволяет отображать различные вопросы с несколькими вариантами ответов на выбор.Это хороший вариант для опросов, обзоров и опросов. Стиль радиокнопок продвинутый и отзывчивый.
Radio Selects: Flexbox и Fun
Radio Selects - это работа Адама Кларка в стадии разработки. Интерфейс и внешний вид этих переключателей CSS напоминают многие игры.
Итак, этот пример полезен для разработчика приложений и игр. Многие корпоративные сайты также используют этот стиль. Клиенты могут щелкнуть по ним, чтобы указать, какую услугу они ищут.
Каждая коробка предлагает свой выбор. При выборе его цвет меняется, и над полем появляется галочка. Код позволяет пользователю изменять различные детали и может быть добавлен на веб-сайт.
Радиокнопка Dot-Slider
Брэндон МакКоннелл создал этот слайдер диапазона. Линии соединяют опции, и изменение выбора перемещает точку индикатора. Он хорошо подходит для обозначения диапазонов.
Этот вариант не использует JS, поэтому это хороший выбор для сайтов с ограниченным использованием JS.
Список радиокнопок
Рядом со списком опций находится ползунок. Пользователи управляют ползунком, наводя курсор и щелкая мышью. Этот вариант переключателей написан на CSS3.
2 элемента 1 стильный радиоприемник
Простые и серьезные анимированные и стилизованные радиокнопки от Тобиаса Харисон Денби. Написано только на HTML и CSS, JS не требуется.
Кнопки радио в стиле таблеток
Радиокнопки с четким крупным шрифтом, разработанные Havard Brynjulfsen.Он использует только CSS (SCSS) и использует одноуровневые селекторы и псевдокласс: checked.
Анимированный переключатель для радиокнопки
Фредрик Йенсен сделал эту понятную и привлекательную анимированную радиокнопку CSS. Дизайн дает пользователю много возможностей для настройки.
Анимированная сфера показывает, какой из квадратов выбран. Движущаяся сфера и изменение цвета показывают изменение выделения. Визуальные эффекты просты, но приятны и добавят творчества любому сайту.
2020 Переключает
Аарон Икер предлагает свой набор переключателей. Он также включает переключатели и набор флажков CSS. При необходимости доступны также деактивированные версии, заштрихованные серым.
Пользовательские кнопки радио
Эти радиокнопки не используют стандартный дизайн закрашенного круга. Вместо этого Дронка Рауль сделал настраиваемые кнопки, которые обозначают выбор с помощью галочки. Только зависит от CSS.
Радиокнопка большая квадратная
Стилизованный переключатель, в котором в качестве кнопок используются текстовые поля.Выбранный вариант отображается изменением цвета и маленьким символом. Сделано Габриэлем Феррейрой.
Палитра цветов радио
Разработано The Bearded Wonder.
Эти переключатели не предлагают конкретный выбор текста, а только цветовой блок. Поэтому они отличаются от тех, что обсуждались до сих пор. Этот дизайн очень полезен при выборе цветовых вариантов. Код для этих кнопок был написан на CSS и HTML и не зависел от JS. Они хорошо работают на любом устройстве и легко воспроизводятся.Их использование экономит много времени и сил.
Перейдите по ссылке, чтобы узнать больше о кнопках, коде и разработчике.
Превосходная кнопка переключения
Эти кнопки, сделанные Андреем, представляют собой тумблеры. Он имеет анимированные изменения выбора. Изменение цвета и значок также указывают на выбор.
Вариант на чистом CSS
Дизайн магнитолы, сразу привлекающий внимание. В нем используются большие красочные коробки.
Тонкие изменения в оттенках показывают выбранный выбор.Дизайн позволяет активировать предупреждения, которые также подтверждают выбор.
Арон написал параметры на чистом CSS.
Bulgy Радио
Лиам использовал JS в своем коде для Bulgy Radios. Анимация смены выбора яркая и продуманная.
Закуски? Плоские входы радиокнопок…
Эти стилизованные радиокнопки просты и понятны. Им можно управлять с помощью мыши или клавиатуры.
Jelly Radio Button
Томассо Полетти сделал эту простую и веселую пуговицу.Для написания кода он использовал только Vanilla CSS.
Анимация пульсации на типе ввода Радио и флажке
Радиокнопка и флажок с анимацией пульсации, сделанный Уайлдером Тайпе.
Плоское радио - Да / Нет
Сделано Мэтью Блодом.
Кнопка «Да / Нет», аналогичная «Стилизованным радио-кнопкам» Нейта Уайли. Как следует из названия, эти кнопки плоские. Цвета кнопок $ красный, $ синий и $ зеленый можно регулировать.
Полностью CSS: настраиваемые флажки, переключатели и поля выбора
Пользовательские переключатели, поля выбора и флажки авторства Кенана Юсуфа.
Отдых: Переключатель карточных тем
Эти радиокнопки, разработанные Дином Хидри, имеют тему кредитных карт. Каждая кнопка позволяет выбрать свой цвет. Приятная анимация сопровождает изменение выбора.
Переключить радио-вход с помощью метки
Переключатели переключателей от Андрея Верещака используют HTML, CSS и JS. Кнопки простые, но дополнительное преимущество в том, что их несколько.
Иногда одного вопроса недостаточно.В этом варианте два одинаковых блока расположены рядом.
Поскольку их внешний вид прост, они не отвлекают. Зритель сосредоточен на заполнении полей. Каждое поле содержит набор параметров, которые пользователь может выбрать, по одной из каждого поля.
Анимированные кнопки радио в формате SVG
Анимированные переключатели SVG от Андрея Шарапова используют CSS. Выбор дает ожидаемые кнопки с заливкой и четкое изменение цвета.
Просто очень простые радиокнопки
Самая основная из радиокнопок точно соответствует определению.Хотя они и являются базовыми, они также наиболее эффективны. Их спроектировала и разработала Памела Дэйн.
Прежде чем что-либо выбрать, все кнопки выглядят одинаково. Но после щелчка по одному происходит анимированное изменение внешнего вида. Это изменение произойдет снова, если пользователь изменит свой выбор.
Разработчик решил использовать самый простой и чистый код HTML и CSS. Так что пользоваться им очень просто. Его можно скопировать и вставить на любой сайт.
Жидкая радиокнопка с использованием SVG и GSAP
Эта анимированная кнопка в формате SVG от Райана Лабара особенная и стильная.Анимация также элегантна и хорошо работает.
Изменение статуса опции графически показано большой каплей, падающей в середину кнопки. Когда опция не выбрана, начинка кнопки разбрызгивается и рассеивается.
Этот дизайн идеально подходит для того, чтобы кнопки оставались простыми, но привлекательными. Пользователи будут очень довольны и развлечены, сделав свой выбор.
Радиовход
Стильный и чистый вариант от Håvard Brynjulfsen.Он использует псевдокласс: checked.
Радиостанции подземные
Радиокнопка, тема которой - путешествие под землей. Сделано Микаэлем Айналем.
Жидкая радиокнопка
Набор кнопок, похожих на Liquid Radio Buttons от Райана Лабара. Эти кнопки, созданные Тамино Мартиниусом, используют похожую анимацию. Код написан на простом CSS.
Зачеркнутые радиостанции
Экспериментальный вариант, вдохновленный переключателями.Этот дизайн Эда Хикса использует анимированное зачеркивание части предложения.
Материал Радиокнопка
CODEARMADA является дизайнером этого дизайна радио-кнопки. И CSS, и JS использовались для достижения желаемых эффектов.
Жидкая анимация при смене переключателя безупречная. Он показывает выделение сферой, не закрывая выделение. Значок останется видимым.
Входное радио HTML
Стилизация радиокнопок, разработанная Андреасом Стормом.После выделения следует анимация загрузки границы и заливки.
Концепция выбора радио только для CSS
Изготовлено веб-тики.
Этот пример показывает, чего можно достичь с помощью простой анимации. Различные кнопки расположены горизонтально, с пунктирным кружком, показывающим текущий выбор. Анимированная скользящая кнопка приземляется на выделение.
Переключатель стилей CSS
При наведении курсора на опцию она выделяется привлекательным цветом.Анджела Веласкес придумала этот стильный дизайн.
Радиокнопка Google Maps
Сделано с использованием HTML и CSS, что обеспечивает быструю загрузку. Он использует значки Google Maps для вождения, ходьбы или езды на велосипеде. Таким образом, они хорошо работают в сочетании с настраиваемой картой или трекером местоположения.
При наведении курсора на значки всплывающая подсказка придает дополнительную ясность значению изображений. Можно заменить данные изображения собственными пользователями.Выбор выделяется сферой или другим цветом.
Чистый CSS Fancy Checkbox / Radio
Эти кнопки создал Рауль Баррера. Необычные и гибкие переключатели и флажки. Коды HTML и CSS простые и короткие.
Необычные флажки и переключатели
Необычные переключатели и флажки CSS, сделанные Jase. Настраиваемый и сделанный с использованием шрифта Awesome.
Расчетная форма
Роза разработала эти переключатели в стиле касс.По ссылке три набора кнопок.
Стиль радиокнопки
Радиокнопки CSS и HTML в стиле Мортена Олсена.
Цепь радиокнопки
LukasOe сделал эти переключатели схем в стиле HTML и CSS. Такой дизайн обязательно привлечет внимание зрителя.
Флажок и радио-кнопки
Флажок темы macOS в темном режиме и переключатели. Простой дизайн, созданный Андреасом Стормом.
Вход и радио-кнопка
Это сделала Офелия Фурнье-Лафламм. В этом дизайне для обозначения выбора используется сферический контур вокруг кнопки. Сделано с помощью HTML и CSS.
Конец мысли о стилизации радиокнопок с помощью CSS
Радиокнопки являются элементами на многих веб-сайтах. Это нормально, если они используются на страницах, где необходимо заполнение форм.
Пользователи в этих случаях могут выбрать только один вариант из многих.Если они попытаются выбрать несколько ответов, первый выбор будет отменен.
Раньше радиокнопки были только функциональными. Кнопки по умолчанию теперь считаются слишком скучными и не очень привлекательными.
Совсем недавно дизайнеры начали использовать этот элемент как нечто, что может добавить стиль или индивидуальность веб-сайту. По этой причине стиль переключателей CSS становится все более популярным.
Однако одно предостережение. Радиокнопки следует использовать по назначению.
Благодаря расширенным возможностям CSS, пользователь может видеть, что было выбрано. Это предотвращает отправку и получение неверных данных.
Если вам понравилась эта статья о стилях переключателей, вы должны проверить эту с примерами временной шкалы CSS.
Мы также писали на похожие темы, такие как примеры галереи CSS, фрагменты календаря HTML, примеры ввода текста CSS, аккордеон CSS, анимированный фон CSS и примеры анимации CSS.
HTML Radio Button
Эта страница содержит код для создания переключателя HTML.Также дается объяснение переключателей. Не стесняйтесь копировать и вставлять код на свой собственный веб-сайт или в блог.
Вы создаете переключатель с тегом HTML . Вы добавляете type = "radio" , чтобы указать, что это переключатель. Это связано с тем, что тег не просто создает переключатели. Он также позволяет создавать элементы управления вводом текста, кнопки отправки, флажки и многое другое.
В любом случае, вот код и некоторая информация о создании радиокнопки.
Базовая радиокнопка
В этом примере используется тег для создания базовой радиокнопки. В коде мы используем type = "radio" , чтобы установить элемент управления на переключатель.
Пример:
Вы заметите, что, хотя все переключатели имеют разные значения (т.е.е. в пределах атрибута значение ) все переключатели имеют одно и то же имя (в пределах атрибута name ). Я вскоре объясню, как это работает. А пока давайте рассмотрим несколько групп переключателей.
Группы радиокнопок
Вот две группы переключателей. Еще раз обратите внимание, что переключатели в каждой группе имеют одно и то же имя. Первая группа имеет имя «предпочтительный_цвет», а вторая группа - «предпочтительный_элемент».
Пример:
Важные сведения о переключателях:
- Все переключатели в группе должны иметь одно и то же имя.То есть значение атрибута
nameдолжно быть таким же. Например, все три переключателя в группе «Предпочтительный цвет» имеютname = «предпочтительный_цвет». - Все переключатели в группе должны иметь разные значения атрибута
value. Например, если один переключатель имеет значение= "красный", ни один из других в этой группе не должен иметь значение красный, так как это нарушит цель наличия дополнительного переключателя. - «Метка» для каждой радиокнопки определяется текстом рядом с радиокнопкой (а не атрибутом
значение).Атрибут value используется обработчиком формы.
Описание кнопок радио
Когда вы впервые узнаете, как создать переключатель, вам может быть немного трудно понять, как работают атрибуты name и value . Вероятно, это связано с тем, что переключатели немного отличаются от большинства элементов формы. Я объясню.
Вся цель радиокнопки - дать пользователю возможность сделать один выбор - и только один - из списка.Если вы хотите, чтобы пользователь сделал несколько вариантов выбора, вы бы не использовали переключатель - вы использовали бы флажок.
В любом случае, поскольку пользователь может сделать только один выбор из нашей группы переключателей, все переключатели в этой группе должны иметь одно и то же имя. Вот как мы группируем список - все они имеют одно и то же имя. Это сообщает обработчику формы имя группы и значение выбранного переключателя.
Например, если вы хотите, чтобы пользователи выбирали между группой цветов, вы должны создать переключатель для каждого цвета.Вы бы дали всем переключателям одно и то же имя (например, «предпочтительный_цвет»), но вы бы дали каждому переключателю различное значение (например, «красный»).
Итак, предположим, пользователь отправляет форму, которая отправляет электронное письмо веб-мастеру. Пользователь выбирает предпочтительный цвет с помощью переключателя и нажимает кнопку отправки. Веб-мастер может получить электронное письмо следующего вида:
Пользователь выбрал предпочтительный цвет в вашей веб-форме.Вот результат:
Предпочтительный цвет: Красный
Я уверен, что вы могли бы придумать что-нибудь получше, чем просто спросить любимый цвет ваших пользователей, но, надеюсь, вы уловили идею! В этом случае обработчик формы (то есть сценарий на стороне сервера) обработал форму и отправил по электронной почте имя группы (Preferred_color) и выбранное значение (красный).
HTML-тегов / тегов формы / радиокнопка - индекс тега
Элемент INPUT определяет поле ввода.Когда вы указываете "radio" для атрибута type этого элемента, создается переключатель.
Да
Нет
| Атрибут | Значение | Пояснение |
|---|---|---|
| type = "" | радио | тип поля ввода |
| name = "" | название поля | уникальное имя для поля |
| значение = "" | начальное значение | это значение представлено |
| проверено | проверено | эта кнопка отмечена (HTML: checked | XHTML: checked = "checked") |
- type = "radio"
- Создает переключатель в форме.
- name = ""
- Имя поля используется для идентификации поля формы. Несколько радиокнопок могут иметь одно и то же имя поля, и только одно из них может быть выбрано.
- value = ""
- Это значение отправляется на сервер при выборе.
- проверил
- Эта кнопка отмечена в исходном состоянии.
Пример
- Выход
Эту форму нельзя отправить из-за образца.
Пример выбора "Да"
- Выход
Эту форму нельзя отправить из-за образца.
Теги формы- Связанный документ
Пример радиокнопки | Авторские практики WAI-ARIA 1.1
Пример радиокнопки | Практика создания WAI-ARIA 1.1В этом примере реализуются функции шаблона дизайна радио-кнопки для выбора корочки пиццы и способа доставки.
Подобные примеры включают:
Пример запуска
Пицца с корочкой
Обычная корочка
Глубокая тарелка
Тонкая корочка
Доставка пиццы
Подбирать
Доставка на дом
Пообедать в
Информация о реализации виджета радиогруппы
Замечания по реализации
- Использует селекторы атрибутов CSS для синхронизации состояния
aria-checkedс визуальным индикатором состояния. - Использует CSS
: hoverи: focusпсевдо-селекторов для стилизации визуального фокуса клавиатуры и наведения курсора.
Поддержка клавиатуры
| Ключ | Функция |
|---|---|
| Выступ |
|
| Космос |
|
| Стрелка вниз |
|
| Стрелка вверх |
|
Роли, свойства и состояния ARIA
| Роль | Атрибуты | Элемент | Использование |
|---|---|---|---|
радиогруппа | дел |
| |
aria-labelledby = "[IDREF]" | дел |
| |
радио | дел |
| |
tabindex = "- 1" | дел |
| |
tabindex = "0" | дел |
| |
aria-checked = "false" | дел |
| |
aria-checked = "true" | дел |
|
Исходный код JavaScript и CSS
Исходный код HTML
Шаблон дизайна радиокнопки в методиках разработки WAI-ARIA 1.1
Формы: Radio Button - HTML Tutorial
Радио-кнопки используются, когда вы хотите, чтобы посетитель мог выбрать один - и только один - вариант из набора альтернатив. Если необходимо одновременно разрешить больше параметров, вместо этого следует использовать флажки.
НАСТРОЙКИ:
Ниже приведен список допустимых настроек для переключателей:
Параметр имени указывает, к какой группе переключателей относится это поле. Когда вы выбираете одну кнопку, все остальные кнопки в той же группе не выбираются.
Если вы не можете определить, к какой группе принадлежит текущая кнопка, у вас может быть только одна группа переключателей на каждой странице.
Параметр значения определяет, что будет отправлено, если отмечено.
Параметр выравнивания определяет способ выравнивания поля.
Допустимые значения: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Совмещения объяснены в разделе изображений. Вы можете узнать о различных выравниваниях здесь.
Параметр tabindex определяет, в каком порядке должны активироваться различные поля, когда посетитель нажимает клавишу табуляции.
ПРИМЕР:
Взгляните на этот пример HTML:
|