Wie die "required" - Attribut mit einem "radio" - Eingabefeld

Ich Frage mich nur, wie die neuen HTML5-Attribut "required" auf den richtigen Weg radiobuttons. Nicht jedes radiobutton-Feld muss das Attribut wie unten? Oder ist es ausreichend, wenn nur ein Feld bekommt?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

InformationsquelleAutor nerdess | 2011-11-27

591

Legen Sie die required Attribut für mindestens eine Eingabe von der radio-Gruppe.

Einstellung required für alle Eingänge ist klar, aber nicht notwendig (es sei denn, der dynamischen Generierung von radio-buttons).

Gruppe radio-buttons Sie müssen alle die gleiche name Wert. Dies ermöglicht nur eine ausgewählt werden, zu einer Zeit, und gilt required auf die ganze Gruppe.

HTML:
```
<form>
  Select Gender:

  <label><input type="radio" name="gender" value="male" required>Male</label>

  <label><input type="radio" name="gender" value="female">Female</label>

  <label><input type="radio" name="gender" value="other">Other</label>

  <input type="submit">
</form>
```
Beachten Sie auch:

Um Verwirrung zu vermeiden, ob ein radio-button-group erforderlich ist oder nicht, die Autoren sind aufgefordert, geben Sie das Attribut für alle radio buttons in einer Gruppe. In der Tat, im Allgemeinen, Autoren sollten vermeiden, dass die radio-button-Gruppen, die nicht jede zunächst geprüft, Kontrollen in den ersten Platz, dies ist ein Zustand, dass der Benutzer nicht zurückkehren können, und ist daher in der Regel als eine schlechte Benutzeroberfläche.

Quelle
- radio-button-Gruppe, die enthält ein input-element enthält auch alle anderen input-Elemente b, die erfüllen alle folgenden Bedingungen" (4) w3.org/TR/html5/forms.html#radio-button-group
- in Bezug auf (1) - das ist eine sehr offensichtliche Sache, sonst kann Sie nicht aufgerufen werden "radio" - buttons. (2) und (3) - ich würde sagen, dass dies wahr ist in den meisten Fällen sowieso nur die devs etwas zu tun sehr schwierig laufen würde, in diese edge-cases (that being said, ich wusste nicht, diese Punkte, also danke für den Hinweis it out), (4) ist, was meine obige Antwort-Staaten (in weniger technische details)
- Jede checkbox als erforderlich markiert, die geprüft werden müssen. Ebenso das markieren einer checkbox erforderlich ist, wirkt sich das nicht auf alle anderen Checkboxen (gleicher name oder auch nicht). Es gibt keine einfache markup anzugeben, den Hinweis "dieser x-Checkboxen mit gleichem Namen", mindestens eine muss aktiviert sein.
- ja, mit "mindestens eine checkbox muss überprüft werden", ist nicht möglich, nur mit markup, im Gegensatz zu radio-Gruppen.
- Es ist ok zu gehen, mit nur 1 radio-button markiert, aber, können Sie es in allen von Ihnen, wenn Sie wollen? Ich meine, ich weiß, dass es funktioniert, aber würde es akzeptiert werden, die von der W3C?
- ja, können Sie es auf allen radio-buttons, wenn Sie das wünschen. In der Tat w3c schrieb: um Verwirrung Zu vermeiden, ob ein radio-button-group erforderlich ist oder nicht, die Autoren sind aufgefordert, geben Sie das Attribut für alle radio buttons in einer Gruppe. (siehe w3.org/TR/html5/forms.html#the-required-attribute unter Code-Beispiel)
- Sry aber teh folgenden ist eine Reihe von boloney: in der Tat, im Allgemeinen, Autoren sollten vermeiden, dass die radio-button-Gruppen, die nicht jede zunächst geprüft, Kontrollen in den ersten Platz, dies ist ein Zustand, dass der Benutzer nicht zurückkehren können, und ist daher in der Regel als eine schlechte Benutzeroberfläche. Warum? Da nicht mit einer zunächst überprüft control ist eine absolut gültige (UX) Fall.
InformationsquelleAutor Seybsen
3

Wenn Ihr radio die Tasten sind individuell, zum Beispiel das original-Symbol für den radio-button versteckt wurde via css display:none so dass Sie können erstellen Sie Ihre eigene radio-button, dann wirst du vielleicht den Fehler.

Die Möglichkeit, es zu beheben ersetzen display:none mit opacity:0
- Ich denke mal du meinst, dass der browser die Fehlermeldung ist nicht sichtbar, wenn Sie die radio-Taste sich versteckt über display:none. Das ist bereits hier beantwortet: stackoverflow.com/questions/49687229/...
InformationsquelleAutor James
0

Können Sie dieses code-snippet ...
```
<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>
```
Angeben "erforderlich" - Schlüsselwort in eines der select - Aussagen. Wenn Sie die Standardeinstellung ändern möchten Weg von seinem Aussehen. Sie können diesen Schritten Folgen. Dies ist nur für zusätzliche Informationen, wenn Sie irgendeine Absicht, um das Standardverhalten zu ändern.

Fügen Sie den folgenden in Sie .css Datei.
```
/* style all elements with a required attribute */
:required {
  background: red;
}
```
Weitere Informationen finden Sie unter folgenden URL.

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

InformationsquelleAutor Dulith De Costa

Hier ist eine sehr einfache, aber moderne Umsetzung der erforderlichen radiobuttons mit nativen HTML5-Validierung:

CSS:

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

HTML:

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

Zwar bin ich ein großer fan von dem minimalistischen Ansatz mit nativen HTML5-Validierung, möchten Sie vielleicht, um es zu ersetzen mit Javascript-Validierung auf lange Sicht. Javascript-Validierung gibt Ihnen viel mehr Kontrolle über die Validierung, und es ermöglicht Ihnen, real-Klassen (anstelle von pseudo-Klassen) zur Verbesserung der Gestaltung der (in)Felder. Dieses native HTML5-Validierung können Sie Ihre fall-back im Fall von beschädigten (oder fehlenden) Javascript. Können Sie ein Beispiel finden, dass hier, zusammen mit einigen der anderen Vorschläge, wie man die Besser Formen, inspiriert von Andrew Cole.

InformationsquelleAutor JoostS

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.