Grundlegende native Formularelemente

Text-Eingabefelder

Text-<input>-Felder sind die grundlegendsten Formular-Widgets. Sie sind eine sehr bequeme Möglichkeit, dem Benutzer die Eingabe aller 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 trotzdem mit den restlichen Formulardaten gesendet) oder disabled (der Eingabewert kann nicht geändert werden und wird niemals mit den restlichen Formulardaten gesendet).
• Sie können einen placeholder haben; dies ist der Text, der im Text-Eingabefeld erscheint und der kurz den Zweck des Feldes beschreiben sollte.
• Sie können im size (die physische Größe des Feldes) und maxlength (die maximale 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).

Einzeilige Textfelder

Ein einzeiliges Textfeld wird mit einem <input>-Element erstellt, dessen type Attribut 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 Fallback-Wert, wenn der angegebene Wert für das type Attribut vom Browser nicht erkannt wird (zum Beispiel, wenn Sie type="color" angeben und der Browser keine nativen Farbwähler unterstützt).

Hier ist ein einfaches einzeiliges Textfeld-Beispiel:

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

Es wird so dargestellt:

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 untenstehende Screenshot zeigt ein Texteingabefeld im Standard-, fokussierten und deaktivierten Zustand. 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.

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

Passwortfeld

Einer der ursprünglichen Eingabetypen war der password Textfeldtyp:

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

Dies wird ähnlich wie das grundlegende einzeilige Textfeld dargestellt:

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

Der password-Wert fügt den eingegebenen Text keine speziellen Einschränkungen hinzu, aber er verschleiert den eingegebenen Wert im Feld, sodass er nicht leicht von anderen gelesen werden kann.

Denken Sie daran, 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ösartige Partei könnte Ihre Daten abfangen und Passwörter, Kreditkartendetails oder was auch immer Sie gesendet haben, stehlen. Der beste Weg, Benutzer davor zu schützen, besteht darin, alle Seiten mit Formularen über eine sichere Verbindung (d.h. an einer https://-Adresse) zu hosten, sodass die Daten vor dem Senden verschlüsselt werden.

Browser erkennen die Sicherheitsimplikationen des Sendens von Formulardaten über eine unsichere Verbindung und haben Warnungen, um Benutzer davon abzuhalten, unsichere Formulare zu verwenden.

Versteckter Inhalt

Ein weiteres ursprüngliches Textelement ist der hidden Eingabetyp. Dieser wird verwendet, um ein Formularelement 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 könnten Sie 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 niemals fokussiert und ein Bildschirmlesegerät wird es ebenfalls nicht bemerken.

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

Wenn Sie ein solches Element erstellen, müssen seine name und value Attribute festgelegt werden. Der Wert kann dynamisch über JavaScript gesetzt werden. Der hidden Eingabetyp sollte kein zugehöriges Label haben.

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

Prüfelemente: Kontrollkästchen und Radio Buttons

Prüfelemente sind Steuerungen, deren Zustand Sie durch Klicken auf sie oder deren zugehörige Labels ändern können. Es gibt zwei Arten von Prüfelementen: das Kontrollkästchen und den Radio-Button. Beide verwenden das checked Attribut, um anzuzeigen, ob das Widget standardmäßig aktiviert ist oder nicht.

Es ist anzumerken, dass sich diese Widgets nicht genau wie andere Formular-Widgets verhalten. Für die meisten Formular-Widgets werden alle Widgets, die ein name Attribut haben, gesendet, auch wenn kein Wert ausgefüllt wurde, sobald das Formular abgeschickt wird. Bei Prüfelementen 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/Barrierefreiheit wird empfohlen, jede Liste verwandter Elemente in ein <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 ähnlich) enthalten sein. Das zugeordnete <label> wird im Allgemeinen direkt vor oder nach dem Radio-Button oder Kontrollkästchen platziert, wobei die Anweisungen für die Gruppe von Radio-Buttons oder Kontrollkästchen in der Regel der Inhalt des <legend> sind.

Kontrollkästchen

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

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

Verwandte Kontrollkästchen sollten dasselbe name Attribut verwenden. Das Hinzufügen des checked Attributs macht das Kontrollkästchen automatisch aktiviert, wenn die Seite geladen wird. Das Klicken 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>

Dieses Beispiel wird so dargestellt:

Der folgende Screenshot zeigt Kontrollkästchen im Standard-, fokussierten und deaktivierten Zustand. Kontrollkästchen im Standard- und deaktivierten Zustand erscheinen aktiviert, während im fokussierten Zustand das Kontrollkästchen nicht aktiviert ist und ein Fokusring darum erscheint.

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

Radio-Button

Ein Radio-Button wird mit dem <input>-Element erstellt, bei dem das type Attribut auf den Wert radio gesetzt ist:

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

Mehrere Radio-Buttons können miteinander verbunden werden. Wenn sie denselben Wert für ihr name Attribut teilen, werden sie als zur gleichen Gruppe von Schaltflächen gehörend betrachtet. Nur eine Schaltfläche in einer bestimmten Gruppe kann gleichzeitig aktiv sein; das bedeutet, wenn eine von ihnen aktiviert ist, werden alle anderen automatisch deaktiviert. Wenn das Formular gesendet wird, wird nur der Wert des aktivierten Radio-Buttons gesendet. Wenn keiner von ihnen aktiviert ist, wird der gesamte Pool von Radiobuttons als unbekannter Status betrachtet und es wird kein Wert mit dem Formular gesendet. Sobald einer der Radiobuttons in einer gleichnamigen Gruppe von Schaltern aktiviert ist, ist es dem Benutzer nicht möglich, alle Schalter 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>

Dieses Beispiel wird so dargestellt:

Der folgende Screenshot zeigt Standard- und deaktivierte Radio-Buttons im aktivierten Zustand sowie einen fokussierten Radio-Button im deaktivierten Zustand.

Tatsächliche Schaltflächen

Der Radio-Button ist trotz seines Namens eigentlich kein Button; lassen Sie uns fortfahren und schauen wir uns tatsächliche Buttons an! Es gibt drei Eingabetypen, die Buttons erzeugen:

submit

Sendet die Formulardaten an den Server. Für <button>-Elemente führt das Weglassen des type Attributs (oder ein ungültiger Wert des type) zu einem Submit-Button.

reset

Setzt alle Formularelemente auf ihre Standardwerte zurück.

button

Schaltflächen, die keine automatische Wirkung haben, sondern mit 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 zu imitieren. Der Hauptunterschied zwischen den beiden ist, dass tatsächliche <button> Elemente viel einfacher zu stylen sind.

<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 Button <input> Typ, zusammen mit dem äquivalenten <button> Typ. Jedes Paar wurde in ein <div>-Element eingeschlossen, um es auf eine neue Zeile zu setzen.

• Submit-Button:

  html

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

• Reset-Button:

  html

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

• Anonymer Button:

  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 immer gleich, unabhängig davon, ob Sie ein <button>-Element oder ein <input>-Element verwenden. Wie Sie aus den Beispielen sehen können, ermöglichen jedoch <button>-Elemente die Verwendung von HTML in ihrem Inhalt, der zwischen den öffnenden und schließenden <button>-Tags eingefügt wird. <input>-Elemente dagegen sind Leer-Elemente; ihr angezeigter Inhalt wird im value Attribut eingefügt und akzeptiert daher nur Klartext als Inhalt.

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

Bildtaste

Die Bildtaste-Steuerung wird genauso gerendert wie ein <img>-Element, mit der Ausnahme, dass sie, wenn der Benutzer darauf klickt, wie eine Submit-Taste funktioniert.

Eine Bildtaste wird erstellt, indem ein <input>-Element mit dem type Attributwert image verwendet wird. Dieses Element unterstützt genau dasselbe Attributset wie das <img>-Element, zusätzlich zu allen Attributen, die von anderen Formular-Buttons unterstützt werden.

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

Wenn die Bildtaste verwendet wird, um das Formular zu senden, sendet diese Steuerung nicht ihren Wert — stattdessen werden die X- und Y-Koordinaten des Klicks auf das Bild gesendet (die Koordinaten beziehen sich auf das 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".

So werden zum Beispiel beim Klicken auf das Bild bei der Koordinate (123, 456) und beim Absenden über die get-Methode die Werte wie folgt an die URL angehängt:

https://example.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 Senden von Formulardaten detailliert beschrieben.

Dateiauswahl

Es gibt einen letzten <input>-Typ, der uns in den frühen Tagen von HTML begegnet ist: den Datei-Eingabetyp. Formulare können Dateien an einen Server senden (diese spezielle Aktion wird auch im Artikel Senden von Formulardaten detailliert beschrieben). 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 mit seinem type Attribut auf file gesetzt. Die akzeptierten Dateitypen können mit dem accept Attribut eingeschränkt werden. Zusätzlich, wenn Sie dem Benutzer gestatten möchten, mehr als eine Datei auszuwählen, können Sie dies durch Hinzufügen des multiple Attributs tun.

Beispiel

In diesem Beispiel wird ein Datei-Auswahl-Widget erstellt, das grafische Bilddateien anfordert. 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 Dateiauswähler direkt auf Fotos, Videos und Audio zugreifen, die von der Kamera und dem Mikrofon des Geräts aufgenommen wurden, indem Erfassungsinformationen 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" />

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

Gemeinsame Attribute

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 Formular-Elementen gemeinsam sind. Sie haben einige davon bereits getroffen, aber unten ist eine Liste dieser gemeinsamen Attribute, zu Ihrer Referenz:

Zusammenfassung

Dieser Artikel hat die älteren Eingabetypen behandelt — den ursprünglichen Satz, der in 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