Zum Inhalt springen

input

  • Redaktion 
  • Zuletzt aktualisiert am

input

Definiert ein interaktives Steuerelement innerhalb eines Webformulars.

Beispiel:

<input type="text" name="first_name" placeholder="e.g. Alex">

type

Legt den Typ der Formulareingabe fest.

Required.

"text"

Einfache einzeilige Texteingabe, die jede Art von Zeichen akzeptiert

"email"

Wie eine Texteingabe, aber der Browser wird versuchen, nur gültige E-Mail-Adressen zuzulassen.

Auf mobilen Geräten wird die E-Mail-Tastatur angezeigt.

"number"

Wie eine Texteingabe, aber der Browser wird versuchen, nur gültige Zahlen zuzulassen.

Auf mobilen Geräten wird die Zahlentastatur angezeigt.

"checkbox"

Ein Umschalt-Kontrollkästchen, das nur einen von zwei Zuständen annehmen kann: markiert oder nicht markiert. Der Wert wird vom Formular nur übermittelt, wenn das Kontrollkästchen markiert ist.

Sie können ein Kontrollkästchen in ein Etikett einbetten, um den Klickbereich zu vergrößern.

<label>
  <input type="checkbox">
  I accept the terms and conditions
</label>

Beachten Sie, wie das Anklicken des Textes das Kontrollkästchen umschaltet.

"radio"

Muss in Kombination mit anderen Optionsfeldern verwendet werden, so dass sie sich gegenseitig ausschließen.

Sie verknüpfen Optionsfelder durch einen ähnlichen name-Wert:

<label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label>

Beachten Sie, dass ein Klick auf das eine das andere abwählt.

"submit"

Senden-Schaltfläche, die ausgelöst wird, wenn Sie darauf klicken oder die Eingabetaste drücken.

name

Definiert den eindeutigen Bezeichner für diese Eingabe innerhalb des Formulars. Sie ermöglicht es dem Server, auf den Wert jeder Eingabe zuzugreifen, wenn diese übermittelt wird.

Required.

"first_name"

Der Wert name muss im Kontext eines <form>-Containers eindeutig sein.

Er darf nur alphanumerische Zeichen a-z A-Z 0-9 und einige Sonderzeichen wie - _ enthalten… aber keine Leerzeichen.

placeholder

Definiert einen nicht auswählbaren Platzhaltertext, der nur erscheint, wenn die Eingabe leer ist.

"e.g. [email protected]"

Sie können einen Hinweis auf das erwartete Format für die Eingabe geben.

Es empfiehlt sich, eine Beschriftung zu verwenden, die die Eingabe beschreibt, und den Platzhalter als Beispiel zu verwenden:

<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. [email protected]">
</form>

Beachten Sie, dass der Platzhalter beim Fokussieren verschwindet, weshalb Sie eine separate Beschriftung benötigen.

required

Sagt dem Browser, dass diese Eingabe erforderlich ist. Wenn Sie es leer lassen, wird eine Warnung angezeigt.

No value required.

Sie müssen lediglich das Attribut required ohne Wert hinzufügen:

<form>
  <input type="text" required>
</form>

Der Browser sollte eine Warnung anzeigen, wenn Sie versuchen, das Formular mit einer leeren Texteingabe abzuschicken.

disabled

Deaktiviert die Eingabe.

No value required.