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

313

Мне просто интересно, как использовать новый входной атрибут HTML5, "необходимый" на радиобарабанах. Нужно ли каждому полю радиообмена атрибуту, как показано ниже? Или это достаточно, если только одно поле получает его?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Теги:
required
radio-button

4 ответа

516
Лучший ответ

Установите атрибут required для хотя бы одного ввода группы радиосвязи.


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

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

  <form>
 Выберите пол:

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

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

 < input type = "submit" >
</форма >код>

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

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

Источник

  • 56
    Очень важно помнить, что входы радио и флажков сгруппированы по атрибуту имени . Таким образом, настройка, необходимая для любого из входов (среди группы входов с одинаковым именем), будет работать. С другой стороны, если вы пропустите атрибут name , он не будет работать так, как вы ожидаете.
  • 4
    @kumar_harsh Очень хорошая мысль. Типичный случай, когда кто-то опускает имя, это когда используется Angular ng-модель.
Показать ещё 7 комментариев
12

попробуйте это...

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

      <input type="submit" value="Click Here" />
</form>

Найти JSFIDDLE

3

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

Чтобы исправить это, нужно заменить display:none на opacity:0

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

Вот очень простая, но современная реализация требуемых радиокнопок с собственной проверкой 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="male" class="hidden" required><span>Other</span></label>
  </div>

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

</form>

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню