Andere Formularelemente

Ein mehrzeiliges Textfeld wird mithilfe eines <textarea>-Elements angegeben, anstatt eines <input>-Elements.

<textarea cols="30" rows="8"></textarea>

Dies wird wie folgt dargestellt:

Der Hauptunterschied zwischen einem <textarea> und einem regulären einzeiligen Textfeld besteht darin, dass Benutzer harte Zeilenumbrüche (d.h. durch Drücken der Eingabetaste) einfügen dürfen, die beim Absenden der Daten enthalten sein werden.

<textarea> erfordert auch einen schließenden Tag; jeder Standardtext, den Sie enthalten möchten, sollte zwischen den öffnenden und schließenden Tags platziert werden. Im Gegensatz dazu ist das <input> ein leeres Element ohne schließenden Tag — ein Standardwert wird innerhalb des value-Attributs hinterlegt.

Beachten Sie, dass Sie zwar alles innerhalb eines <textarea>-Elements platzieren können (einschließlich anderer HTML-Elemente, CSS und JavaScript), es jedoch aufgrund seiner Natur alles als normaler Textinhalt gerendert wird. (Die Verwendung von contenteditable auf Nicht-Formular-Steuerelementen bietet eine API zum Erfassen von HTML/"rich" Content anstelle von einfachem Text).

Visuell wird der eingegebene Text umbrochen, und das Formularelement ist standardmäßig anpassbar. Die meisten Browser bieten einen Ziehpunkt, den Sie verwenden können, um die Größe des Textbereichs zu erhöhen/verringern.

Ein Anwendungsbeispiel für einen Textbereich finden Sie in dem Beispiel, das wir im ersten Artikel zusammengestellt haben.

<textarea> akzeptiert drei Attribute, um seine Darstellung über mehrere Zeilen zu steuern:

cols

Gibt die sichtbare Breite (Spalten) des Texteintragsfeldes an, gemessen in durchschnittlichen Zeichenbreiten. Dies ist effektiv die Anfangsbreite, da sie durch Ziehen der Größe des <textarea> geändert und mit CSS überschrieben werden kann. Der Standardwert, wenn kein Wert angegeben ist, ist 20.

rows

Gibt die Anzahl der sichtbaren Textzeilen für das Steuerelement an. Dies ist effektiv die Anfangshöhe, da sie durch Ziehen der Größe des <textarea> geändert und mit CSS überschrieben werden kann. Der Standardwert, wenn kein Wert angegeben ist, ist 2.

wrap

Bestimmt, wie der Text im Steuerelement umbrochen wird. Die Werte sind soft (der Standardwert), was bedeutet, dass der übermittelte Text nicht umbrochen wird, aber der im Browser gerenderte Text umbrochen wird; hard (das cols-Attribut muss bei Verwendung dieses Wertes angegeben werden), was bedeutet, dass sowohl der übermittelte als auch der gerenderte Text umbrochen wird, und off, was das Umbruch beendet.

Die Möglichkeit, ein <textarea> zu skalieren, wird mit der CSS-Eigenschaft resize gesteuert. Mögliche Werte sind:

• both: Der Standard — erlaubt ein horizontales und vertikales Skalieren.
• horizontal: Erlaubt nur ein horizontales Skalieren.
• vertical: Erlaubt nur ein vertikales Skalieren.
• none: Verhindert jede Skalierung.
• block und inline: Experimentelle Werte, die eine Skalierung nur in der block- oder inline-Richtung erlauben (dies variiert je nach Textorientierung; lesen Sie den Artikel Umgang mit verschiedenen Textausrichtungen, um mehr darüber zu erfahren.)

Spielen Sie mit dem interaktiven Beispiel auf der resize-Referenzseite, um eine Demonstration zu sehen, wie diese Werte funktionieren.

Dropdown-Steuerelemente sind eine einfache Möglichkeit, Benutzern das Auswählen aus vielen Optionen zu ermöglichen, ohne dabei viel Platz in der Benutzeroberfläche einzunehmen. HTML bietet zwei Arten von Dropdown-Steuerelementen: das Select-Feld und das Auto-Complete-Feld. Die Interaktion ist bei beiden Typen von Dropdown-Steuerelementen gleich — nachdem das Steuerelement aktiviert wurde, zeigt der Browser eine Liste von Werten an, aus denen der Benutzer auswählen kann.

Ein einfaches Select-Feld wird mit einem <select>-Element erstellt, das ein oder mehrere <option>-Elemente als Kinder enthält, von denen jedes eine seiner möglichen Werte angibt.

Einfaches Beispiel

<select id="simple" name="simple">
  <option>Banana</option>
  <option selected>Cherry</option>
  <option>Lemon</option>
</select>

Falls erforderlich, kann der Standardwert für das Select-Feld mit dem selected-Attribut für das gewünschte <option>-Element festgelegt werden — diese Option ist dann vorausgewählt, wenn die Seite geladen wird.

Verwendung von optgroup

Die <option>-Elemente können innerhalb von <optgroup>-Elementen verschachtelt werden, um optisch zugehörige Gruppen von Werten zu erstellen:

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

Beim <optgroup>-Element wird der Wert des label-Attributs vor den Werten der verschachtelten Optionen angezeigt. Der Browser stellt sie optisch normalerweise von den Optionen abgehoben dar (z.B. durch Fettschrift und auf einem anderen Verschachtelungsniveau), sodass sie weniger wahrscheinlich mit tatsächlichen Optionen verwechselt werden.

Verwendung des value-Attributs

Wenn ein <option>-Element ein explizit gesetztes value-Attribut hat, wird dieser Wert übermittelt, wenn das Formular mit dieser ausgewählten Option abgesendet wird. Wenn das value-Attribut weggelassen wird, wie bei den obigen Beispielen, wird der Inhalt des <option>-Elements als Wert verwendet. Daher sind value-Attribute nicht notwendig, Sie könnten jedoch einen Grund finden, einen verkürzten oder anderen Wert an den Server zu senden als den, der im Select-Feld visuell angezeigt wird.

Zum Beispiel:

<select id="simple" name="simple">
  <option value="banana">Big, beautiful yellow banana</option>
  <option value="cherry">Succulent, juicy cherry</option>
  <option value="lemon">Sharp, powerful lemon</option>
</select>

Standardmäßig ist die Höhe des Select-Feldes so eingestellt, dass ein einzelner Wert angezeigt wird. Das optionale size-Attribut bietet Kontrolle darüber, wie viele Optionen sichtbar sind, wenn das Select nicht den Fokus hat.

Standardmäßig lässt ein Select-Feld den Benutzer nur einen Wert auswählen. Durch Hinzufügen des multiple-Attributs zum <select>-Element können Sie Benutzern erlauben, mehrere Werte auszuwählen. Benutzer können mehrere Werte auswählen, indem sie die vom Betriebssystem bereitgestellte Standardmechanismus verwenden (z.B., auf dem Desktop können mehrere Werte durch Klicken bei gedrückter Cmd/Ctrl-Taste ausgewählt werden).

<select id="multi" name="multi" multiple size="2">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

Sie können vorgeschlagene, automatisch vervollständigte Werte für Formular-Widgets bereitstellen, indem Sie das <datalist>-Element mit Kind-<option>-Elemente verwenden, um die anzuzeigenden Werte anzugeben. Das <datalist> muss eine id bekommen.

Die Datenliste wird dann an ein <input>-Element (z.B. ein text- oder email-Eingabetyp) mit dem list-Attribut gebunden, dessen Wert die id der zu bindenden Datenliste ist.

Sobald eine Datenliste mit einem Formular-Widget verbunden ist, werden ihre Optionen verwendet, um eingegebenen Text des Nutzers automatisch zu vervollständigen; typischerweise wird dies dem Nutzer als Dropdown-Liste präsentiert, die mögliche Übereinstimmungen für das, was er in das Eingabefeld eingetippt hat, anzeigt.

Einfaches Beispiel

Sehen wir uns ein Beispiel an.

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

Weniger offensichtliche Verwendungen von datalist

Laut der HTML-Spezifikation können das list-Attribut und das <datalist>-Element mit jeder Art von Widget verwendet werden, das eine Benutzereingabe erfordert. Dies führt zu einigen Verwendungen, die etwas weniger offensichtlich erscheinen könnten.

Zum Beispiel wird, in Browsern, die <datalist> auf range Eingabetypen unterstützen, ein kleiner Strich über der Skala für jeden datalist <option> Wert angezeigt. Ein Implementierungsbeispiel hierzu finden Sie auf der Referenzseite für <input type="range">.

Und Browser, die <datalist>s und <input type="color"> unterstützen, sollten eine angepasste Farbpalette als Standard anzeigen und gleichzeitig die vollständige Farbpalette verfügbar machen.

In diesem Fall verhalten sich verschiedene Browser in Einzelfällen unterschiedlich, daher sollten solche Verwendungen als progressive Verbesserung betrachtet werden, und sicherstellen, dass sie sich gut degradieren.

Es gibt noch einige andere Formularfunktionen, die nicht so offensichtlich sind wie die bereits erwähnten, aber in manchen Situationen trotzdem nützlich, daher dachten wir, es wäre erwähnenswert, sie kurz zu erwähnen.

Zähler und Fortschrittsbalken sind visuelle Darstellungen von numerischen Werten. Unterstützung für das <progress> und <meter> ist in allen modernen Browsern verfügbar.

Zähler

Ein Zählerbalken repräsentiert einen festen Wert in einem Bereich, begrenzt durch die max und min-Werte. Dieser Wert wird visuell als Balken dargestellt, und um zu wissen, wie dieser Balken aussieht, vergleichen wir den Wert mit einigen anderen gesetzten Werten:

• Die low und high Werte unterteilen den Bereich in die folgenden drei Teile:

  • Der untere Teil des Bereichs liegt zwischen den min und low Werten, einschließlich.
  • Der mittlere Teil des Bereichs liegt zwischen den low und high Werten, ausschließlich.
  • Der obere Teil des Bereichs liegt zwischen den high und max Werten, einschließlich.

• Der optimum Wert definiert den optimalen Wert für das <meter>-Element. In Verbindung mit den low und high Werten definiert er, welcher Teil des Bereichs bevorzugt wird:

  • Wenn sich der optimum Wert im unteren Teil des Bereichs befindet, wird der untere Bereich als bevorzugter Teil angesehen, der mittlere Bereich als durchschnittlicher Teil, und der obere Bereich als schlechtester Teil.
  • Wenn sich der optimum Wert im mittleren Teil des Bereichs befindet, wird der untere Bereich als durchschnittlicher Teil angesehen, der mittlere Bereich als bevorzugter Teil, und der obere Bereich ebenfalls als durchschnittlich angesehen.
  • Wenn sich der optimum Wert im oberen Teil des Bereichs befindet, wird der untere Bereich als schlechtester Teil angesehen, der mittlere Bereich als durchschnittlicher Teil und der obere Bereich als bevorzugter Teil angesehen.

Alle Browser, die das <meter>-Element implementieren, verwenden diese Werte, um die Farbe des Zählerbalkens zu ändern:

• Befindet sich der aktuelle Wert im bevorzugten Bereich, ist der Balken grün.
• Befindet sich der aktuelle Wert im durchschnittlichen Bereich, ist der Balken gelb.
• Befindet sich der aktuelle Wert im schlechtesten Bereich, ist der Balken rot.

Ein solcher Balken wird mithilfe des <meter>-Elements erstellt. Dies ist für die Implementierung einer beliebigen Art von Zähler vorgesehen; zum Beispiel ein Balken, der den gesamten auf einer Festplatte belegten Speicherplatz anzeigt und rot wird, wenn er voll zu werden beginnt.

<meter min="0" max="100" value="75" low="33" high="66" optimum="0">75</meter>

Der Inhalt innerhalb des <meter>-Elements ist eine Fallback-Option für Browser, die das Element nicht unterstützen, und für unterstützende Technologien, um es zu vokalisieren.

Fortschritt

Ein Fortschrittsbalken repräsentiert einen Wert, der sich im Laufe der Zeit bis zu einem maximalen Wert ändert, der durch das max-Attribut spezifiziert wird. Ein solcher Balken wird mit einem <progress>-Element erstellt.

<progress max="100" value="75">75/100</progress>

Dies ist für die Implementierung von allem gedacht, was Fortschrittsberichterstattung erfordert, wie beispielsweise der Prozentsatz der heruntergeladenen Gesamtdaten oder die Anzahl der ausgefüllten Fragen eines Fragebogens.

Der Inhalt innerhalb des <progress>-Elements ist eine Fallback-Option für Browser, die das Element nicht unterstützen, und für Screenreader, um es zu vokalisieren.

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, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Andere Steuerungen.

Wie Sie in den letzten Artikeln gesehen haben, gibt es viele Arten von Formularelementen. Sie müssen nicht alle Details sofort merken und können diese Artikel so oft Sie möchten zurückkehren, um Details zu überprüfen.

Jetzt, wo Sie das HTML hinter den verschiedenen verfügbaren Formularelementen verstehen, schauen wir uns das Styling davon an.

• Zurück
• Übersicht: Webformular-Bausteine
• Weiter

• Anleitung zum Erstellen benutzerdefinierter Formularelemente
• Senden von Formularen über JavaScript
• Eigenschaften-Kompatibilitätstabelle für Formular-Widgets