Formulare in HTML

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>

Was möchten Sie auf Ihrer Pizza:


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>

Wählen Sie eine Zahlungsmethode:

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>

Share by: