Мне просто интересно, как использовать новый входной атрибут HTML5, "необходимый" на радиобарабанах. Нужно ли каждому полю радиообмена атрибуту, как показано ниже? Или это достаточно, если только одно поле получает его?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Установите атрибут 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" >
</форма >код>
Также обратите внимание:
Чтобы избежать путаницы в отношении того, требуется ли группа переключателей или нет, авторам рекомендуется указывать атрибут на всех переключателях в группе. В самом деле, в целом, авторам рекомендуется избегать групп радиокнопки, которые вначале не имеют каких-либо изначально проверенных элементов управления, поскольку это состояние, к которому пользователь не может вернуться, и поэтому обычно считается плохим пользовательским интерфейсом.
попробуйте это...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Если ваши радиокнопки настроены, например, оригинальный значок для переключателя был скрыт с помощью css display:none
, чтобы вы могли создать свой собственный переключатель, тогда вы можете получить ошибку.
Чтобы исправить это, нужно заменить display:none
на opacity:0
display:none
. Вот уже ответили здесь: stackoverflow.com/questions/49687229/…
Вот очень простая, но современная реализация требуемых радиокнопок с собственной проверкой 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. Вы можете найти пример этого здесь, наряду с некоторыми другими предложениями о том, как сделать лучшие формы, вдохновленные Эндрю Коулом.