Grundlegende native Formularelemente

Texteingabefelder

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

Alle grundlegenden Textfelder teilen einige gemeinsame Verhaltensweisen:

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

Einzeilige Textfelder

Ein einzeiliges Textfeld wird mit einem <input>-Element erstellt, dessen type-Attributwert auf text gesetzt ist, oder durch Weglassen des type-Attributs (der Standardwert ist text). Der Wert text für dieses Attribut ist auch der Fallback-Wert, wenn der von Ihnen für das type-Attribut angegebene Wert 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" />

Es wird folgendermaßen gerendert:

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 folgende Screenshot zeigt ein Texteingabefeld in den Standard-, fokussierten und deaktivierten Zuständen. Die meisten Browser zeigen den fokussierten Zustand mit einem Fokus-Ring um die Steuerung und den deaktivierten Zustand mit grauem Text oder einer verblassten/semi-opaken Steuerung.

Die in diesem Dokument verwendeten Screenshots wurden auf dem Chrome-Browser auf macOS aufgenommen. Es kann geringfügige Variationen bei 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" />

Dies wird ähnlich wie das grundlegende einzeilige Textfeld gerendert:

Versuchen Sie jedoch, in das Feld zu tippen - jedes eingegebene Zeichen wird als Punkt angezeigt.

Der password-Wert fügt dem eingegebenen Text keine besonderen Beschränkungen hinzu, aber er verschleiert den in das Feld eingegebenen Wert, sodass er von anderen nicht leicht 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ö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, Seiten mit Formularen über eine sichere Verbindung (d.h. bei einer https://-Adresse) zu hosten, damit 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.

Versteckte Inhalte

Ein weiteres ursprüngliches Texteingabeelement ist der hidden-Eingabetyp. Dies wird verwendet, um eine Formsteuerung zu erstellen, die für den Benutzer unsichtbar ist, aber dennoch an den Server gesendet wird, wenn das Formular gesendet wird - zum Beispiel könnten Sie einen Zeitstempel an den Server senden wollen, der angibt, wann eine Bestellung aufgegeben wurde. Da es versteckt ist, kann der Benutzer es nicht sehen oder absichtlich bearbeiten, es erhält niemals den Fokus, und ein Screenreader wird es auch nicht wahrnehmen.

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

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

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

Prüfbare Elemente: Kontrollkästchen und Optionsfelder

Prüfbare Elemente sind Steuerungen, deren Zustand Sie ändern können, indem Sie darauf oder auf ihre zugehörigen Labels klicken. Es gibt zwei Arten von prüfbaren Elementen: das Kontrollkästchen und das Optionsfeld. Beide verwenden das checked-Attribut, um anzuzeigen, ob das Widget standardmäßig aktiviert ist oder nicht.

Es ist erwähnenswert, dass sich diese Widgets nicht genau wie andere Formelelemente verhalten. Bei den meisten Formelelementen werden, sobald das Formular gesendet wird, alle Widgets, die ein name-Attribut haben, gesendet, auch wenn kein Wert ausgefüllt wurde. Im Fall prüfbarer Elemente 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 setzen, mit einem <legend>, das eine allgemeine Beschreibung der Liste bietet. Jedes einzelne Paar von <label>/<input>-Elementen sollte in sein eigenes Listenelement (oder ähnliches) eingeschlossen werden. Das zugehörige <label> wird in der Regel direkt vor oder nach dem Optionsfeld oder Kontrollkästchen platziert, wobei die Anweisungen für die Gruppe von Optionsfeldern oder Kontrollkästchen im Allgemeinen der Inhalt des <legend> sind.

Kontrollkästchen

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

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

Verwandte Kontrollkästchen-Elemente sollten dasselbe name-Attribut verwenden. Das Einschließen des checked-Attributs aktiviert das Kontrollkästchen automatisch, wenn die Seite geladen wird. Durch Klicken auf das Kontrollkästchen oder sein zugehöriges Label 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>

Dieses Beispiel wird so gerendert:

Der folgende Screenshot zeigt Kontrollkästchen in den Standard-, fokussierten und deaktivierten Zuständen. Kontrollkästchen in den Standard- und deaktivierten Zuständen erscheinen aktiviert, während im fokussierten Zustand das Kontrollkästchen deaktiviert ist, mit einem Fokus-Ring darum.

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

Optionsfeld

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 haben, gelten sie als Teil derselben Gruppe von Schaltflächen. Nur eine Schaltfläche in einer bestimmten Gruppe darf gleichzeitig aktiviert sein; dies bedeutet, dass, wenn eine von ihnen aktiviert ist, alle anderen automatisch deaktiviert werden. Wenn das Formular gesendet wird, wird nur der Wert der aktivierten Optionsschaltfläche gesendet. Wenn keine von ihnen aktiviert ist, wird der gesamte Pool an Optionsfeldern als in einem unbekannten Zustand befindlich betrachtet und es wird kein Wert mit dem Formular gesendet. Wenn eine der gleichnamigen Gruppen-Optionsfelder aktiviert ist, kann der Benutzer nicht alle Knöpfe 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>

Dieses Beispiel wird so gerendert:

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

Tatsächliche Schaltflächen

Die Optionsschaltfläche ist trotz ihres Namens eigentlich keine Schaltfläche; lassen Sie uns weitermachen und uns tatsächliche Schaltflächen ansehen! 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 von type) zu einer Submit-Schaltfläche.

reset

Setzt alle Formularelemente auf ihre Standardwerte zurück.

button

Schaltflächen, die keine automatische Wirkung haben, aber 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 drei oben genannten <input>-Typen nachzuahmen. Der Hauptunterschied zwischen den beiden ist, dass eigentliche <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 <input>-Schaltflächentyp sowie den entsprechenden <button>-Typ. Jedes Paar wurde in ein <div>-Element eingefügt, um es in eine neue Zeile zu trennen.

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

• Anonyme Schaltfläche:

  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 wie folgt gerendert:

Schaltflächen verhalten sich immer gleich, unabhängig davon, ob Sie ein <button>-Element oder ein <input>-Element verwenden. Wie Sie jedoch aus den Beispielen ersehen können, ermöglichen <button>-Elemente die Verwendung von HTML in ihrem Inhalt, der zwischen dem öffnenden und schließenden <button>-Tag 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 Standard-, fokussierten und deaktivierten Zuständen. Im fokussierten Zustand befindet sich ein Fokus-Ring um die Schaltfläche und im deaktivierten Zustand ist die Schaltfläche ausgegraut.

Bildschaltfläche

Die Bildschaltfläche-Steuerung wird genau wie ein <img>-Element gerendert, außer dass sie, wenn der Benutzer darauf klickt, sich wie eine Submit-Schaltfläche verhält.

Eine Bildschaltfläche wird mit einem <input>-Element erstellt, dessen type-Attribut auf den Wert image gesetzt ist. Dieses Element unterstützt genau die gleiche Menge an Attributen wie das <img>-Element sowie alle von anderen Schaltflächen unterstützten Attribute.

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

Wenn die Bildschaltfläche verwendet wird, um das Formular zu übermitteln, 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 dem String ".x".
• Der Y-Wert-Schlüssel ist der Wert des name-Attributs gefolgt von dem String ".y".

Wenn Sie also auf das Bild bei der Koordinate (123, 456) klicken und es per get-Methode übermitteln, werden die Werte wie folgt an die URL angehängt:

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

Dies ist ein sehr praktischer Weg, um eine "Hot Map" zu erstellen. Wie diese Werte gesendet und abgerufen werden, wird im Artikel Formulardaten senden detailliert beschrieben.

Dateiauswahl

Es gibt einen letzten <input>-Typ, der uns in frühen HTML-Versionen zur Verfügung gestellt wurde: den Dateieingabetyp. Formulare können Dateien an einen Server senden (diese spezielle Aktion wird ebenfalls im Artikel Formulardaten senden beschrieben). Das Dateiauswahl-Widget kann verwendet werden, um eine oder mehrere Dateien zur Übermittlung auszuwählen.

Um ein Dateiauswahl-Widget zu erstellen, verwenden Sie das <input>-Element mit seinem type-Attribut, das auf file gesetzt ist. Die Arten von akzeptierten Dateien können mit dem accept-Attribut eingeschränkt werden. Wenn Sie außerdem den Benutzer mehr als eine Datei auswählen lassen möchten, können Sie dies tun, indem Sie das multiple-Attribut hinzufügen.

Beispiel

In diesem Beispiel wird ein Dateiauswahl-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 auf Fotos, Videos und direkt durch die Kamera und das Mikrofon des Geräts aufgenommene Audiodaten zugreifen, indem Capture-Informationen 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 Dateiauswahl-Widget in den Standard-, Fokus- und deaktivierten Zuständen, wenn keine Datei ausgewählt ist.

Allgemeine Attribute

Viele der zur Definition von Formularelementen verwendeten Elemente haben einige ihrer eigenen spezifischen Attribute. Es gibt jedoch eine Reihe von Attributen, die allen Formelementen gemeinsam sind. Einige davon sind Ihnen bereits begegnet, aber unten finden Sie eine Liste dieser allgemeinen Attribute, als Referenz:

Zusammenfassung

Dieser Artikel hat die älteren Eingabetypen behandelt - das originale Set, das in den frühen Tagen von HTML eingeführt wurde und in allen Browsern gut unterstützt wird. Im nächsten Abschnitt werfen wir einen Blick auf die moderneren Werte des type-Attributs.

• Zurück
• Übersicht: Webformulare
• Weiter