Как использовать атрибут «required» с полем ввода «radio»

409

Мне просто интересно, как правильно использовать новый атрибут ввода HTML5 «required» на переключателях. Каждому полю переключателя нужен атрибут, как показано ниже, или достаточно, если его получает только одно поле?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

html radio-button required nerdess
источник

692

TL; DR: установить requiredатрибут как минимум для одного входа группы радиосвязи.

Настройка requiredдля всех входов более понятна, но не обязательна (если только динамически не генерируются переключатели).

Для группировки переключателей все они должны иметь одинаковое nameзначение. Это позволяет выбрать только один за раз и применяется requiredко всей группе.

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

Развернуть фрагмент

Также обратите внимание на:

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

Источник

Seybsen
источник

1

@kumar_harsh: Все флажки, отмеченные как обязательные, должны быть отмечены. Аналогичным образом, пометка обязательного флажка не влияет на другие флажки (с тем же именем или нет). Не существует простой разметки для обозначения «этих x флажков с одинаковым именем», по крайней мере, один должен быть отмечен.

Брэд Кент

3

@Davdriver да, вы можете указать это на всех переключателях, если хотите. На самом деле w3c пишет: Чтобы избежать путаницы относительно того, требуется ли группа переключателей или нет, авторам рекомендуется указывать атрибут для всех переключателей в группе. (см. w3.org/TR/html5/forms.html#the-required-attribute в разделе « Пример кода» )

Seybsen

1

Следует отметить, что следующее - это куча глупостей: в общем, авторам рекомендуется избегать групп переключателей, которые не имеют изначально проверенных элементов управления, так как это состояние, к которому пользователь не может вернуться, и поэтому обычно считается плохим пользовательским интерфейсом. Почему? Потому что отсутствие изначально проверенного элемента управления является полностью допустимым (UX) случаем.

PussInBoots

2

Я также хотел бы добавить, что в некоторых случаях переключатели, которые не имеют инициализированного «проверенного» состояния, это очень хорошая вещь и хороший UX. В моем случае пользователь должен первоначально классифицировать некоторый объект на основе полудлинного списка ответов да / нет. Неправильное получение ответов на эти вопросы отрицательно повлияет на логику нижестоящего потока. Поэтому я не могу по умолчанию ответить либо на «Да», либо на «Нет», поскольку они будут различаться для каждого объекта, который классифицирует пользователь. Возможно, они пропустят тот, который нужно было изменить, и введут неверные данные в БД. Или задача будет прервана и не уверены, где они остановились.

Джоэл

1

@Seybsen Не-а, «в общем» действительно охватывает, что это не абсолют. Но эти органы по стандартизации никогда не приводят примеров того, когда на самом деле использовать их рекомендации будет плохим пользовательским интерфейсом, поэтому я хотел бы привести их. Они заставляют это звучать так, как будто вы используете это, вы не задумывались о своем UX. Я хочу, чтобы другие разработчики имели уверенность в том, чтобы сделать осознанный выбор дизайна, а не просто слепо по умолчанию каждый переключатель.

Джоэл

4

Вы можете использовать этот фрагмент кода ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Укажите ключевое слово « required » в одном из операторов выбора . Если вы хотите изменить способ его отображения по умолчанию. Вы можете следовать этим шагам. Это просто дополнительная информация, если у вас есть намерение изменить поведение по умолчанию.

Добавьте следующее в ваш .cssфайл.

/* style all elements with a required attribute */
:required {
  background: red;
}

Для получения дополнительной информации вы можете обратиться по следующему URL.

https://css-tricks.com/almanac/selectors/r/required/

Дулит Де Коста
источник

3

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

Способ исправить это заменить display:noneнаopacity:0

Джеймс
источник

Я предполагаю, что вы имеете в виду, что сообщение об ошибке браузера не отображается, если сама радиокнопка скрыта через display:none. Вот уже ответили здесь: stackoverflow.com/questions/49687229/…

Seybsen

1

Вот очень простая, но современная реализация требуемых радиокнопок с собственной проверкой HTML5:

body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>

  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

Развернуть фрагмент

Хотя я большой поклонник минималистского подхода к использованию встроенной проверки HTML5, вы можете заменить его проверкой Javascript в долгосрочной перспективе. Проверка Javascript дает вам гораздо больший контроль над процессом проверки и позволяет вам устанавливать реальные классы (вместо псевдоклассов), чтобы улучшить стилизацию (в) допустимых полей. Эта нативная проверка HTML5 может стать вашим запасным вариантом в случае поломки (или отсутствия) Javascript. Вы можете найти пример этого здесь , наряду с некоторыми другими предложениями о том, как сделать Лучшие формы , вдохновленные Эндрю Коулом .

JoostS
источник

0

Я должен был использовать required="required"вместе с тем же именем и типом, чем проверка работала нормально.

input type="radio" name="userradio"  id="" value="User" required="required"

input type="radio" name="userradio" id="" value="Admin" 

input type="radio" name="userradio" id="" value="Guest"

тк
источник

1

Это поможет, если вы отформатируете свой ответ и дадите объяснение, почему это работает.

Джо Лисснер

1

согласился с @JoeLissner. Пожалуйста, отформатируйте ваш код как таковой, используя предоставленные инструменты.

Sao

Как использовать атрибут «required» с полем ввода «radio»

Ответы: