Grundlegende native Formularsteuerungen

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

Alle grundlegenden Textsteuerelemente haben einige gemeinsame Verhaltensweisen:

• Sie können als readonly markiert werden (der Benutzer kann den Eingabewert nicht ändern, aber er wird trotzdem 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 im Text-Eingabefeld erscheint und kurz den Zweck des Feldes beschreiben sollte.
• Sie können in der size (der physischen Größe des Feldes) und der maxlength (der maximalen Anzahl von 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 Attributswert auf text gesetzt ist oder indem das type Attribut 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 vom Browser nicht bekannt 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 er die Daten an den Server sendet.

Das folgende Bildschirmfoto zeigt eine Texteingabe im Standard-, Fokus- und deaktivierten Zustand. Die meisten Browser zeigen den fokussierten Zustand mithilfe eines Fokus-Rings um das Steuerelement und den deaktivierten Zustand mit grauem Text oder einem verblassten/halbtransparenten Steuerelement an.

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

Passwortfeld

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

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

Das folgende Bildschirmfoto zeigt das Passwort-Eingabefeld, in dem jedes Eingabezeichen als Punkt dargestellt wird.

Der password-Wert fügt dem eingegebenen Text keine speziellen Einschränkungen hinzu, er verdeckt jedoch den in das Feld eingegebenen Wert (z. B. mit Punkten oder Sternchen), sodass ihn andere nicht leicht lesen können.

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

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

Ein weiteres originales Textsteuerelement ist der hidden Eingabetyp. Dieser wird verwendet, um ein Formularelement zu erstellen, das für den Benutzer unsichtbar ist, aber trotzdem mit dem Rest der Formulardaten an den Server gesendet wird, sobald das Formular abgeschickt wird — zum Beispiel könnten Sie einen Zeitstempel an den Server übermitteln, der angibt, wann eine Bestellung aufgegeben wurde. Da es verborgen ist, kann der Benutzer den Wert weder sehen noch absichtlich bearbeiten, es wird niemals den Fokus erhalten, und ein Bildschirmlesegerät 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 zugeordnetes Label haben.

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

Ankreuzbare Elemente sind Steuerungen, deren Zustand Sie durch Anklicken ändern können, sowohl das Element selbst als auch sein zugehöriges Label. 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 bemerkenswert, dass sich diese Widgets nicht genau wie andere Formular-Widgets verhalten. Für die meisten Formular-Widgets werden, sobald das Formular abgeschickt wird, alle Widgets, die ein name Attribut haben, gesendet, selbst wenn kein Wert ausgefüllt wurde. Bei ankreuzbaren Elementen werden deren Werte jedoch 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/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 seinem eigenen Listenelement (oder ähnlichem) enthalten sein. Das zugeordnete <label> wird in der Regel unmittelbar 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. Sehen Sie sich die oben verlinkten Beispiele für strukturelle Beispiele an.

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. Die Angabe des checked Attributs macht das Kontrollkästchen automatisch beim Laden der Seite aktiviert. Durch Klicken auf das Kontrollkästchen oder sein zugehöriges Label wird das Kontrollkästchen umgeschaltet.

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

Das folgende Bildschirmfoto zeigt Kontrollkästchen im Standard-, Fokus- und deaktivierten Zustand. Kontrollkästchen im Standard- und deaktivierten Zustand erscheinen aktiviert, während sich im Fokuszustand ein Fokus-Ring um das Kontrollkästchen befindet, es jedoch nicht aktiviert ist.

Aufgrund der Ein/Aus-Natur von Kontrollkästchen wird das Kontrollkästchen als Umschaltschalter betrachtet, wobei viele Entwickler und Designer auf dem Standard-Kontrollkästchenstil aufbauen, um Schaltflächen zu erstellen, die wie Kippschalter aussehen. Sie können ein Beispiel in Aktion hier sehen (auch der 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 verknüpft werden. Wenn sie denselben Wert für ihr name Attribut haben, werden sie als in derselben Gruppe von Schaltflächen befindlich betrachtet. Nur eine Schaltfläche in einer gegebenen Gruppe kann gleichzeitig aktiviert sein; dies bedeutet, dass, wenn eine von ihnen aktiviert wird, alle anderen automatisch deaktiviert werden. Wenn das Formular abgeschickt wird, wird nur der Wert des aktivierten Optionsfeldes gesendet. Wenn keines von ihnen aktiviert ist, wird die gesamte Gruppe von Optionsfeldern als im unbekannten Zustand betrachtet und kein Wert wird mit dem Formular gesendet. Sobald eines der Optionsfelder in einer Gruppe mit demselben Namen aktiviert wird, ist es nicht möglich, dass der Benutzer alle Schaltflächen wieder deaktiviert, 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>

Das folgende Bildschirmfoto zeigt Standard- und deaktivierte Optionsfelder im aktivierten Zustand sowie ein fokussiertes Optionsfeld im deaktivierten Zustand.

Das Optionsfeld ist eigentlich keine Schaltfläche, trotz seines Namens; schauen wir uns also tatsächliche Schaltflächen an! 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 Absendeschaltfläche.

reset

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

button

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

Dann haben wir auch das <button> Element selbst. Dieses kann ein type Attribut mit dem Wert submit, reset, oder button haben, um das Verhalten der oben genannten drei <input> Typen nachzuahmen. Der Hauptunterschied zwischen den beiden besteht darin, 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 <input> Typ von Schaltflächen, zusammen mit dem äquivalenten <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, ganz gleich, ob Sie ein <button> Element oder ein <input> Element verwenden. Wie Sie aus den Beispielen sehen können, ermöglichen <button> Elemente jedoch die Verwendung von HTML in ihrem Inhalt, der zwischen den öffnenden und schließenden <button> Tags eingefügt wird. <input> Elemente hingegen sind leere Elemente; ihr angezeigter Inhalt wird im value Attribut eingefügt und akzeptiert daher nur einfachen Text als Inhalt.

Das folgende Bildschirmfoto zeigt eine Schaltfläche im Standard-, Fokus- und deaktivierten Zustand. Im Fokuszustand gibt es einen Fokus-Ring um die Schaltfläche, und im deaktivierten Zustand ist die Schaltfläche ausgegraut.

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

Eine Bildschaltfläche 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, plus alle von anderen Formular-Schaltflächen unterstützten Attribute.

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

Wenn die Bildschaltfläche zum Abschicken 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, 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 Attributs gefolgt von der Zeichenfolge ".x".
• Der Y-Wert-Schlüssel ist der Wert des name Attributs gefolgt von der Zeichenfolge ".y".

Zum Beispiel, wenn Sie auf das Bild an 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 "heiße Karte" zu erstellen. Wie diese Werte gesendet und abgerufen werden, ist im Artikel Formulardaten senden und abrufen detailliert beschrieben.

Es gibt einen letzten <input> Typ, der uns in frühzeitigem HTML zur Verfügung gestellt wurde: den Dateieingabetyp. Formulare können Dateien an einen Server senden (diese spezifische Aktion ist ebenfalls im Artikel Formulardaten senden und abrufen detailliert beschrieben). Das Dateiauswahlelement kann verwendet werden, um eine oder mehrere Dateien zur Übermittlung auszuwählen.

Um ein Dateiauswahlelement zu erstellen, verwenden Sie das <input> Element, dessen type Attribut auf file gesetzt ist. Die Art der akzeptierten Dateien kann mithilfe des accept Attributs eingeschränkt werden. Zusätzlich, wenn Sie dem Benutzer erlauben möchten, mehr als eine Datei auszuwählen, können Sie dies durch Hinzufügen des multiple Attributs tun.

In diesem Beispiel wird ein Dateiauswahlelement erstellt, das Grafikbilddateien anfordert. In diesem Fall darf der Benutzer mehrere Dateien auswählen.

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

Auf einigen mobilen Geräten kann der Dateiauswähler auf Fotos, Videos und Audio, die direkt von der Kamera und dem Mikrofon des Geräts aufgenommen wurden, zugreifen, indem Aufnahmedaten wie folgt zum accept Attribut hinzugefügt werden:

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

Das folgende Bildschirmfoto zeigt das Dateiauswahlelement im Standard-, Fokus- und deaktivierten Zustand, wenn keine Datei ausgewählt ist.

Viele der verwendeten Elemente zur Definition von Formularsteuerungen haben einige ihrer eigenen spezifischen Attribute. Es gibt jedoch eine Reihe von Attributen, die allen Formularelementen gemeinsam sind. Einige davon kennen Sie bereits, aber unten finden Sie eine Liste dieser allgemeinen Attribute als 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, dass Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Grundlegende Steuerungen.

Dieser Artikel hat die älteren Eingabetypen behandelt — den ursprünglichen Satz, der zu den frühen Tagen von HTML eingeführt wurde und in allen Browsern gut unterstützt wird. Im nächsten Abschnitt schauen wir uns die moderneren Werte des type Attributs an.

• Zurück
• Übersicht: Webformulare
• Weiter