Мені просто цікаво, як правильно використати новий вхідний атрибут HTML5 "необхідний" на кнопках радіо. Чи потрібне кожному поле перемикача атрибут, як показано нижче, чи достатньо, якщо його отримує лише одне поле?
<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>Вкажіть ключове слово " обов'язкове " в одному з операторів вибору . Якщо ви хочете змінити типовий спосіб його появи. Ви можете виконати ці кроки. Це лише для отримання додаткової інформації, якщо ви маєте намір змінити поведінку за замовчуванням.
Додайте у свій .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"