Как сделать тест в html с radio
Обновлено: 03.07.2024
Атрибут name требуется большинству элементов формы, так как его значение передается на сервер и используется серверными сценариями.
Примечание: обратите внимание, что элемент относится к пустым элементам и не имеет закрывающего тега, поэтому перед или после элемента обычно добавляют текст (метка), содержащий информацию о том, какую информацию нужно вводить в текущее поле.
Все радио кнопки, связанные с заданными вариантами значений, должны иметь одинаковое значение атрибута name, но каждая отдельная радио кнопка должна иметь уникальное значение атрибута value.
Примечание: элемент является строчным элементом, поэтому для отображения каждого элемента управления на новой строке нужно добавить после каждого элемента тег
или поместить каждый элемент в абзац (в тег
Все флажки, относящиеся к одной группе, должны иметь одинаковое значение атрибута name, но каждый отдельный вариант должен иметь уникальное значение атрибута value.
Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента .
Элемент
создает многострочное текстовое поле. Если в поле введено больше текста, чем может поместится в текстовой области, то с правой стороны появляется полоса прокрутки. Текст, расположенный между открывающим и закрывающим тегом, будет отображаться в текстовом поле в качестве значения по умолчанию:
Атрибут name должен содержать уникальное имя, которое будет идентифицировать данный элемент на серверной стороне. Атрибут rows позволяет указать количество строк, определяющих высоту текстовой области, а cols задает ширину текстовой области в символах.
Выпадающий список
Элемент создает меню, содержащее выпадающий список. Элементы списка задаются с помощью элементов , которые должны располагаться между открывающим и закрывающим тегами элемента :
Элементы и
Для визуального выделения взаимосвязанных элементов формы можно воспользоваться элементом , который добавляет рамку вокруг своих дочерних элементов:
Название (заголовок) для такой группы элементов можно указать с помощью элемента , который должен быть первым дочерним элементом внутри элемента :
Элемент
Можно добавлять текст к элементам формы просто написав его рядом с нужным элементом, но для браузеров и поисковых систем, анализирующих разметку веб-страницы, это будет просто текст, не имеющий прямого отношения ни к одному из элементов формы. Элемент позволяет связать текст с определенным элементом формы, такой текст называется меткой (или ярлыком).
По умолчанию метки визуально не отличаются от обычного текста, однако они позволяют выбирать элементы формы кликая не только на сам элемент, но и на его метку.
Связать метку с элементом формы можно двумя способами: поместить весь элемент формы внутрь элемента или с помощью атрибута for, который в качестве значения принимает идентификатор элемента формы, с которым нужно связать метку:
Метки можно размещать как до так и после элемента управления, связанного с ней, потому что, если значение атрибута for элемента совпадает со значением атрибута id элемента формы, то неважно где будет находиться метка.
HTML и CSS
JavaScript
Программирование
На Сервере
Веб Стоительство
JavaScript
Программмирование
На сервере
Набор Кодировок
Упражнения
Викторины
Сертификаты
HTML Справочник
HTML Теги
Спасибо, за вашу помощь!
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание. Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого. Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности. Авторское право 1999 - 2022 Все права защищены.
Работает на W3.CSS.
I am working on the radio buttons, I have designed something from google help but in this fiddle you will see that both are checked when the page load, i used the checked option only with radio1 button. i need to change it that the page loads radio1button is checked and radio2 button is not checked.
When you will click on 2nd button you will see that button 1 will be unchecked, but button 2 remains checked, any solution ?
1 Answer 1
instead of general sibling
use adjacent sibling + selector
General sibling will select all the labels next to the element
Adjacent sibling will select only the next label
Not the answer you’re looking for? Browse other questions tagged html html5 css3 radio-button or ask your own question.
Related
Hot Network Questions
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2019 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2019.11.15.35459
Атрибут checked="checked"
Делает чекбокс [type="checkbox"] или радиокнопку [type="radio"] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.
Атрибут checked="checked" можно вызывать с помощью label
Если нажать на содержимое label, то сработает input (будет активным или нет).
описание описание1 описание2
input не обязательно должен располагаться внутри label.
описание описание1 описание2
Атрибут checked="checked" можно вызывать с помощью нескольких label
Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.
описание2 описание1 описание11 описание21 описание12 описание22
Псевдокласс :checked
С помощью CSS можно прописать что будет происходить с другими нижестоящими элементами, когда кнопка нажата. Когда кнопка отжата, элементы будут возвращаться к исходному состоянию. Чтобы всё без проволочек было, нужно хорошо разбираться в селекторах.
Вот несколько вещей, которые можно сделать только на CSS
- Tab-меню
- Слайдеры, галереи: 1, 2, 3
- Accordion
- Модальное окно
- Спойлер
- Пока флажок не установлен, по ссылке пройти нельзя:
Я ознакомлен и принимаю условия договора
ссылка, ну-ка, нажмите на меня
:checked и селекторы в Google Chrome
Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.
Проверка чекбокса на включение/отключение
Проверить все ли чекбоксы помечены
Установить checked в checkbox
Установить checked в radio
Выделить все checkbox одним нажатием кнопки
- если отметить все checkbox, то будет отмечен и главный,
- если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
- если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.
Решение я нашла тут. Check all
Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега
Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.
Первая форма: Вторая форма:
Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.
Дерево из checkbox
- если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
- если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
- родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
- семантический код,
- у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.
- если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.
Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.
Как сделать полноценное дерево из checkbox
Если дерево большое, то вложенные пункты лучше прятать. В стилях предыдущей реализации в комментариях к коду CSS показано как. Минус того метода: нажмёшь 2, а потом убираешь галочки с 2.2, 2.3, 2.4 чтобы осталась галка только на 2.1. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.
- плюсик и минус работают только если ни один из потомков не выделен,
- если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
- если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
- если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
- доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.
Деактивировать все флажки, кроме нескольких отмеченных
Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.
Я, конечно, понимаю, что запись странновата, только вот .querySelectorAll(‘[type="checkbox"]:not([checked])’) работает только для изначально установленных флажков.
Как посчитать сумму значений value у выбранных чекбоксов
80 комментариев:
Имеею таблицу. Строку из 5 ячеек. в 1-ых трех ячейках стоят type-radio.
Как добиться, чтобы при выборе 1 (прозрачный цвет), 2(красный цвет), 3(синий цвет) radio цвет ячеек 4 и 5 соответственно изменялся?
var c = document.querySelectorAll(‘input’);
for (var i = 0; i Максим Бойко Работает. Сложность осталась в следующем. На странице имеется целый список из таких строк. В каждой строке присутствует минимум 2 radio элемента. Этот скрипт, понятное дело, меняет цвет во всех td ячейках. Требуется чтобы каждая строка по отдельности меняла цвет. Прошу помощи. У меня есть нынешний скрипт, который работает, но меняет строку tr целиком.
jQuery(document).ready(function() )
jQuery("input[value=’обычные’]").click(function () )
jQuery("input[value=’опасные’]").click(function () )
>);
var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll(‘fieldset’), function(eFieldset) 0 && allChecked NMitra По второму пункту
Весь пример http://jsfiddle.net/NMitra/uewct60o/ Анонимный Здравствуйте. Спасибо. Вы очень помогли, все получилось. Анонимный Здравствуйте, помогите пожалуйста.
Кнопка №6 — for="payt6"
Я хочу сделать чтобы кнопка, при нажатии показывала невидимый текст.
Пожалуйста отредактируйте код и объясните куда нужно вписывать текст.
Это что-то связанное с концом кода, я прав?
Заранее спасибо NMitra Здравствуйте,
Вот мой вариант —
Мне исполнилось 18 лет и я согласен с правилами предоставления услуги
описание 1
описание 2
Подскажите, пожалуйста, как сделать, в случае дерева чекбоксов, чтобы они не только отмечались в зависимости от отметки родительского, а и выполняли функции, подвязанные на них? В моём случае — это показ/скрытие Overlay на карте Google.
Спасибо! NMitra Внутри функции напишите свою функцию, например, здесь
Атрибут type тега со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.
Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже.
Примечание: Чекбоксы похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать" значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.
| Value | Строка DOM отображающая значение радиокнопки |
| События | change и input |
| Универсальные атрибуты | checked |
| Атрибуты IDL | checked и value |
| Методы | select() |
Атрибут value
Атрибут value — это строка DOM , содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.
Создание группы радиокнопок
Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ( name ). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.
Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута name .
Например, если в Вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с name= "contact" , но с разными value = "email" , value = "phone" и value = "mail" соответственно. Пользователь не видит атрибуты name и value (если только Вы не добавляете код для их отображения).
HTML будет выглядеть следующим образом:
Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут name со значением "contact" и уникальный атрибут value , который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный id , связанный с тегом представляет собой подпись к элементу пользовательского интерфейса."> через атрибут for для установления связи между конкретной меткой и конкретной радиокнопкой.
Вы можете опробовать этот код здесь:
Представление данных группы радиокнопок
Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде "contact=name". Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку "contact=phone" .
Если Вы пренебрежёте атрибутом value в Вашем HTML, то отправленные данные просто присвоят данной группе значение "on" . То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как "contact=on" и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут value !
Примечание: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.
Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута "checked" . Смотрите здесь Selecting a radio button by default.
Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока
Опробуйте этот пример и убедитесь, что для группы радиокнопок "contact" будет только один результат.
Использование радиокнопок
Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.
Выбор радиокнопки по умолчанию
Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут checked , как показано ниже в немного изменённой версии предыдущего примера.
В данном случае первая радиокнопка будет выбрана по умолчанию.
Примечание: Если Вы устанавливаете атрибут checked более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут checked отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом checked . Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.
Providing a bigger hit area for your radio buttons
В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент представляет собой подпись к элементу пользовательского интерфейса."> , так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов в Ваших формах.
Валидация формы
Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.
Установка стилей радиокнопок
Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи, с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.
HTML будет выглядеть следующим образом:
Здесь не так много нового, кроме дополнения в виде элементов и представляет собой заголовок содержания родительского элемента ."> , которые позволяют сгруппировать элементы форм между собой функционально и семантически.
CSS будет выглядеть так:
Самым примечательным здесь является использование свойства appearance с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству appearance значение none , Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства border и border-radius , а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс ), checkbox ( ) или option ( внутри ), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.’> :checked используется для указания стилей внешнего вида кнопок при их выборе.
Стоит иметь в виду, что свойство appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере!
Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.
С помощью тегов форм и значений атрибута type тега input можно создавать различные формы и поля, обеспечивающие взаимодействие с пользователями. Одними из таких форм являются радиопереключатели (поля с возможностью только одного выбора) и флажки (можно выбрать несколько пунктов).
Рассмотрим, как сделать радиопереключатель:
Для этого в качестве значения атрибута type тега input нужно указать radio , причём нужно столько раз написать тег input с его атрибутами, сколько пунктов предполагается сделать, например:
Кроме того, мы использовали в пункте 5 в качестве атрибута тега input атрибут checked. Он применяется для указания предустановленного выбора, то есть, когда пользователь увидит тест, точка будет стоять именно на пункте 5. Если не использовать этот атрибут, то предустановленной точки не будет. В случае радиопереключателя можно пометить только один элемент группы.
Также вы видите кнопку "Очистить" - она используется для сброса выбранных значений. Попробуйте это сделать.
Рассмотрим, как сделать флажки (чекбокс):
Представьте, что вы предлагаете пользователю выбор: согласен он с условиями использования сайта или нет. Использовать для таких ситуаций чекбоксы невозможно, потому что пользователь должен выбрать строго один вариант.
Для созданий переключателя, который умеет обрабатывать только один из множества вариантов, существуют радиокнопки. Название они получили от старых автомобильных радиоприёмников, в которых выбор радио осуществлялся нажатием на одну из множеств кнопок для выбора частоты.
Для создания радиокнопки, также, как и чекбокса, используются два тега:
- с указанием type="radio" . Обязательным атрибутом является name , значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними.
- , в котором будет текст, связанный с нужной нам радиокнопкой.
Для создания связи с тоже существует два способа:
Связь по id . Для этого необходимо задать уникальный id для , и связать с радиокнопкой с помощью атрибута for .
Вложить внутрь тега . При этом указание уникального id не требуется.
Для того, чтобы после отправки формы на сервер возможно было узнать, какой именно пункт был выбран, используется атрибут value , внутри которого находится значение, позволяющее определить радиокнопку.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 радиокнопки. Свяжите их вложив внутри . Уникальное имя для радиокнопок gender . Не забудьте добавить атрибут value
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе
Читайте также: