Radio input type html: — HTML: HyperText Markup Language

Leave a Comment / Html / By /

Содержание

html — Почему не отображаются radio button

Вопрос задан

Изменён 6 месяцев назад

Просмотрен 88 раз

Я пробую сделать маленький прототип из radio buttons. На месте инициалов (Роман) будут приходить данные из backend и с помощью radiobutton я буду выбирать их.

Проблема в том, что radio button у меня вообще не отображается на странице. Скажите, в чем проблема, почему они вообще не видны?

<main>
  <label>
    <input type="radio" name="first_user_of_similar's_user">
    Roman Dyshko
  </label>
  <label>
    <input type="radio" name="second_user_of_similar's_user">
    Roman Dyshko
  </label>
</main>
  • html
  • css
  • angular
  • radiobutton

3

Очевидно, у Вас что-то со стилями (возможно, для radiobutton где-то прописано display: none). Потому что если просто вставить Вашу разметку в сниппет, то всё отображается.

И, кстати, у всех radiobutton одной группы должно быть одинаковое имя. У Вас сейчас имена разные, поэтому корректно работать это не будет (по сути получаются checkbox с множественным выбором).

<main>
  <label>
    <input type="radio" name="first_user_of_similar's_user">
    Roman Dyshko
  </label>
  <label>
    <input type="radio" name="second_user_of_similar's_user">
    Roman Dyshko
  </label>
</main>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

input(type-radio)_element (html) | Поддержка специальных возможностей

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

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

Уровень поддержки чтения с экрана: частичный (128/133)

Уровень поддержки голосового управления: поддерживается с 9 неизвестными результатами

На этой странице

Об этой функции все тесты для этой функции варьируются от года до 3 лет назад. Подробные даты и информацию о версии можно найти в соответствующих тестах.

Предупреждение

Неправильные или частичные результаты могут быть устаревшими. Самый старый результат трехлетней давности. Рассмотрите возможность запуска связанных тестов и внесения результатов.

Ожидания

Что такое ожидания?

Screen Reader support by expectation

Expectation JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
MUST convey its name supported supported supported supported supported supported supported supported supported поддерживается поддерживается
ДОЛЖЕН передавать свою роль поддерживается поддерживается supported supported supported supported supported supported supported supported supported
MUST convey the checked state supported supported supported supported supported поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается
MUST convey the unchecked state supported supported supported supported supported supported supported supported supported supported supported
MUST convey a change в проверенном состоянии поддерживается поддерживается поддерживается поддерживается поддерживается supported supported supported supported supported supported
MUST convey the position in set information supported supported supported supported supported supported supported нет нет поддерживается поддерживается
СЛЕДУЕТ предоставлять ярлыки для перехода к этой роли supported supported supported supported supported supported supported supported supported supported supported

Voice Control support by expectation

Ожидание Естественно говорящий дракон Голосовой доступ (Android) Voice Control (iOS) Voice Control (MacOS) Windows Speech Recognition Windows Voice Access
Chrome Chrome Safari Safari Edge Chrome Edge Chrome
ДОЛЖЕН сообщать свое имя поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается неизвестно unknown
MUST convey its role supported supported not applicable supported supported supported unknown unknown

Expectation: convey its name

Rationale:

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

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: НЕОБХОДИМО
  • Голосовое управление: НЕОБХОДИМО
Примечания:

Для ввода формы — команды для чтения построчно (стрелки вниз и вверх в большинстве программ чтения с экрана Windows) не всегда приводят к тому, что имя передается явно, когда виртуальный фокус перемещается на ввод, где метка визуально отображается и программно связана с вводом. Это приемлемо, потому что имя подразумевает тот факт, что оно должно естественным образом встречаться в порядке чтения. Некоторые программы чтения с экрана предпочитают не передавать имя в таких случаях, вероятно, в попытке уменьшить многословие.

Примеры:
  • Программа чтения с экрана объявит имя (метку).
  • Программное обеспечение для голосового управления позволяет пользователю сказать что-то вроде «нажмите <имя>«, чтобы активировать управление.

Screen Reader support for ‘MUST convey its name’
Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
aria-required attribute on каждый переключатель HTML в наборе полей поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается supported supported supported supported
The html required attribute on each HTML radio button in a fieldset supported supported supported supported supported supported supported поддерживается поддерживается поддерживается поддерживается

9047.
Поддержка голосового управления для «ДОЛЖЕН передать свое имя»
Тест Dragon Naturally Speaing Voice Access (Android) голосовой контроль (IOS) голосовой контроль (Android) голосовой контроль (IOS) голосовой контроль (MACOS) Chrome Chrome Safari Safari Edge Chrome Edge Chrome
атрибут fieldset 9 для каждого HTML-обязательного радиокнопки0044 supported supported supported supported supported supported unknown unknown
The html required attribute on each HTML radio button in a fieldset supported supported supported поддерживается поддерживается поддерживается неизвестно неизвестно

Ожидание: передать свою роль

Обоснование:

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

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: НЕОБХОДИМО
  • Голосовое управление: НЕОБХОДИМО
Примеры:
  • Средство чтения с экрана может объявлять роль «радио»
  • 5 Голосовое управление 90 программное обеспечение позволит пользователю сказать что-то вроде «щелкни по радио», чтобы сфокусировать ввод, или пометить роль номером.

1 Chrome
Screen Reader support for ‘MUST convey its role’
Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox 4 Firefox 0044 Safari Safari
aria-required attribute on each HTML radio button in a fieldset supported supported supported supported supported supported supported supported supported поддерживается поддерживается
Атрибут html required для каждой радиокнопки HTML в наборе полей поддерживается supported supported supported supported supported supported supported supported supported supported

Voice Control support for ‘MUST convey its role’
Тест Dragon Naturally Talking Голосовой доступ (Android) Голосовое управление (iOS) Voice Control (MacOS) Windows Speech Recognition Windows Voice Access
Chrome Chrome Safari Safari Edge Chrome Edge Chrome
aria-required атрибут каждой радиокнопки HTML в наборе полей поддерживается поддерживается не применяется поддерживается поддерживается поддерживается unknown unknown
The html required attribute on each HTML radio button in a fieldset supported supported not applicable supported supported supported unknown unknown

Ожидание: передать отмеченное состояние

Обоснование:

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

Сила этого ожидания для различных типов вспомогательных технологий:
  • Читатели экрана: Должен
  • . Голосовое управление: NA
Примеры:
  • Экранный счет экрана может объявить «проверенный». Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS) Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari aria-required attribute on each HTML radio button in a fieldset поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается supported supported supported The html required attribute on each HTML radio button in a fieldset supported supported supported supported supported supported supported supported поддерживается поддерживается поддерживается

    Ожидание: передать непроверенное состояние

    Обоснование:

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

    Сила этого ожидания для различных типов вспомогательных технологий:
    • Программы чтения с экрана: НЕОБХОДИМО
    • Голосовое управление: нет данных
    Примеры:
  • 3 Экран
  • 4 читатель может объявить «непроверенный» или подразумевать, что элемент не проверен, вообще не объявляя о проверенном состоянии.

Поддержка средства чтения с экрана для «ДОЛЖЕН передавать непроверенное состояние»
Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
044 supported supported supported supported supported supported supported supported supported supported supported
The html required attribute on each HTML radio button in a fieldset поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается Поддержанный Поддержанный Поддержанный Поддержанный

Ожидание: Передача изменение в проверено состоянии

РАЦИЯ:

А. Пользователь для читателя. для различных типов вспомогательных технологий:

  • Программы чтения с экрана: НЕОБХОДИМО
  • Голосовое управление: НЕТ
Примеры:
  • Программа чтения с экрана может объявлять «отмечено» или «не отмечено»
  • A screen reader might announce the entire control again with the new state

Edge 40044
Screen Reader support for ‘MUST convey a change in the checked state’
Test JAWS Экранный диктор NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome
Edge Chrome Edge Firefox Firefox Chrome Safari Safari
aria-required attribute on each HTML radio button in a fieldset supported supported supported поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается
The html required attribute on each HTML radio button in a fieldset supported supported supported supported supported supported supported supported supported supported supported

Ожидание: передать позицию в наборе информации

Обоснование:

Пользователю нужно, где находится позиция в списке

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: НЕОБХОДИМО
  • Голосовое управление: НЕТ
Примеры:
  • Программа чтения с экрана может выглядеть примерно так: «1 из 6».

Screen Reader support for ‘MUST convey the position in set information’
Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)
Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari
атрибут aria-required для каждой радиокнопки HTML в наборе полей поддерживается поддерживается поддерживается поддерживается supported supported supported none none supported supported
The html required attribute on each HTML radio button in a fieldset supported supported supported supported поддерживается поддерживается поддерживается нет нет поддерживается поддерживается

Ожидание: предоставить ярлыки для перехода к этой роли

Обоснование:

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

Сила этого ожидания для различных типов вспомогательных технологий:
  • Программы чтения с экрана: СЛЕДУЕТ
  • Голосовое управление: НЕТ Test JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS) Chrome Edge Firefox Edge Chrome Edge Firefox Firefox Chrome Safari Safari обязательный атрибут aria для каждой радиокнопки HTML в наборе полей supported supported supported supported supported supported supported supported supported supported supported The html required attribute on each HTML radio button in a fieldset поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается поддерживается

    Радиокнопки и флажки — руководство пользователя

    JavaScript в настоящее время отключен в вашем веб-браузере.
    Для полной функциональности этого сайта необходимо включить JavaScript. Вот инструкции, как включить JavaScript.

    Радиокнопки

    Пример:

    Выбор А Выбор Б Выбор С

    HTML: 

    Выбор A
Выбор B
Выбор C

    Для текстовых полей ввода определен стиль по умолчанию. Дополнительные стили не нужны.

    Радиодетали должны быть стилизованы под набор полей . См. Макет формы.

    Флажки

    Пример:

    Мой флажок 1 Мой флажок 2

    HTML: 

    Мой флажок 1
Мой флажок 2

    Для текстовых полей ввода определен стиль по умолчанию. Дополнительные стили не нужны.

    Компоненты флажка должны быть оформлены в сочетании с набор полей . См. Макет формы.

    Стиль отключенных полей

    Пример:

    Это отключенный флажок

    HTML: 

    Это отключенный флажок

    Наборы полей для макета формы

    Пример:

    Цвет:

    Синий Красный

    HTML: 

    
...
<набор полей>
Цвет:
<дел>
<диапазон>
<тип ввода = "радио" />


<диапазон>
<тип ввода = "радио" />
...

Наборы полей HTML используются для связи элементов ввода формы как группы. Дополнительный элемент div требуется для правильного стиля и размещения.

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

Радиокнопки и флажки состоят из элемента fieldset и элементов. Это позволяет использовать отдельные метка с для каждого отдельного элемента формы в наборе полей.

Обратите внимание на использование контрольного списка для класса в наборе полей . Флажки формы взаимозаменяемы с выбором радио.

Пример:

Цвет:

Синий Красный

HTML: 


...
    <набор полей>
        ... код опущен ...
    
...

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

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

Далее рассматриваются дополнительные случаи реализации, связанные с радиомодулями и флажками.

Радиокнопки и флажки с длинными метками

Пример:

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

Да - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Нет - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

HTML: 

<форма>
<набор полей>
<легенда>Хотите ли вы копию следующего
ежемесячная транзакция, отправленная вам для ваших записей?
<дел>
<диапазон>

<метка для = "копировать-y">
Да - Lorem ipsum dolor sit amet. ..


<диапазон>

При использовании длинных меток с переключателями или флажками, в зависимости от того, как они расположены, список параметров может сбивать с толку конечных пользователей. Чтобы устранить эту проблему, все переключатели и списки флажков, которые содержат длинные метки, требующие переноса текста, должны добавлять класс option-label-wrap.

Один флажок

Пример:

условия обслуживания

Я согласен, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.