Grundlegende native Formularsteuerelemente

Texteingabefelder

Textfelder mit <input> gehören zu den grundlegendsten Formular-Widgets. Sie ermöglichen die Eingabe unterschiedlichster Daten. Einige einfache Beispiele haben wir bereits gesehen.

Alle grundlegenden Textsteuerelemente haben einige gemeinsame Eigenschaften:

• Sie können als readonly gekennzeichnet werden (Benutzer können den Eingabewert nicht ändern, er wird aber mit den übrigen Formulardaten gesendet) oder als disabled (der Eingabewert kann nicht geändert werden und wird nie mit den übrigen Formulardaten gesendet).
• Sie können einen placeholder haben: Text, der im Eingabefeld erscheint und dessen Zweck kurz beschreiben soll.
• Sie können durch size (die sichtbare Größe des Feldes) und maxlength (die maximale Anzahl eingebbarer Zeichen) begrenzt werden.
• Für sie kann die Rechtschreibprüfung aktiviert werden (mit dem Attribut spellcheck).

Einzeilige Textfelder

Ein einzeiliges Textfeld wird mit einem <input>-Element erstellt, dessen Attribut type auf text gesetzt ist. Sie können das Attribut type auch ganz weglassen (text ist der Standardwert). Der Wert text ist außerdem der Fallback-Wert, wenn der Browser den angegebenen Wert für type nicht kennt (beispielsweise, 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" />

Es wird so dargestellt:

Für einzeilige Textfelder gibt es nur eine feste Einschränkung: Wenn Sie Text mit Zeilenumbrüchen eingeben, entfernt der Browser diese vor dem Senden der Daten an den Server.

Der folgende Screenshot zeigt ein Textfeld im Standardzustand, mit Fokus und im deaktivierten Zustand. Die meisten Browser kennzeichnen den Fokus durch eine Umrandung des Steuerelements und den deaktivierten Zustand durch grauen Text oder ein verblasstes, halbtransparentes Steuerelement.

Die Screenshots in diesem Dokument wurden mit Chrome unter macOS aufgenommen. Die Darstellung dieser Felder und Schaltflächen kann sich je nach Browser geringfügig unterscheiden; die grundlegende Hervorhebung ist jedoch ähnlich.

Passwortfeld

Einer der ursprünglichen Eingabetypen war das Textfeld vom Typ password:

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

Es wird ähnlich dargestellt wie ein einfaches einzeiliges Textfeld:

Versuchen Sie jedoch, etwas in das Feld einzugeben: Jedes eingegebene Zeichen wird als Punkt angezeigt.

Der Wert password schränkt den eingegebenen Text nicht zusätzlich ein. Er verdeckt aber den Wert im Feld, damit andere ihn nicht ohne Weiteres lesen können.

Beachten Sie, dass dies lediglich eine Funktion der Benutzeroberfläche ist: Wenn Sie das Formular nicht sicher übertragen, werden die Daten als Klartext gesendet. Das ist ein Sicherheitsrisiko – Angreifer könnten Ihre Daten abfangen und Passwörter, Kreditkartendaten oder andere übermittelte Angaben stehlen. Am besten schützen Sie Benutzer, indem Sie Seiten mit Formularen über eine sichere Verbindung bereitstellen, also unter einer https://-Adresse. So werden die Daten vor dem Senden verschlüsselt.

Browser erkennen die Sicherheitsrisiken beim Senden von Formulardaten über eine unsichere Verbindung und zeigen Warnungen an, um Benutzer von der Verwendung unsicherer Formulare abzuhalten.

Versteckte Inhalte

Ein weiteres ursprüngliches Textsteuerelement ist der Eingabetyp hidden. Damit erstellen Sie ein Formularsteuerelement, das für Benutzer unsichtbar ist, beim Absenden aber zusammen mit den übrigen Formulardaten an den Server gesendet wird. So könnten Sie beispielsweise einen Zeitstempel übermitteln, der angibt, wann eine Bestellung aufgegeben wurde. Da das Steuerelement versteckt ist, können Benutzer seinen Wert weder sehen noch gezielt bearbeiten. Es erhält nie den Fokus und wird auch von Screenreadern nicht erfasst.

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

Wenn Sie ein solches Element erstellen, müssen Sie seine Attribute name und value festlegen. Der Wert kann dynamisch per JavaScript gesetzt werden. Ein input-Element vom Typ hidden sollte kein zugeordnetes label haben.

Weitere Texteingabetypen wie search, url und tel behandeln wir im nächsten Tutorial, HTML5-Eingabetypen.

Auswählbare Elemente: Kontrollkästchen und Optionsfelder

Auswählbare Elemente sind Steuerelemente, deren Zustand Sie durch Anklicken des Elements oder seines zugeordneten Labels ändern können. Es gibt zwei Arten: Kontrollkästchen und Optionsfelder. Beide verwenden das Attribut checked, um festzulegen, ob sie standardmäßig ausgewählt sind.

Diese Widgets verhalten sich nicht genau wie andere Formular-Widgets. Bei den meisten Formular-Widgets werden beim Absenden alle Widgets mit einem Attribut name übermittelt, auch wenn kein Wert eingetragen wurde. Bei auswählbaren Elementen werden die Werte nur übermittelt, wenn sie ausgewählt sind. Ist ein Element nicht ausgewählt, wird nichts übermittelt – nicht einmal sein Name. Ist es ausgewählt, hat aber keinen Wert, wird der Name mit dem Wert on übermittelt.

Für eine möglichst gute Bedienbarkeit und Barrierefreiheit sollten Sie jede Gruppe zusammengehöriger Elemente in ein <fieldset> einschließen und mit einem <legend> eine übergreifende Beschreibung angeben. Jedes einzelne Paar aus <label>- und <input>-Element sollte in einem eigenen Listenelement (oder einem ähnlichen Element) stehen. Das zugehörige <label> steht üblicherweise direkt vor oder nach dem Optionsfeld beziehungsweise Kontrollkästchen. Anweisungen für die Gruppe stehen normalerweise im <legend>.

Kontrollkästchen

Ein Kontrollkästchen wird mit einem <input>-Element erstellt, dessen Attribut type den Wert checkbox hat.

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

Zusammengehörige Kontrollkästchen sollten dasselbe Attribut name verwenden. Mit dem Attribut checked ist das Kontrollkästchen beim Laden der Seite automatisch ausgewählt. Ein Klick auf das Kontrollkästchen oder sein zugeordnetes Label schaltet es ein oder 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>

Dieses Beispiel wird so dargestellt:

Der folgende Screenshot zeigt Kontrollkästchen im Standardzustand, mit Fokus und im deaktivierten Zustand. Im Standardzustand und im deaktivierten Zustand sind sie ausgewählt. Das Kontrollkästchen mit Fokus ist dagegen nicht ausgewählt und von einer Fokusumrandung umgeben.

Da Kontrollkästchen zwischen zwei Zuständen wechseln, gelten sie als Umschalter. Viele Entwickler und Designer erweitern ihre Standardgestaltung, um Schaltflächen zu erstellen, die wie Kippschalter aussehen. Sie können hier ein Beispiel ausprobieren (siehe auch den Quellcode).

Optionsfeld

Ein Optionsfeld wird mit einem <input>-Element erstellt, dessen Attribut type den Wert radio hat:

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

Mehrere Optionsfelder können zu einer Gruppe zusammengefasst werden. Wenn sie denselben Wert für ihr Attribut name haben, gehören sie zur selben Gruppe. Innerhalb einer Gruppe kann jeweils nur ein Feld ausgewählt sein. Wird eines ausgewählt, werden alle anderen automatisch abgewählt. Beim Absenden des Formulars wird nur der Wert des ausgewählten Optionsfelds übermittelt. Ist keines ausgewählt, gilt die gesamte Gruppe als in einem unbestimmten Zustand, und es wird kein Wert mit dem Formular übermittelt. Sobald eines der Optionsfelder einer Gruppe mit gleichem Namen ausgewählt wurde, können Benutzer nicht mehr alle Felder abwä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>

Dieses Beispiel wird so dargestellt:

Der folgende Screenshot zeigt ein ausgewähltes Optionsfeld im Standardzustand und ein ausgewähltes, deaktiviertes Optionsfeld sowie ein nicht ausgewähltes Optionsfeld mit Fokus.

Echte Schaltflächen

Ein Optionsfeld ist trotz seines englischen Namens „radio button“ keine Schaltfläche. Sehen wir uns nun echte Schaltflächen an! Drei input-Typen erzeugen Schaltflächen:

submit

Sendet die Formulardaten an den Server. Bei <button>-Elementen entsteht eine Submit-Schaltfläche, wenn das Attribut type fehlt oder einen ungültigen Wert hat.

reset

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

button

Eine Schaltfläche ohne automatische Wirkung, deren Verhalten mit JavaScript-Code festgelegt werden kann.

Daneben gibt es das Element <button> selbst. Sein Attribut type kann die Werte submit, reset oder button annehmen und so das Verhalten der drei genannten <input>-Typen nachbilden. Der wichtigste Unterschied: Echte <button>-Elemente lassen sich wesentlich einfacher gestalten.

<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>

Nachfolgend finden Sie Beispiele für jeden Schaltflächen-<input>-Typ sowie den entsprechenden <button>-Typ. Jedes Paar ist in ein <div>-Element eingeschlossen, damit es in einer neuen Zeile steht.

• Submit-Schaltfläche:

  html

  <div>
    <button type="submit">This is a <strong>submit button</strong></button>
  
    <input type="submit" value="This is a submit button" />
  </div>
  

• Reset-Schaltfläche:

  html

  <div>
    <button type="reset">This is a <strong>reset button</strong></button>
  
    <input type="reset" value="This is a reset button" />
  </div>
  

• Schaltfläche ohne vordefinierte Funktion:

  html

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

Diese Beispiele werden so dargestellt:

Schaltflächen verhalten sich gleich, unabhängig davon, ob Sie ein <button>- oder ein <input>-Element verwenden. Wie Sie an den Beispielen sehen, können <button>-Elemente jedoch HTML als Inhalt enthalten. Dieser steht zwischen dem öffnenden und dem schließenden <button>-Tag. <input>-Elemente sind dagegen leere Elemente. Ihr angezeigter Inhalt wird über das Attribut value festgelegt und kann daher nur aus Klartext bestehen.

Der folgende Screenshot zeigt eine Schaltfläche im Standardzustand, mit Fokus und im deaktivierten Zustand. Bei Fokus ist sie von einer Fokusumrandung umgeben; im deaktivierten Zustand wird sie ausgegraut.

Bild-Schaltfläche

Das Steuerelement Bild-Schaltfläche wird genau wie ein <img>-Element dargestellt. Wird es angeklickt, verhält es sich jedoch wie eine Submit-Schaltfläche.

Eine Bild-Schaltfläche wird mit einem <input>-Element erstellt, dessen Attribut type den Wert image hat. Dieses Element unterstützt dieselben Attribute wie das <img>-Element sowie alle Attribute, die andere Formularschaltflächen unterstützen.

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

Wenn die Bild-Schaltfläche zum Absenden des Formulars verwendet wird, übermittelt sie nicht ihren Wert. Stattdessen werden die X- und Y-Koordinaten des Klicks auf das Bild übermittelt. Die Koordinaten beziehen sich auf das Bild; seine obere linke Ecke entspricht also (0, 0). Sie werden als zwei Schlüssel-Wert-Paare gesendet:

• Der Schlüssel für den X-Wert besteht aus dem Wert des Attributs name, gefolgt von der Zeichenfolge „.x“.
• Der Schlüssel für den Y-Wert besteht aus dem Wert des Attributs name, gefolgt von der Zeichenfolge „.y“.

Wenn Sie beispielsweise bei den Koordinaten (123, 456) auf das Bild klicken und das Formular mit der Methode get absenden, sehen Sie die Werte folgendermaßen an die URL angehängt:

https://example.com?pos.x=123&pos.y=456

Damit lässt sich auf einfache Weise eine interaktive Bildkarte erstellen. Wie diese Werte gesendet und abgerufen werden, erläutert der Artikel Formulardaten senden.

Dateiauswahl

Ein letzter <input>-Typ stammt noch aus der frühen HTML-Zeit: die Dateieingabe. Formulare können Dateien an einen Server senden (dieser Vorgang wird ebenfalls im Artikel Formulardaten senden erläutert). Mit einem Dateiauswahl-Widget lassen sich eine oder mehrere Dateien für den Versand auswählen.

Um ein Dateiauswahl-Widget zu erstellen, verwenden Sie ein <input>-Element mit dem Wert file für das Attribut type. Über das Attribut accept können Sie die zulässigen Dateitypen einschränken. Wenn Benutzer mehr als eine Datei auswählen können sollen, fügen Sie außerdem das Attribut multiple hinzu.

Beispiel

Dieses Beispiel erstellt eine Dateiauswahl für Bilddateien. Benutzer können dabei mehrere Dateien auswählen.

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

Auf manchen Mobilgeräten kann die Dateiauswahl auch auf Fotos, Videos und Audioaufnahmen zugreifen, die direkt mit Kamera oder Mikrofon des Geräts erstellt werden. Dazu ergänzen Sie das Attribut accept um Angaben zur Aufnahme:

<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 Standardzustand, mit Fokus und im deaktivierten Zustand, wenn keine Datei ausgewählt ist.

Gemeinsame Attribute

Viele Elemente zur Definition von Formularsteuerelementen haben eigene Attribute. Daneben gibt es Attribute, die allen Formularelementen gemeinsam sind. Einige davon kennen Sie bereits. Die folgende Tabelle bietet einen Überblick:

Zusammenfassung

Dieser Artikel hat die älteren Eingabetypen behandelt – die ursprünglichen Typen aus den Anfangstagen von HTML, die von allen Browsern gut unterstützt werden. Im nächsten Abschnitt sehen wir uns die moderneren Werte des Attributs type an.

• Zurück
• Übersicht: Webformulare
• Weiter