Мне просто интересно, как правильно использовать новый атрибут ввода HTML5 «required» на переключателях. Каждому полю переключателя нужен атрибут, как показано ниже, или достаточно, если его получает только одно поле?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Ответы:
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>Также обратите внимание на:
Чтобы избежать путаницы относительно того, требуется ли группа переключателей или нет, авторам рекомендуется указывать атрибут для всех переключателей в группе. В самом деле, в общем, авторам рекомендуется избегать групп переключателей, которые не имеют изначально проверенных элементов управления, так как это состояние, к которому пользователь не может вернуться, и поэтому обычно считается плохим пользовательским интерфейсом.
Вы можете использовать этот фрагмент кода ...
<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.
Если ваши переключатели были настроены, например, оригинальный значок переключателя был скрыт с помощью 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="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Хотя я большой поклонник минималистского подхода к использованию встроенной проверки HTML5, вы можете заменить его проверкой Javascript в долгосрочной перспективе. Проверка Javascript дает вам гораздо больший контроль над процессом проверки и позволяет вам устанавливать реальные классы (вместо псевдоклассов), чтобы улучшить стилизацию (в) допустимых полей. Эта нативная проверка HTML5 может стать вашим запасным вариантом в случае поломки (или отсутствия) Javascript. Вы можете найти пример этого здесь , наряду с некоторыми другими предложениями о том, как сделать Лучшие формы , вдохновленные Эндрю Коулом .
Я должен был использовать 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"