Verwendung des Attributs "Erforderlich" mit einem Eingabefeld "Radio"

409

Ich frage mich nur, wie ich das neue HTML5-Eingabeattribut "erforderlich" auf Optionsfeldern richtig verwenden kann. Benötigt jedes Optionsfeld das folgende Attribut oder reicht es aus, wenn nur ein Feld es erhält? 

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html radio-button required Nerdess
quelle

Antworten:

691

TL; DR: Legen Sie das requiredAttribut für mindestens einen Eingang der Funkgruppe fest.

Die Einstellung requiredfür alle Eingänge ist klarer, aber nicht erforderlich (es sei denn, Sie generieren dynamisch Optionsfelder).

Um Optionsfelder zu gruppieren, müssen alle denselben nameWert haben. Dadurch kann jeweils nur eine ausgewählt werden und gilt requiredfür die gesamte Gruppe.

<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>
Erweitern Sie das Snippet

Beachten Sie auch:

Um Verwirrung darüber zu vermeiden, ob eine Optionsfeldgruppe erforderlich ist oder nicht, sollten Autoren das Attribut für alle Optionsfelder in einer Gruppe angeben. Im Allgemeinen wird den Autoren empfohlen, Optionsfeldgruppen zu vermeiden, für die zunächst keine Kontrollkästchen aktiviert wurden, da dies ein Zustand ist, zu dem der Benutzer nicht zurückkehren kann, und daher im Allgemeinen als schlechte Benutzeroberfläche angesehen wird.

Quelle

Seybsen
quelle
1
@kumar_harsh: Jedes als erforderlich markierte Kontrollkästchen muss aktiviert sein. Ebenso hat das Markieren eines erforderlichen Kontrollkästchens keine Auswirkungen auf andere Kontrollkästchen (gleicher Name oder nicht). Es gibt kein einfaches Markup, das angibt, dass "von diesen x Kontrollkästchen mit demselben Namen" mindestens eines aktiviert ist.
Brad Kent
3
@Davdriver Ja, Sie können es auf allen Optionsfeldern angeben, wenn Sie möchten. Tatsächlich schrieb w3c: Um Verwirrung darüber zu vermeiden, ob eine Optionsfeldgruppe erforderlich ist oder nicht, sollten Autoren das Attribut für alle Optionsfelder in einer Gruppe angeben. (siehe w3.org/TR/html5/forms.html#the-required-attribute unter Codebeispiel )
Seybsen
1
Sry, aber das Folgende ist ein Haufen Geld: In der Tat wird den Autoren im Allgemeinen empfohlen, Optionsfeldgruppen zu vermeiden, für die zunächst keine Kontrollkästchen aktiviert wurden, da dies ein Zustand ist, zu dem der Benutzer nicht zurückkehren kann, und wird daher allgemein als schlechte Benutzeroberfläche angesehen. Warum? Weil das Fehlen eines anfänglich überprüften Steuerelements ein vollständig gültiger Fall (UX) ist.
PussInBoots
1
Ich möchte auch hinzufügen, dass in einigen Fällen Optionsfelder, die keinen initialisierten "geprüften" Status haben, eine sehr gute Sache und eine gute UX sind. In meinem Fall muss der Benutzer zunächst ein Objekt anhand einer halblangen Liste von Ja / Nein-Antworten klassifizieren. Falsche Antworten auf diese Fragen würden sich nachteilig auf die nachgelagerte Logik auswirken. Daher kann ich die Antworten nicht standardmäßig auf Ja oder Nein setzen, da sie für jedes Objekt, das der Benutzer klassifiziert, unterschiedlich sind. Es ist möglich, dass sie eine verpassen, die geändert werden musste, und fehlerhafte Daten in die Datenbank eingeben. Oder die Aufgabe wird unterbrochen und ist sich nicht sicher, wo sie aufgehört haben.
Joel Wigton
1
@Seybsen Nah, "im Allgemeinen" deckt ab, dass dies kein absolutes ist. Aber diese Normungsgremien geben niemals Beispiele dafür, wann es tatsächlich eine schlechte Benutzeroberfläche wäre, ihre Empfehlung zu verwenden, deshalb wollte ich eine bereitstellen. Sie lassen es so klingen, als hätten Sie, wenn Sie es verwenden, nicht an Ihre UX gedacht. Ich möchte, dass andere Entwickler das Vertrauen haben, eine fundierte Designentscheidung zu treffen - und nicht nur blind jedes Optionsfeld als Standard festlegen.
Joel Wigton
4

Sie können dieses Code-Snippet verwenden ...

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

Geben Sie in einer der select- Anweisungen das Schlüsselwort " required " an . Wenn Sie die Standarddarstellung ändern möchten. Sie können diese Schritte ausführen. Dies dient nur als zusätzliche Information, wenn Sie beabsichtigen, das Standardverhalten zu ändern.

Fügen Sie Folgendes in Ihre .cssDatei ein.

/* style all elements with a required attribute */
:required {
  background: red;
}

Weitere Informationen finden Sie unter folgender URL.

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

Dulith De Costa
quelle
3

Wenn Ihre Optionsfelder angepasst wurden, z. B. das ursprüngliche Symbol für das Optionsfeld über CSS ausgeblendet wurde, display:nonedamit Sie Ihr eigenes Optionsfeld erstellen können, wird möglicherweise der Fehler angezeigt.

Die Art und Weise , es zu beheben ist zu ersetzen display:nonemitopacity:0

James
quelle
Ich denke, Sie meinen, dass die Fehlermeldung des Browsers nicht sichtbar ist, wenn das Optionsfeld selbst über ausgeblendet ist display:none. Das ist bereits hier beantwortet: stackoverflow.com/questions/49687229/…
Seybsen
1

Hier ist eine sehr einfache, aber moderne Implementierung der erforderlichen Radiobuttons mit nativer HTML5-Validierung:

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>
Erweitern Sie das Snippet

Obwohl ich ein großer Fan des minimalistischen Ansatzes der nativen HTML5-Validierung bin, möchten Sie ihn möglicherweise langfristig durch die Javascript-Validierung ersetzen. Durch die Javascript-Validierung haben Sie weitaus mehr Kontrolle über den Validierungsprozess und können echte Klassen (anstelle von Pseudoklassen) festlegen, um das Styling der (in) gültigen Felder zu verbessern. Diese native HTML5-Validierung kann Ihr Fallback sein, wenn Javascript defekt ist (oder fehlt). Sie können ein Beispiel dafür finden hier , zusammen mit einigen anderen Vorschlägen, wie man bessere Formen , inspiriert von Andrew Cole .

JoostS
quelle
0

Ich musste required="required"zusammen mit dem gleichen Namen und Typ verwenden, als die Validierung gut funktionierte.

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
quelle
1
Es wäre hilfreich, wenn Sie Ihre Antwort formatieren und erklären würden, warum sie funktioniert.
Joe Lissner
1
vereinbart w @JoeLissner. Bitte formatieren Sie Ihren Code als solchen mit den bereitgestellten Tools.
Sao