Мне просто интересно, как использовать новый входной атрибут HTML5, "необходимый" на радиобарабанах. Нужно ли каждому полю радиообмена атрибуту, как показано ниже? Или это достаточно, если только одно поле получает его?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Установите 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>попробуйте это...
<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
Вот очень простая, но современная реализация требуемых радиокнопок с собственной проверкой 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>Вы можете использовать этот фрагмент кода...
<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.