Wie man das Attribut "erforderlich" mit einem "Radio"-Eingabefeld verwendet

Question

Ich frage mich gerade, wie man das neue HTML5-Eingabemerkmal "erforderlich" bei Radio-Buttons richtig verwenden kann. Braucht jedes Radio-Button-Feld das Attribute wie unten oder reicht es aus, wenn nur ein Feld es erhält?

Answer 1

TL;DR: Legen Sie das required-Attribut für mindestens eine Eingabe der Optionsgruppe fest.

---

Das Festlegen von required für alle Eingaben ist klarer, aber nicht notwendig (außer beim dynamischen Generieren von Radio-Buttons).

Um Radio-Buttons zu gruppieren, müssen sie alle denselben Wert für das name-Attribut haben. Dies ermöglicht die Auswahl von nur einem Element gleichzeitig und wendet required auf die gesamte Gruppe an.

  Geschlecht auswählen:

    Männlich

    Weiblich

    Andere

Außerdem beachten Sie:

Um Verwirrung darüber zu vermeiden, ob eine Radio-Button-Gruppe erforderlich ist oder nicht, wird den Autoren empfohlen, das Attribut bei allen Radio-Buttons in einer Gruppe anzugeben. Tatsächlich wird im Allgemeinen den Autoren empfohlen, Radio-Button-Gruppen zu vermeiden, die keine anfänglich ausgewählten Steuerelemente haben, da dies ein Zustand ist, zu dem der Benutzer nicht zurückkehren kann und daher im Allgemeinen als eine schlechte Benutzeroberfläche angesehen wird.

Quelle

Answer 2

Ich musste required="required" zusammen mit demselben Namen und Typ verwenden, und dann hat die Validierung funktioniert.

Answer 3

Hier ist eine sehr grundlegende, aber moderne Implementierung von erforderlichen Radio-Buttons mit nativer HTML5-Validierung:

fieldset { 
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border: none;
}
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;}

    Name (optional)

  Geschlecht

    Männlich
    Weiblich 
    Andere

Auch wenn ich ein großer Fan des minimalistischen Ansatzes der Verwendung der nativen HTML5-Validierung bin, möchten Sie diese möglicherweise langfristig durch eine Javascript-Validierung ersetzen. Die Javascript-Validierung gibt Ihnen viel mehr Kontrolle über den Validierungsprozess und ermöglicht es Ihnen, echte Klassen (statt Pseudoklassen) zu setzen, um die Gestaltung der (un)gültigen Felder zu verbessern. Diese natürliche HTML5-Validierung kann in Fällen von defektem (oder fehlendem) Javascript Ihr Backup sein. Ein Beispiel dafür finden Sie hier, zusammen mit einigen anderen Vorschlägen, wie Sie Bessere Formulare erstellen können, inspiriert von Andrew Cole.

Answer 4

Sie können diesen Code-Schnipsel verwenden ...

Spezifizieren Sie das "required" Schlüsselwort in einer der select Anweisungen. Wenn Sie die Standarddarstellung ändern möchten, können Sie die folgenden Schritte befolgen. Dies dient nur als zusätzliche Information, wenn Sie die Standardverhalten ändern möchten.

Fügen Sie das folgende in Ihre .css Datei ein.

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

Für weitere Informationen können Sie auf die folgende URL verweisen.

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

Answer 5

  Geschlecht auswählen:

    Männlich

    Weiblich

    Andere