Zastanawiam się tylko, jak prawidłowo użyć nowego atrybutu wejściowego HTML5 „wymagany” na przyciskach radiowych. Czy każde pole przycisku opcji wymaga atrybutu jak poniżej, czy jest wystarczające, jeśli tylko jedno pole go otrzyma?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />Odpowiedzi:
TL; DR: Ustaw requiredatrybut dla co najmniej jednego wejścia grupy radiowej.
Ustawienie requireddla wszystkich wejść jest bardziej przejrzyste, ale nie konieczne (chyba że dynamicznie generuje przyciski opcji).
Aby zgrupować przyciski opcji, wszystkie muszą mieć tę samą namewartość. Pozwala to na wybranie tylko jednego na raz i dotyczy requiredcałej grupy.
<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>Zwróć również uwagę na:
Aby uniknąć nieporozumień co do tego, czy wymagana jest grupa przycisków opcji, autorzy są zachęcani do określenia atrybutu wszystkich przycisków opcji w grupie. Rzeczywiście, ogólnie rzecz biorąc, autorzy są zachęcani do unikania posiadania grup przycisków opcji, które nie mają początkowo sprawdzonych elementów sterujących, ponieważ jest to stan, do którego użytkownik nie może wrócić i dlatego jest ogólnie uważany za zły interfejs użytkownika.
Możesz użyć tego fragmentu kodu ...
<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>Podaj słowo kluczowe „ wymagane ” w jednym z wybranych . Jeśli chcesz zmienić domyślny sposób jego wyglądu. Możesz wykonać następujące kroki. Jest to tylko dodatkowe informacje, jeśli masz zamiar zmodyfikować domyślne zachowanie.
Dodaj następujące elementy do .csspliku.
/* style all elements with a required attribute */
:required {
background: red;
}Więcej informacji można znaleźć pod następującym adresem URL.
Jeśli przyciski radiowe zostały spersonalizowane, na przykład oryginalna ikona przycisku radiowego została ukryta za pomocą css display:none, aby można było utworzyć własny przycisk radiowy, może wystąpić błąd.
Sposobem na to jest zastąpienie display:nonegoopacity:0
display:none. Na to już odpowiedziałem tutaj: stackoverflow.com/questions/49687229/…
Oto bardzo podstawowa, ale nowoczesna implementacja wymaganych przycisków radiowych z natywną weryfikacją 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>Chociaż jestem wielkim fanem minimalistycznego podejścia do używania natywnej weryfikacji HTML5, na dłuższą metę możesz chcieć zastąpić ją sprawdzaniem poprawności Javascript. Sprawdzanie poprawności Javascript daje znacznie większą kontrolę nad procesem sprawdzania poprawności i pozwala ustawić prawdziwe klasy (zamiast pseudoklas), aby poprawić styl (nie) prawidłowych pól. Ta natywna walidacja HTML5 może być twoją rezerwą w przypadku zepsutego (lub braku) Javascript. Możesz znaleźć przykład tego tutaj , wraz z kilkoma innymi sugestiami, jak tworzyć lepsze formy , zainspirowany przez Andrew Cole'a .
Musiałem użyć required="required"wraz z tą samą nazwą i typem, co sprawdzanie poprawności działało dobrze.
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"