Formulare zum Testen
Text-Input
Input innerhalb vom Label-Element
Das <label> Element wird vorgelesen, wenn das Formularfeld angesteuert wird. Durch die Verknüpfung von <input> und <label> wird das Formularfeld fokussiert, selbst wenn man den Text neben dem Formularfeld anklickt oder antippt. Das ist hilfreich für Personen, denen es schwer fällt kleine Schaltflächen zu klicken.
<label>
Input innerhalb vom label (implizit):
<input type="text" style="width: 200px;">
</label>
For/ID
Das for-Attribut des <label>-Elements und das id-Attribut des <input>-Elements müssen den gleichen Wert besitzen um die beiden Elemente miteinander zu verknüpfen.
<label for="inputID">
Input außerhalb vom label (explizit):
</label>
<input type="text" id="inputID" style="width: 200px;">
Text-Kasten
<label for="adresse">
Ihre Adresse:
</label>
<textarea id="adresse" style="width: 300px; height: 100px;"> </textarea>
Checkboxen
Je nach Screenreader kann des <legend>-Element bei jedem Kontrollkästchen vorgelesen werden. Halten Sie dieses Element kurz und präzise. Das name-Attribut des <input>-Elements kann benutzt werden um mit JavaScript auf den Eingabewert zuzugreifen.
<fieldset>
<legend>
Was möchten Sie auf Ihrer Pizza:
</legend>
<input id="schinken" type="checkbox" name="pizzabelag" value="schinken">
<label for="schinken">
Schinken
</label>
<br>
<input id="salami" type="checkbox" name="pizzabelag" value="salami">
<label for="salami">
Salami
</label>
<br>
<input id="pilze" type="checkbox" name="pizzabelag" value="pilze">
<label for="pilze">
Pilze
</label>
<br>
<input id="oliven" type="checkbox" name="pizzabelag" value="oliven">
<label for="oliven">
Oliven
</label>
</fieldset>
Radio-Buttons
<input>-Elemente mit dem type-Attribut "radio" sind Buttons, von denen nur einer ausgewählt werden kann. Die Buttons sind über das name-Attribut miteinander verknüpft.
<fieldset>
<legend>Wählen Sie eine Zahlungsmethode:</legend>
<input id="paypal" type="radio" name="zahlungsmethode" value="paypal">
<label for="paypal">PayPal</label>
<br>
<input id="kreditkarte" type="radio" name="zahlungsmethode" value="kreditkarte">
<label for="kreditkarte">Kreditkarte</label>
<br>
<input id="lastschrift" type="radio" name="zahlungsmethode" value="lastschrift">
<label for="lastschrift">SEPA-Lastschrift</label>
</fieldset>
Drop-down Menü
<label for="lieblingstag">Was ist Ihre Lieblingstag?</label>
<select id="lieblingstag" name="select">
<option value="1">Montag</option>
<option value="2">Dienstag</option>
<option value="3">Mittwoch</option>
<option value="4">Donnerstag</option>
<option value="5">Freitag</option>
<option value="6">Samstag</option>
<option value="7">Sonntag</option>
</select>
Pflichtfelder
Mit dem required-Attribut kann ein <input>-Element als Pflichtfeld ausgezeichnet werden. Diese Information wir von einem Screenreader vorgelesen. Für sehende Nutzer wird das Pflichtfeld mit einem "*" markiert.
<form>
<label for="name">Name*:</label>
<input id="name" type="text" style="width: 200px;" required="">
<button>Absenden</button>
</form>
