Jak używać atrybutu „wymagany” w polu wejściowym „radio”

409

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" />

html radio-button required nerdess
źródło

691

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>

Rozwiń fragment kodu

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.

Źródło

Seybsen
źródło

1

@kumar_harsh: Każde pole wyboru oznaczone jako wymagane musi być zaznaczone. Podobnie, zaznaczenie wymaganego pola wyboru nie ma wpływu na żadne inne pola wyboru (o tej samej nazwie lub nie). Nie ma prostego znacznika wskazującego „z tych x pól wyboru o tej samej nazwie”, należy zaznaczyć co najmniej jedno.

Brad Kent

3

@Davdriver tak, możesz to określić we wszystkich przyciskach radiowych, jeśli chcesz. W3c napisał: 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. (patrz w3.org/TR/html5/forms.html#the-required-attribute w Przykładzie kodu )

Seybsen

1

Śmiało, ale następujące jest mnóstwo bajerów: 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 jest zatem ogólnie uważany za słaby interfejs użytkownika. Dlaczego? Ponieważ brak początkowo sprawdzonej kontroli jest całkowicie poprawnym przypadkiem (UX).

PussInBoots

1

Chciałbym również dodać, że w niektórych przypadkach przyciski radiowe, które nie mają zainicjowanego stanu „sprawdzonego”, są bardzo dobrą rzeczą i dobrym UX. W moim przypadku użytkownik musi wstępnie sklasyfikować jakiś obiekt na podstawie półdługiej listy odpowiedzi tak / nie. Błędne uzyskanie odpowiedzi na te pytania negatywnie wpłynęłoby na logikę niższego szczebla. Dlatego nie mogę domyślnie odpowiedzieć na „tak” lub „nie”, ponieważ będzie on różny dla każdego obiektu klasyfikowanego przez użytkownika. Możliwe, że przegapią jedną, która wymagała zmiany, i wprowadzą złe dane do bazy danych. Albo zadanie zostanie przerwane i niepewne, gdzie zostało przerwane.

Joel Wigton,

1

@Seybsen Nah, „ogólnie” obejmuje, że nie jest to absolutne. Ale te organy normalizacyjne nigdy nie podają przykładów, kiedy korzystanie z ich rekomendacji byłoby kiepskim interfejsem użytkownika, więc chciałem je przedstawić. Sprawiają, że brzmi to tak, jakbyś go używał, nie zastanawiałeś się nad swoim UX. Chcę, aby inni programiści mieli pewność dokonania świadomego wyboru projektu - a nie tylko ślepego domyślnego domyślnego działania każdego przycisku opcji.

Joel Wigton,

4

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.

https://css-tricks.com/almanac/selectors/r/required/

Dulith De Costa
źródło

3

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

James
źródło

Myślę, że masz na myśli, że błąd przeglądarki nie jest widoczny, jeśli sam przycisk radiowy jest ukryty display:none. Na to już odpowiedziałem tutaj: stackoverflow.com/questions/49687229/…

Seybsen

1

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>

Rozwiń fragment kodu

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 .

JoostS
źródło

0

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"

mk
źródło

1

Pomogłoby to sformatowanie odpowiedzi i wyjaśnienie, dlaczego zadziałało.

Joe Lissner

1

uzgodniono w @JoeLissner. Sformatuj kod jako taki za pomocą dostarczonych narzędzi.

sao

Jak używać atrybutu „wymagany” w polu wejściowym „radio”

Odpowiedzi: