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

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

355 голосов
/ 27 ноября 2011

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

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

Ответы [ 4 ]

587 голосов
/ 27 ноября 2011

Установите атрибут 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>

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

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

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

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

Источник

3 голосов
/ 13 сентября 2017

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

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

0 голосов
/ 06 апреля 2019

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

<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 " в одном из операторов select .Если вы хотите изменить способ его отображения по умолчанию.Вы можете следовать этим шагам.Это просто дополнительная информация, если у вас есть намерение изменить поведение по умолчанию.

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

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

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

https://css -tricks.com / almanac / селекторы / r / обязательно /

0 голосов
/ 14 сентября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...