Radio input type html: — HTML: HyperText Markup Language

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

Вопрос задан 6 месяцев назад

Изменён 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

Edge40044

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:

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

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

 

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

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


<диапазон>
  
Нет - Lorem ipsum dolor sit amet...