Zum Hauptinhalt springen

Input Tel

Synonyme:
Ähnliche Komponenten: Input E-Mail, Input Password, Input Text

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Unterstützt Nutzende bei der Eingabe einer Telefonnummer.

Beispiele​

Default Tel​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="tel">Telefonnummer</label>
<input class="kern-form-input__input" id="tel" name="tel" type="tel">
</div>

Readonly Tel​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="tel3">Telefonnummer</label>
<input class="kern-form-input__input" id="tel3" name="tel3" type="tel" readonly>
</div>

Disabled Tel​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="tel4">Telefonnummer</label>
<input class="kern-form-input__input" id="tel4" name="tel4" type="tel" disabled>
</div>

Hint Error Tel​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="tel6">Telefonnummer</label>
<div class="kern-form-input__hint" id="tel-hint2">Hint Telefonnummer</div>
<input class="kern-form-input__input kern-form-input__input--error" id="tel6" name="tel6" type="tel" aria-describedby="tel-hint2 date-error">
<p class="kern-error" id="tel-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-text">Die Telefonnummer darf nicht leer sein</span>
</p>
</div>

Beschreibung​

Hinweis

Für Input Tel gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z.B. Zustände (states) oder Dos and Don’ts.

Input Tel ermöglicht die Eingabe eines Datums im numerischen Format und unterstützt spezielle Funktionen und Eigenschaften, die die Eingabe und Verarbeitung von Datumsinformationen erleichtern. Das Feld nutzt input="tel", wodurch Nutzende eine Zifferntastatur für die Eingabe erhalten. Dies verbessert die Benutzerfreundlichkeit, insbesondere auf mobilen Geräten, und reduziert die Wahrscheinlichkeit von Eingabefehlern. Es kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Verwendungsregeln​

Input Date wird in Formularen zur Eingabe einer Telefonnummer genutzt.

Beispiele:

  • Angabe der Festnetznummer

Dos und Don’ts​

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.
Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis