Grundlegende native Form-Steuerelemente

Text-<input>-Felder sind die grundlegendsten Formular-Widgets. Sie sind eine sehr bequeme Möglichkeit, den Benutzer beliebige Daten eingeben zu lassen, und wir haben bereits einige einfache Beispiele gesehen.

Alle grundlegenden Texteingabesteuerungen haben einige gemeinsame Verhaltensweisen:

• Sie können als readonly gekennzeichnet werden (der Benutzer kann den Eingabewert nicht ändern, aber er wird dennoch mit den restlichen Formulardaten gesendet) oder 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 Texteingabefelds erscheint und dazu verwendet werden sollte, den Zweck des Feldes kurz zu beschreiben.
• Sie können in size (die physische Größe des Feldes) und maxlength (die maximale Anzahl der Zeichen, die in das Feld eingegeben werden können) eingeschränkt werden.
• Sie können von der Rechtschreibprüfung profitieren (mithilfe des spellcheck Attributs).

Ein einzeiliges Textfeld wird mit einem <input>-Element erstellt, dessen type-Attribut auf text gesetzt ist oder indem das type-Attribut weggelassen wird (der Standardwert ist text). Der Wert text für dieses Attribut ist auch der Rückfallwert, wenn der Wert, den Sie für das type-Attribut angeben, dem Browser unbekannt ist (zum Beispiel, wenn Sie type="color" angeben und der Browser keine nativen Farbwähler 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 echte Einschränkung: Wenn Sie Text mit Zeilenumbrüchen eingeben, entfernt der Browser diese Zeilenumbrüche, bevor die Daten an den Server gesendet werden.

Der unten stehende Screenshot zeigt eine Texteingabe in den Standard-, Fokus- und deaktivierten Zuständen. Die meisten Browser kennzeichnen den Fokuszustand durch einen Fokusring um das Steuerelement und den deaktivierten Zustand durch grauen Text oder ein verblasstes/halbtransparentes Steuerelement.

Die in diesem Dokument verwendeten Screenshots wurden im Chrome-Browser auf macOS aufgenommen. Es kann kleinere Variationen in diesen Feldern/Schaltflächen in verschiedenen Browsern geben, aber die grundlegende Hervorhebungstechnik bleibt ähnlich.

Passwortfeld

Einer der ursprünglichen Eingabetyppen war der password Textfeldtyp:

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

Der folgende Screenshot zeigt ein Passwort-Eingabefeld, bei dem jedes Eingabezeichen als Punkt dargestellt wird.

Der password-Wert fügt den eingegebenen Texten keine speziellen Einschränkungen hinzu, aber er verschleiert den eingegebenen Wert im Feld (z.B. mit Punkten oder Sternchen), sodass er nicht leicht von anderen gelesen werden kann.

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

Browser erkennen die Sicherheitsimplikationen des Sendens von Formulardaten über eine unsichere Verbindung und haben Warnungen, um Benutzer davon abzuhalten, unsichere Formulare zu verwenden. Weitere Informationen dazu, was Firefox implementiert, finden Sie unter Unsichere Passwörter.

Ein weiteres ursprüngliches Textsteuerelement ist der hidden Eingabetyp. Dieser wird verwendet, um ein Formularsteuerelement zu erstellen, das 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 versteckt ist, kann der Benutzer den Wert weder sehen noch absichtlich bearbeiten, es wird nie den Fokus erhalten und auch ein Screenreader wird es 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 zu setzen. Der Wert kann dynamisch über JavaScript gesetzt werden. Der hidden Eingabetyp sollte kein zugeordnetes 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 durch Klicken auf sie oder ihre zugehörigen Labels ändern können. Es gibt zwei Arten von ankreuzbaren Elementen: das Kontrollkästchen und das Optionsfeld. Beide verwenden das checked-Attribut, um anzugeben, ob das Widget standardmäßig aktiviert ist oder nicht.

Es ist erwähnenswert, dass sich diese Widgets nicht genau wie andere Form-Widgets verhalten. Für die meisten Formular-Widgets gilt, dass alle mit einem name-Attribut versehenen Widgets gesendet werden, auch wenn kein Wert ausgefüllt wurde. Im Falle von ankreuzbaren Elementen werden ihre Werte nur gesendet, wenn sie aktiviert sind. Wenn sie nicht aktiviert sind, wird nichts gesendet, nicht einmal ihr Name. Wenn sie aktiviert sind, aber keinen Wert haben, wird der Name mit einem Wert von on gesendet.

Für maximale Benutzerfreundlichkeit/Zugänglichkeit wird empfohlen, jede Liste verwandter Elemente in ein <fieldset> zu umschließen, mit einem <legend>, das eine allgemeine Beschreibung der Liste liefert. Jedes einzelne Paar von <label>/<input>-Elementen sollte in seinem eigenen Listenelement (oder einem ähnlichen) enthalten sein. Das zugehörige <label> wird in der Regel unmittelbar vor oder nach dem Radio-Button oder Kontrollkästchen platziert, wobei die Anweisungen für die Gruppe von Radio-Button oder Kontrollkästchen in der Regel der Inhalt des <legend> sind. Siehe die oben verlinkten Beispiele für Strukturbeispiele.

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ästchenelemente sollten dasselbe name-Attribut verwenden. Wenn das checked-Attribut enthalten ist, wird das Kontrollkästchen automatisch beim Laden der Seite aktiviert. 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 deaktivierten Zuständen. Kontrollkästchen in den Standard- und deaktivierten Zuständen erscheinen aktiviert, während im Fokuszustand das Kontrollkästchen deaktiviert ist, mit Fokusring drum herum.

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

Ein Optionsfeld wird mit dem <input>-Element 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 teilen, gelten sie als Gruppe von Schaltflächen. Nur eine Schaltfläche in einer bestimmten Gruppe kann gleichzeitig 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 des aktivierten Optionsfeldes gesendet. Wenn keins von ihnen aktiviert ist, wird der gesamte Pool von Optionsfeldern als in einem unbekannten Zustand betrachtet und es wird kein Wert mit dem Formular gesendet. Sobald eines der Optionsfelder in einer gleichnamigen Gruppe aktiviert ist, ist es dem Benutzer nicht mehr möglich, alle Schaltflächen zu deaktivieren, 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äßige und deaktivierte Optionsfelder im aktivierten Zustand sowie ein fokussiertes Optionsfeld im deaktivierten Zustand.

Der Radio-Button ist tatsächlich keine Schaltfläche, trotz seines Namens; lassen Sie uns zu den tatsächlichen Schaltflächen übergehen! 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 ein ungültiger Wert für type) zu einer Absenden-Schaltfläche.

reset

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

button

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

Dann haben wir auch das <button>-Element selbst. Dieses kann ein type-Attribut von Wert submit, reset oder button haben, um das Verhalten der drei oben genannten <input>-Typen nachzuahmen. Der Hauptunterschied zwischen den beiden ist, dass tatsächliche <button>-Elemente viel einfacher zu stylen 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;
}

Unten finden Sie Beispiele für jeden Schaltflächen-<input>-Typ sowie 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, ob Sie ein <button>-Element oder ein <input>-Element verwenden. Wie Sie aus den Beispielen sehen können, ermöglichen es jedoch <button>-Elemente, HTML in ihrem Inhalt zu verwenden, das zwischen den öffnenden und schließenden <button>-Tags eingefügt wird. <input>-Elemente sind hingegen leere Elemente; ihr angezeigter Inhalt wird im value-Attribut eingefügt und akzeptiert daher nur reinen Text als Inhalt.

Der folgende Screenshot zeigt eine Schaltfläche in den Standard-, Fokus- und deaktivierten Zuständen. Im Fokuszustand gibt es einen Fokusring um die Schaltfläche, und im deaktivierten Zustand ist die Schaltfläche ausgegraut.

Das Steuerungselement Bild-Schaltfläche wird genauso gerendert wie ein <img>-Element, außer dass es beim Anklicken wie eine Absende-Schaltfläche funktioniert.

Eine Bild-Schaltfläche wird mit einem <input>-Element erstellt, dessen type-Attribut auf den Wert image gesetzt ist. Dieses Element unterstützt genau dieselbe Menge an 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 Bild-Schaltfläche zum Senden des Formulars verwendet wird, sendet diese Steuerung nicht ihren Wert — stattdessen werden die X- und Y-Koordinaten des Klicks auf das Bild gesendet (die Koordinaten sind relativ zum Bild, das bedeutet, dass die obere linke Ecke des Bildes die Koordinate (0, 0) darstellt). Die Koordinaten werden als zwei Schlüssel-Wert-Paare gesendet:

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

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

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

Dies ist eine sehr praktische Möglichkeit, eine "Hot Map" zu erstellen. Wie diese Werte gesendet und abgerufen werden, wird im Artikel Senden von Formulardaten detailliert beschrieben.

Es gibt einen letzten <input>-Typ, der uns im frühen HTML überliefert wurde: den Datei-Eingabetyp. Formulare können Dateien an einen Server senden (diese spezielle Aktion wird ebenfalls im Artikel Senden von Formulardaten detailliert beschrieben). Das Dateiauswahl-Widget kann verwendet werden, um eine oder mehrere Dateien auszuwählen, die gesendet werden sollen.

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

In diesem Beispiel wird ein Dateiauswahl-Widget erstellt, das grafische Bilddateien verlangt. Dem Benutzer ist es gestattet, mehrere Dateien auszuwählen.

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

Auf einigen mobilen Geräten kann die Dateiauswahl auf Fotos, Videos und Audiozugreifen, das direkt von der Kamera und dem Mikrofon des Geräts aufgenommen wird, indem Capture-Informationen zum accept-Attribut hinzugefügt werden, wie folgt:

<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 Dateiauswahl-Widget in den Standard-, Fokus- und deaktivierten Zuständen, wenn keine Datei ausgewählt ist.

Viele der Elemente, die zur Definition von Formularsteuerelementen verwendet werden, haben einige ihrer eigenen spezifischen Attribute. Es gibt jedoch eine Reihe von Attributen, die allen Formularelementen gemeinsam sind. Sie haben einige davon bereits kennengelernt, aber unten finden Sie eine Liste dieser gemeinsamen Attribute zu Ihrer Referenz:

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? 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: Grundlegende Steuerelemente.

Dieser Artikel hat die älteren Eingabetyppen 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 werden wir uns die moderneren Werte des type-Attributs ansehen.

• Zurück
• Übersicht: Webformulare
• Weiter