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" />Antworten:
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>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.
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.
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
display:none. Das ist bereits hier beantwortet: stackoverflow.com/questions/49687229/…
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>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 .
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"