Grundlegende native Formularelemente

Text-<input>-Felder sind die grundlegendsten Formular-Widgets. Sie sind eine sehr bequeme Möglichkeit, dem Benutzer die Eingabe jeglicher Art von 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 dem Rest der Formulardaten gesendet) oder disabled (der Eingabewert kann nicht geändert werden und wird nie mit dem Rest der Formulardaten gesendet).
• Sie können einen placeholder haben; dies ist der Text, der im Text-Eingabefeld erscheint und zur kurzen Beschreibung des Zwecks des Feldes verwendet werden sollte.
• Sie können in ihrer size (der physikalischen Größe des Feldes) und der maxlength (der maximalen Anzahl von Zeichen, die im Feld eingegeben werden können) eingeschränkt werden.
• Sie können von der Rechtschreibprüfung profitieren (unter Verwendung des spellcheck-Attributs).

Ein einzeiliges Textfeld wird mit einem <input>-Element erstellt, dessen type-Attributwert 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 Farbwähler unterstützt).

Hier ist ein grundlegendes 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 Screenshot unten zeigt ein Texteingabefeld in den Zuständen "Standard", "Fokussiert" und "Deaktiviert". Die meisten Browser zeigen den fokussierten Zustand mit einem Fokusring um die Steuerung und den deaktivierten Zustand mit grauem Text oder einer verblassten/halbtransparenten Steuerung an.

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

Passwortfeld

Eines 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 Eingabezeichen als Punkt angezeigt wird.

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

Bedenken Sie, dass dies nur eine Benutzeroberflächenfunktion ist; es sei denn, Sie übermitteln Ihr Formular auf sichere Weise, wird es 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 übermittelt haben, stehlen. Der beste Weg, um Benutzer dagegen zu schützen, besteht darin, alle Seiten, die Formulare enthalten, über eine sichere Verbindung zu hosten (d.h. sie befinden sich an einer https://-Adresse), damit die Daten vor dem Senden verschlüsselt werden.

Browser erkennen die Sicherheitsimplikationen beim Senden von Formulardaten über eine unsichere Verbindung und verfügen über Warnungen, um Benutzer von der Verwendung unsicherer Formulare abzuhalten. Weitere Informationen zu dem, was Firefox implementiert, finden Sie unter Unsichere Passwörter.

Ein weiteres ursprüngliches Textelement ist der Eingabetyp hidden. Dieser wird verwendet, um eine Formulareingabe zu erstellen, die für den Benutzer unsichtbar ist, aber dennoch zusammen mit den restlichen Formulardaten an den Server gesendet wird, sobald das Formular übermittelt wird – zum Beispiel können Sie einen Zeitstempel an den Server senden, der angibt, wann eine Bestellung aufgegeben wurde. Da es verborgen ist, kann der Benutzer den Wert nicht sehen und auch nicht absichtlich bearbeiten, es wird nie den Fokus erhalten und ein Bildschirmleser 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 zu setzen. Der Wert kann dynamisch über JavaScript gesetzt werden. Der Eingabetyp hidden sollte kein zugehöriges Beschriftungselement haben.

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

Ankreuzbare Elemente sind Steuerungen, deren Zustand Sie durch Klicken auf sie oder ihre zugehörigen Etiketten ändern können. Es gibt zwei Arten von anklickbaren Elementen: das Kontrollkästchen und das Optionsfeld. Beide verwenden das Attribut checked, um anzugeben, ob das Widget standardmäßig aktiviert ist oder nicht.

Es ist erwähnenswert, dass diese Widgets nicht genau wie andere Formular-Widgets funktionieren. Bei den meisten Formular-Widgets werden, wenn das Formular übermittelt wird, alle Widgets mit einem name-Attribut gesendet, selbst wenn kein Wert ausgefüllt wurde. Im Fall 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 und Barrierefreiheit wird empfohlen, jede Liste verwandter Elemente in einem <fieldset> zu umgeben, mit einem <legend>, das eine allgemeine Beschreibung der Liste liefert. Jedes einzelne Paar von <label>/<input>-Elementen sollte in einem eigenen Listenelement (oder ähnlichem) enthalten sein. Das zugehörige <label> befindet sich in der Regel direkt vor oder nach dem Optionsfeld oder dem Kontrollkästchen, mit den Anweisungen für die Gruppe von Optionsfeldern oder Kontrollkästchen, die in der Regel den Inhalt des <legend> bilden. Siehe die oben verlinkten Beispiele für strukturelle Beispiele.

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 das gleiche name-Attribut verwenden. Das Einschließen des Attributs checked sorgt dafür, dass das Kontrollkästchen automatisch aktiviert ist, wenn die Seite geladen wird. Durch Klicken auf das Kontrollkästchen oder sein zugehöriges Etikett wird das Kontrollkästchen ein- und ausgeschaltet.

<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 Zuständen "Standard", "Fokussiert" und "Deaktiviert". Kontrollkästchen erscheinen in den Zuständen "Standard" und "Deaktiviert" aktiviert, während im Zustand "Fokussiert" das Kontrollkästchen deaktiviert ist, mit einem Fokusring darum.

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

Ein Radiobutton 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 Radiobuttons können miteinander verknüpft werden. Wenn sie denselben Wert für ihr name-Attribut teilen, werden sie als Teil derselben Gruppe von Schaltflächen betrachtet. Nur eine Schaltfläche in einer gegebenen Gruppe darf gleichzeitig aktiviert sein; das bedeutet, dass, wenn eine von ihnen aktiviert wird, alle anderen automatisch deaktiviert werden. Wenn das Formular gesendet wird, wird nur der Wert des aktivierten Radiobuttons gesendet. Wenn keiner von ihnen aktiviert ist, wird die gesamte Gruppe von Radiobuttons als in einem unbekannten Zustand betrachtet und es wird kein Wert mit dem Formular gesendet. Sobald einer der Radiobuttons in einer gleichnamigen Gruppe von Schaltflächen aktiviert ist, ist es dem Benutzer nicht möglich, alle Schaltflächen ohne Zurücksetzen des Formulars zu deaktivieren.

<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 Radiobuttons im aktivierten Zustand sowie einen fokussierten Radiobutton im deaktivierten Zustand.

Der Radiobutton ist trotz seines Namens keine tatsächliche Schaltfläche; lassen Sie uns also 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 type-Wert) zu einer Sendeschaltflä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 gibt es auch das <button>-Element selbst. Dies kann ein type-Attribut mit dem Wert submit, reset oder button haben, um das Verhalten der drei <input>-Typen zu imitieren, die oben erwähnt wurden. Der Hauptunterschied zwischen den beiden ist, dass tatsächlich <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 <input>-Schaltflächentyp 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, unabhängig davon, ob Sie ein <button>-Element oder ein <input>-Element verwenden. Wie Sie aus den Beispielen sehen können, lassen <button>-Elemente die Verwendung von HTML in ihrem Inhalt zu, der zwischen den öffnenden und schließenden <button>-Tags eingefügt wird. <input>-Elemente hingegen sind void-Elemente; ihr angezeigter Inhalt wird im value-Attribut eingefügt und akzeptiert daher nur Klartext als Inhalt.

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

Die Bildbutton-Steuerung wird genau wie ein <img>-Element gerendert, außer dass sie beim Klicken des Benutzers wie eine Schaltfläche zum Senden des Formulars funktioniert.

Ein Bildbutton wird mit einem <input>-Element erstellt, dessen type-Attribut auf den Wert image gesetzt ist. Dieses Element unterstützt genau denselben Satz von Attributen wie das <img>-Element sowie alle von anderen Formular-Buttons unterstützten Attribute.

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

Wenn der Bildbutton verwendet wird, um das Formular zu senden, übermittelt diese Steuerung nicht ihren Wert – stattdessen werden die X- und Y-Koordinaten des Klicks auf das Bild gesendet (die Koordinaten sind relativ zum Bild, was 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-Attributes, gefolgt von der Zeichenkette ".x".
• Der Y-Wert-Schlüssel ist der Wert des name-Attributes, gefolgt von der Zeichenkette ".y".

Wenn Sie also zum Beispiel auf das Bild bei der Koordinate (123, 456) klicken und es über die get-Methode gesendet wird, 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 "Hotmap" zu erstellen. Wie diese Werte gesendet und abgerufen werden, wird im Artikel Senden von Formulardaten ausführlich beschrieben.

Es gibt einen letzten <input>-Typ, der uns im frühen HTML zur Verfügung stand: den Datei-Eingabetyp. Formulare sind in der Lage, Dateien an einen Server zu senden (diese spezifische Aktion wird ebenfalls im Artikel Senden von Formulardaten ausführlich beschrieben). Das Dateiauswahl-Widget kann verwendet werden, um eine oder mehrere Dateien zum Senden auszuwählen.

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 mithilfe des accept-Attributes eingeschränkt werden. Wenn Sie außerdem dem Benutzer ermöglichen 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 Dateiauswahl-Widget erstellt, das nach Bilddateien 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 das Dateiauswahl-Widget Fotos, Videos und Audio direkt mit der Kamera und dem Mikrofon des Geräts aufnehmen, indem Capture-Informationen 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 Dateiauswahl-Widget im Standard-, Fokus- und deaktivierten Zustand, 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 einen Satz von Attributen, die allen Formularelementen gemeinsam sind. Sie haben einige dieser Attribute bereits kennengelernt, aber unten ist eine Liste dieser gemeinsamen Attribute zu Ihrer Referenz:

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: Grundlegende Steuerelemente.

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 werden wir uns die moderneren Werte des type-Attributes anschauen.

• Zurück
• Übersicht: Webformulare
• Weiter