Basis-Native Formularelemente

Text-<input>-Felder sind die grundlegendsten Formular-Widgets. Sie sind eine sehr bequeme Möglichkeit, dem Benutzer die Eingabe beliebiger Daten zu ermöglichen, und wir haben bereits einige einfache Beispiele gesehen.

Alle grundlegenden Textsteuerungen teilen einige gemeinsame Verhaltensweisen:

• Sie können als readonly markiert werden (der Benutzer kann den Eingabewert nicht ändern, aber er wird dennoch mit den restlichen Formulardaten gesendet) oder als disabled (der Eingabewert kann nicht geändert werden und wird nie mit den restlichen Formulardaten gesendet).
• Sie können einen placeholder haben; dies ist der Text, der innerhalb des Text-Eingabefeldes erscheint und verwendet werden sollte, um den Zweck des Feldes kurz zu beschreiben.
• Sie können in ihrer size (der physikalischen Größe des Feldes) und der maxlength (die maximale Anzahl von Zeichen, die in das Feld eingegeben werden können) eingeschränkt werden.
• Sie können von der Rechtschreibprüfung (mittels des spellcheck-Attributs) profitieren.

Ein einzeiliges Textfeld wird mit einem <input>-Element erstellt, dessen type-Attributswert auf text gesetzt ist, oder indem das type-Attribut ganz weggelassen wird (text ist der Standardwert). Der Wert text für dieses Attribut ist auch der Rückfallwert, wenn der von Ihnen angegebene Wert für das type-Attribut dem Browser unbekannt ist (zum Beispiel, wenn Sie type="color" angeben und der Browser keine nativen Color-Picker unterstützt).

Hier ist ein einfaches Beispiel für ein einzeiliges Textfeld:

<input type="text" id="comment" name="comment" value="I'm a text field" />

Einzeilige Textfelder haben nur eine wahre Einschränkung: Wenn Sie Text mit Zeilenumbrüchen eingeben, entfernen diese Felder die Zeilenumbrüche, bevor die Daten an den Server gesendet werden.

Der Screenshot unten zeigt ein Texteingabefeld in den Standard-, Fokussierungs- und Deaktivierungszuständen. Die meisten Browser zeigen den Fokussierungszustand durch einen Fokusring um die Steuerung und den Deaktivierungszustand mit grauem Text oder einer verblassten/semi-opaken Steuerung an.

Die in diesem Dokument verwendeten Screenshots wurden im Chrome-Browser auf macOS aufgenommen. Es kann geringfügige Variationen in diesen Feldern/Schaltflächen über verschiedene Browser hinweg geben, aber die grundlegende Hervorhebungstechnik bleibt ähnlich.

Passwortfeld

Einer der ursprünglichen Eingabetypen war der password-Textfeldtyp:

<input type="password" id="pwd" name="pwd" />

Der folgende Screenshot zeigt ein Passwort-Eingabefeld, in dem jedes eingegebene Zeichen als Punkt angezeigt wird.

Der password-Wert fügt den eingegebenen Texten keine besonderen Beschränkungen hinzu, sondern verbirgt den in das Feld eingegebenen Wert (z. B. mit Punkten oder Sternchen), sodass er nicht leicht von anderen gelesen werden kann.

Beachten Sie, dass dies nur eine Benutzeroberflächenfunktion ist; sofern Sie Ihr Formular nicht sicher übermitteln, wird es im Klartext gesendet, was für die Sicherheit schlecht ist — eine böswillige Partei könnte Ihre Daten abfangen und Passwörter, Kreditkartendetails oder was auch immer Sie übermittelt haben, stehlen. Der beste Weg, Benutzer davor zu schützen, besteht darin, beliebige Seiten, die Formulare enthalten, über eine sichere Verbindung bereitzustellen (d. h. unter einer https://-Adresse), sodass die Daten verschlüsselt werden, bevor sie gesendet werden.

Browser erkennen die Sicherheitsbedenken beim Senden von Formulardaten über eine unsichere Verbindung an und haben Warnungen, um Benutzer davon abzuhalten, unsichere Formulare zu verwenden. Weitere Informationen zu dem, was Firefox implementiert, finden Sie unter Unsichere Passwörter.

Ein weiteres ursprüngliches Textelement ist der hidden-Eingabetyp. Dieser wird verwendet, um eine Formularkontrolle zu erstellen, die für den Benutzer unsichtbar ist, aber dennoch zusammen mit den restlichen Formulardaten an den Server gesendet wird, sobald das Formular abgeschickt wird - zum Beispiel möchten Sie vielleicht einen Zeitstempel an den Server senden, der angibt, wann eine Bestellung aufgegeben wurde. Da es verborgen ist, kann der Benutzer den Wert nicht sehen oder absichtlich ändern, es wird niemals den Fokus erhalten und ein Screenreader wird es auch nicht bemerken.

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

Wenn Sie ein solches Element erstellen, ist es erforderlich, seine name- und value-Attribute festzulegen. Der Wert kann dynamisch über JavaScript gesetzt werden. Der hidden-Eingabetyp sollte kein zugehöriges Label haben.

Andere Text-Eingabetypen wie search, url und tel werden im nächsten Tutorial behandelt, HTML5-Eingabetypen.

Ankreuzbare Elemente sind Steuerelemente, deren Zustand Sie ändern können, indem Sie auf sie oder ihre zugehörigen Labels klicken. Es gibt zwei Arten von ankreuzbaren Elementen: das Kontrollkästchen und das Optionsfeld. Beide verwenden das checked-Attribut, um anzuzeigen, ob das Widget standardmäßig ausgewählt ist oder nicht.

Es ist erwähnenswert, dass sich diese Widgets nicht genau wie andere Formularelemente verhalten. Bei den meisten Formularelementen werden alle Widgets, die ein name-Attribut haben, gesendet, nachdem das Formular abgeschickt wurde, selbst wenn kein Wert ausgefüllt wurde. Bei den ankreuzbaren Elementen werden deren Werte nur gesendet, wenn sie angekreuzt sind. Wenn sie nicht angekreuzt sind, wird nichts gesendet, nicht einmal deren Name. Sind sie angekreuzt, haben aber keinen Wert, wird der Name mit einem Wert von on gesendet.

Für maximale Benutzerfreundlichkeit/Barrierefreiheit wird empfohlen, jede Liste verwandter Elemente in ein <fieldset> zu umschließen, mit einem <legend>, das eine allgemeine Beschreibung der Liste bietet. Jedes Paar von <label>/<input>-Elementen sollte in seinem eigenen Listenelement (oder einem ähnlichen) enthalten sein. Das zugehörige <label> wird in der Regel direkt vor oder nach dem Optionsfeld oder Kontrollkästchen platziert, wobei die Anweisungen für die Gruppe der Optionsfelder oder Kontrollkästchen in der Regel der Inhalt des <legend> sind. Beispiele für die Strukturierung finden Sie in den oben verlinkten Beispielen.

Ein Kontrollkästchen wird mit dem <input>-Element erstellt, dessen type-Attribut auf den Wert checkbox gesetzt ist.

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />

Verwandte Kontrollkästchen-Elemente sollten dasselbe name-Attribut verwenden. Das Einschließen des checked-Attributs bewirkt, dass das Kontrollkästchen automatisch aktiviert ist, wenn die Seite geladen wird. Ein Klick auf das Kontrollkästchen oder sein zugehöriges Label schaltet das Kontrollkästchen ein und aus.

<fieldset>
  <legend>Choose all the vegetables you like to eat</legend>
  <ul>
    <li>
      <label for="carrots">Carrots</label>
      <input
        type="checkbox"
        id="carrots"
        name="vegetable"
        value="carrots"
        checked />
    </li>
    <li>
      <label for="peas">Peas</label>
      <input type="checkbox" id="peas" name="vegetable" value="peas" />
    </li>
    <li>
      <label for="cabbage">Cabbage</label>
      <input type="checkbox" id="cabbage" name="vegetable" value="cabbage" />
    </li>
  </ul>
</fieldset>

Der folgende Screenshot zeigt Kontrollkästchen in den Standard-, Fokus- und Deaktivierungszuständen. Kontrollkästchen im Standard- und Deaktivierungszustand erscheinen angekreuzt, während im Fokuszustand das Kontrollkästchen nicht angekreuzt ist, aber einen Fokusring um sich hat.

Aufgrund der Ein-Aus-Natur von Kontrollkästchen gilt das Kontrollkästchen als Umschalttaste, wobei viele Entwickler und Designer die Standard-Kontrollkästchen-Stilgebung erweitern, um Schaltflächen zu erstellen, die wie Kippschalter aussehen. Sie können hier ein Beispiel in Aktion sehen (siehe auch den Quellcode).

Ein Optionsfeld wird mit Hilfe des <input>-Elements erstellt, dessen type-Attribut auf den Wert radio gesetzt ist:

<input type="radio" id="soup" name="meal" value="soup" checked />

Mehrere Optionsfelder können miteinander verbunden werden. Wenn sie denselben Wert für ihr name-Attribut haben, wird angenommen, dass sie sich in derselben Gruppe von Schaltflächen befinden. In einer bestimmten Gruppe kann jeweils nur eine Schaltfläche aktiviert sein; dies bedeutet, dass, wenn eine von ihnen aktiviert wird, alle anderen automatisch deaktiviert werden. Wenn das Formular gesendet wird, wird nur der Wert der aktivierten Optionsfeld-Schaltfläche gesendet. Wenn keines von ihnen aktiviert ist, wird der gesamte Pool von Optionsfeld-Schaltflächen als unbekannter Zustand angesehen, und es wird kein Wert mit dem Formular gesendet. Sobald eine der in einer gleichnamigen Gruppe befindlichen Optionsfeld-Schaltflächen aktiviert ist, ist es dem Benutzer nicht möglich, alle Schaltflächen abzuwählen, ohne das Formular zurückzusetzen.

<fieldset>
  <legend>What is your favorite meal?</legend>
  <ul>
    <li>
      <label for="soup">Soup</label>
      <input type="radio" id="soup" name="meal" value="soup" checked />
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry" />
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza" />
    </li>
  </ul>
</fieldset>

Der folgende Screenshot zeigt standardmäßig und deaktivierte Optionsfeld-Schaltflächen im aktivierten Zustand sowie eine im nicht aktivierten Zustand fokussierte Optionsfeld-Schaltfläche.

Das Optionsfeld ist trotz seines Namens keine Schaltfläche; lassen Sie uns nun die eigentlichen Schaltflächen betrachten! Es gibt drei Eingabetypen, die Schaltflächen erzeugen:

submit

Sendet die Formulardaten an den Server. Bei <button>-Elementen führt das Weglassen des type-Attributs (oder eines ungültigen Werts von type) zu einer Senden-Schaltfläche.

reset

Setzt alle Formular-Widgets auf ihre Standardwerte zurück.

button

Schaltflächen, die keine automatische Wirkung haben, aber mit JavaScript-Code angepasst werden können.

Dann haben wir noch das <button>-Element selbst. Es kann ein type-Attribut mit dem Wert submit, reset oder button annehmen, um das Verhalten der drei genannten <input>-Typen nachzuahmen. Der Hauptunterschied zwischen den beiden besteht darin, dass echte <button>-Elemente viel einfacher zu gestalten sind.

<input type="submit" value="Submit this form" />
<input type="reset" value="Reset this form" />
<input type="button" value="Do Nothing without JavaScript" />

<button type="submit">Submit this form</button>
<button type="reset">Reset this form</button>
<button type="button">Do Nothing without JavaScript</button>

<div class="button-demo">
  <p>Using &lt;input></p>
  <p>
    <input type="submit" value="Submit this form" />
    <input type="reset" value="Reset this form" />
    <input type="button" value="Do Nothing without JavaScript" />
  </p>
  <p>Using &lt;button></p>
  <p>
    <button type="submit">Submit this form</button>
    <button type="reset">Reset this form</button>
    <button type="button">Do Nothing without JavaScript</button>
  </p>
</div>

button,
input {
  display: none;
}
.button-demo button,
.button-demo input {
  all: revert;
}

Nachfolgend finden Sie Beispiele für jeden <input>-Schalttyp und den entsprechenden <button>-Typ.

<button type="button">This is an <strong>anonymous button</strong></button>

<input type="button" value="This is an anonymous button" />

Schaltflächen verhalten sich immer gleich, unabhängig davon, ob Sie ein <button>-Element oder ein <input>-Element verwenden. Wie Sie jedoch aus den Beispielen ersehen können, ermöglichen es Ihnen <button>-Elemente, HTML in ihrem Inhalt zu verwenden, das zwischen den öffnenden und schließenden <button>-Tags eingefügt wird. <input>-Elemente hingegen sind void elements; ihr angezeigter Inhalt wird innerhalb des value-Attributs eingefügt und akzeptiert daher nur einfachen Text als Inhalt.

Der folgende Screenshot zeigt eine Schaltfläche im Standard-, Fokus- und Deaktivierungszustand. Im Fokuszustand befindet sich ein Fokusring um die Schaltfläche, und im Deaktivierungszustand ist die Schaltfläche abgeblendet.

Die Bildschaltfläche-Steuerung wird genau wie ein <img>-Element wiedergegeben, außer dass sie, wenn der Benutzer darauf klickt, wie eine Senden-Schaltfläche funktioniert.

Eine Bildschaltfläche wird mit einem <input>-Element erstellt, dessen type-Attribut auf den Wert image gesetzt ist. Dieses Element unterstützt genau dieselbe Reihe von Attributen wie das <img>-Element, plus alle Attribute, die von anderen Formularschaltflächen unterstützt werden.

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

Wenn die Bildschaltfläche zum Absenden des Formulars verwendet wird, übermittelt diese Steuerung nicht ihren Wert - stattdessen werden die X- und Y-Koordinaten des Klicks auf das Bild übermittelt (die Koordinaten beziehen sich auf das Bild, d. h. die obere linke Ecke des Bildes repräsentiert die Koordinate (0, 0)). Die Koordinaten werden als zwei Schlüssel-/Wert-Paare gesendet:

• Der X-Wert-Schlüssel ist der Wert des name-Attributs, gefolgt von der Zeichenfolge ".x".
• Der Y-Wert-Schlüssel ist der Wert des name-Attributs, gefolgt von der Zeichenfolge ".y".

Wenn Sie also beispielsweise auf das Bild bei der Koordinate (123, 456) klicken und es über die get-Methode senden, sehen Sie die Werte wie folgt an die URL angehängt:

http://foo.com?pos.x=123&pos.y=456

Dies ist eine sehr bequeme Möglichkeit, eine "Hot-Map" zu erstellen. Wie diese Werte gesendet und abgerufen werden, wird im Artikel Formulardaten senden erläutert.

Es gibt einen weiteren <input>-Typ, der uns in den frühen HTML-Tagen erreichte: den Dateieingabetyp. Formulare können Dateien an einen Server senden (diese spezifische Aktion wird ebenfalls im Artikel Formulardaten senden erläutert). Das Datei-Auswahl-Widget kann verwendet werden, um eine oder mehrere Dateien zum Senden auszuwählen.

Um ein Datei-Auswahl-Widget zu erstellen, verwenden Sie das <input>-Element, dessen type-Attribut auf file gesetzt ist. Die Typen von Dateien, die akzeptiert werden, können mit dem accept-Attribut eingeschränkt werden. Außerdem, wenn Sie dem Benutzer erlauben möchten, mehr als eine Datei auszuwählen, können Sie dies tun, indem Sie das multiple-Attribut hinzufügen.

In diesem Beispiel wird ein Datei-Auswahl-Widget erstellt, das nach Grafikbilddateien fragt. Der Benutzer darf in diesem Fall mehrere Dateien auswählen.

<input type="file" name="file" id="file" accept="image/*" multiple />

Auf einigen mobilen Geräten kann der Dateiauswahler auf Fotos, Videos und Audiodateien zugreifen, die direkt mit der Kamera und dem Mikrofon des Geräts aufgenommen wurden, indem der Aufnahmeinformationen zum accept-Attribut wie folgt hinzugefügt werden:

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

Der folgende Screenshot zeigt das Datei-Auswahl-Widget im Standard-, Fokus- und Deaktivierungszustand, wenn keine Datei ausgewählt ist.

Viele der Elemente, die zur Definition von Formularelementen verwendet werden, haben einige ihrer eigenen spezifischen Attribute. Es gibt jedoch eine Reihe von Attributen, die allen Formularelementen gemeinsam sind. Einige dieser Attribute sind Ihnen bereits begegnet, aber unten ist eine Liste dieser üblichen Attribute zu Ihrer Information:

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Basissteuerungen.

Dieser Artikel hat die älteren Eingabetypen behandelt — das ursprüngliche Set, das in den frühen Tagen von HTML eingeführt wurde und in allen Browsern gut unterstützt wird. Im nächsten Abschnitt werfen wir einen Blick auf die moderneren Werte des type-Attributs.

• Zurück
• Übersicht: Webformular-Bausteine
• Weiter

• Anleitung zum Erstellen benutzerdefinierter Formularelemente
• Formulare mit JavaScript senden
• Eigenschaftskompatibilitätstabelle für Formularelemente