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

Question

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

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

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

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

1758 4

html5 radio-button

4 ответов:

Comments

Ничего не найдено.

Seybsen · Accepted Answer · 2018-01-13 18:46:50

установить required атрибут по крайней мере для одного входа радиогруппы.

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

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

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

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

  <input type="submit">
</form>
Также обратите внимание:

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

источник

Vijay · Accepted Answer · 2013-12-03 07:19:52

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

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

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

найти JSFIDDLE

james · Accepted Answer · 2018-02-21 13:30:29

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

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

JoostS · Accepted Answer · 2018-09-14 13:06:01

вот очень простая, но современная реализация необходимых радиокнопок с собственной проверкой 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 дает вам гораздо больше контроля над процессом проверки и позволяет вам устанавливать реальные классы (вместо псевдоклассов) для улучшения стиль допустимых полей (in). Эта собственная проверка HTML5 может быть вашим резервным вариантом в случае сломанного (или отсутствия) Javascript. Вы можете найти пример этого здесь, вместе с некоторыми другими предложениями о том, как сделать лучше формы, вдохновленная Эндрю Коул.