Andere Formularsteuerelemente

Mehrzeilige Textfelder

Ein mehrzeiliges Textfeld wird mit einem <textarea>-Element spezifiziert, anstatt das <input>-Element zu verwenden.

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

Dies rendert sich wie folgt:

Der Hauptunterschied zwischen einem <textarea> und einem regulären einzeiligen Textfeld ist, dass es Benutzern erlaubt ist, harte Zeilenumbrüche (d.h. durch Drücken der Eingabetaste) einzufügen, die beim Senden der Daten eingeschlossen werden.

<textarea> benötigt 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 void element ohne schließenden Tag — jeder Standardwert wird im value-Attribut platziert.

Beachten Sie, dass, obwohl Sie alles innerhalb eines <textarea>-Elements einfügen können (einschließlich anderer HTML-Elemente, CSS und JavaScript), es aufgrund seiner Natur alles so gerendert wird, als ob es reiner Textinhalt wäre. (Mit contenteditable auf Nicht-Formular-Steuerelementen wird eine API bereitgestellt, um HTML/"rich"-Inhalte anstelle von einfachem Text zu erfassen).

Visuell wird der eingegebene Text umbrochen und das Steuerelement ist standardmäßig skalierbar. Die meisten Browser bieten einen Ziehgriff, den Sie ziehen können, um die Größe des Textbereichs zu erhöhen oder zu verringern.

Steuerung der mehrzeiligen Darstellung

<textarea> akzeptiert drei Attribute zur Steuerung seiner Darstellung über mehrere Zeilen hinweg:

cols

Gibt die sichtbare Breite (Spalten) des Textsteuerelements an, gemessen in durchschnittlichen Zeichenbreiten. Dies ist effektiv die Anfangsbreite, da sie durch Ändern der Größe des <textarea> geändert und durch CSS überschrieben werden kann. Der Standardwert, wenn keiner 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 Ändern der Größe des <textarea> geändert und durch CSS überschrieben werden kann. Der Standardwert, wenn keiner angegeben ist, ist 2.

wrap

Bestimmt, wie das Steuerelement Text umbricht. Die Werte sind soft (der Standardwert), was bedeutet, dass der übermittelte Text nicht umbrochen wird, der von Browser gerenderte Text jedoch umbrochen wird; hard (das cols-Attribut muss beim Verwenden dieses Wertes angegeben werden), was bedeutet, dass sowohl der übermittelte als auch gerenderte Text umbrochen wird, und off, was das Umwickeln stoppt.

Steuerung der Skalierbarkeit von Textareas

Die Möglichkeit, die Größe eines <textarea> zu ändern, wird mit der CSS-Eigenschaft resize gesteuert. Mögliche Werte sind:

• both: Der Standardwert — erlaubt das horizontale und vertikale Skalieren.
• horizontal: Erlaubt nur das horizontale Skalieren.
• vertical: Erlaubt nur das vertikale Skalieren.
• none: Erlaubt keine Größenänderung.
• block und inline: Experimentelle Werte, die das Skalieren nur in der block- oder inline-Richtung erlauben (dies variiert je nach Richtung Ihres Textes; lesen Sie Handling different text directions, um mehr zu erfahren).

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

Dropdown-Steuerelemente

Dropdown-Steuerelemente sind eine einfache Möglichkeit, Benutzern die Auswahl aus vielen Optionen zu ermöglichen, ohne viel Platz in der Benutzeroberfläche zu beanspruchen. HTML hat zwei Arten von Dropdown-Steuerelementen: die Auswahlbox und die Automatische Vervollständigungsbox. Die Interaktion ist bei beiden Arten von Dropdown-Steuerelementen gleich — nach der Aktivierung des Steuerelements zeigt der Browser eine Liste von Werten an, aus denen der Benutzer auswählen kann.

Auswahlbox

Eine einfache Auswahlbox wird mit einem <select>-Element erstellt, das eines oder mehrere <option>-Elemente als untergeordnete Elemente enthält, wobei jedes eine seiner möglichen Werte spezifiziert.

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 die Auswahlbox mit dem selected-Attribut auf dem gewünschten <option>-Element festgelegt werden — diese Option ist dann beim Laden der Seite vorausgewählt.

Verwendung von optgroup

Die <option>-Elemente können innerhalb von <optgroup>-Elementen verschachtelt werden, um visuell verbundene 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>

Auf dem <optgroup>-Element wird der Wert des label-Attributs vor den Werten der verschachtelten Optionen angezeigt. Der Browser stellt sie normalerweise visuell von den Optionen getrennt dar (z. B. fett dargestellt und auf einer anderen Verschachtelungsebene), sodass sie weniger wahrscheinlich mit tatsächlichen Optionen verwechselt werden.

Verwendung des value-Attributs

Wenn ein <option>-Element ein explizites value-Attribut hat, wird dieser Wert übertragen, wenn das Formular mit dieser Option gesendet wird. Wenn das value-Attribut weggelassen wird, wie bei den obigen Beispielen, wird der Inhalt des <option>-Elements als Wert verwendet. value-Attribute sind also nicht erforderlich, aber Sie könnten einen Grund finden, einen verkürzten oder anderen Wert an den Server zu senden als den, der visuell in der Auswahlbox 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 der Auswahlbox ausreichend, um einen einzelnen Wert anzuzeigen. Das optionale size-Attribut bietet Kontrolle darüber, wie viele Optionen sichtbar sind, wenn die Auswahl keinen Fokus hat.

Mehrfachauswahl-Auswahlbox

Standardmäßig lässt eine Auswahlbox nur die Auswahl eines Wertes durch den Benutzer zu. Durch Hinzufügen des multiple-Attributs zum <select>-Element können Benutzer mehrere Werte auswählen. Benutzer können mehrere Werte auswählen, indem sie den vom Betriebssystem bereitgestellten Standardmechanismus verwenden (z. B. können auf dem Desktop mehrere Werte angeklickt werden, während die Cmd/Ctrl-Tasten gedrückt gehalten werden).

<select id="multi" name="multi" multiple size="3">
  <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>

Autovervollständigungsbox

Sie können vorgeschlagene, automatisch vervollständigte Werte für Formularelemente mit dem <datalist>-Element mit Kind-<option>-Elementen bereitstellen, um die anzuzeigenden Werte zu spezifizieren. Das <datalist> muss eine id erhalten.

Die Datenliste wird dann mit einem <input>-Element (z. B. ein text- oder email-Eingabetyp) unter Verwendung des list-Attributs verknüpft, dessen Wert die id der zu bindenden Datenliste ist.

Sobald eine Datenliste mit einem Formularelement verbunden ist, werden ihre Optionen verwendet, um den vom Benutzer eingegebenen Text automatisch zu vervollständigen; typischerweise wird dem Benutzer dies als Dropdown-Liste möglicher Übereinstimmungen für das, was er ins Eingabefeld getippt hat, präsentiert.

Einfaches Beispiel

Schauen 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 Anwendungen von datalist

Gemäß 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 Anwendungen, die weniger offensichtlich erscheinen mögen.

Zum Beispiel wird in Browsern, die <datalist> bei range-Eingabetypen unterstützen, ein kleiner Häkchen über dem Bereich für jeden datalist-<option>-Wert angezeigt. Sie können eine Implementierung eines solchen Beispiels auf der <input type="range">-Referenzseite sehen.

Und Browser, die <datalist>s und <input type="color"> unterstützen, sollten eine angepasste Farbpalette als Standard anzeigen, während weiterhin die volle Farbpalette verfügbar bleibt.

In diesen Fällen verhalten sich verschiedene Browser unterschiedlich, je nach Fall. Betrachten Sie solche Anwendungen als progressive Verbesserung und stellen Sie sicher, dass sie anmutig verschlechtert werden.

Weitere Formularfunktionen

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

Messgeräte und Fortschrittsbalken

Messgeräte und Fortschrittsbalken (erstellt mit den <meter> und <progress>-Elementen) sind visuelle Darstellungen von numerischen Werten.

Messgerät

Ein Messbalken stellt einen festen Wert in einem durch max und min begrenzten Bereich dar. Dieser Wert wird visuell als Balken dargestellt, und um zu wissen, wie dieser Balken aussieht, vergleichen wir den Wert mit einigen anderen festgelegten Werten:

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

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

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

  • Befindet sich der optimum-Wert im unteren Teil des Bereichs, wird der untere Bereich als der bevorzugte Teil betrachtet, der mittlere Bereich wird als der durchschnittliche Teil betrachtet und der obere Bereich wird als der schlechteste Teil betrachtet.
  • Befindet sich der optimum-Wert im mittleren Teil des Bereichs, wird der untere Bereich als durchschnittlicher Teil, der mittlere Bereich als bevorzugter Teil und der obere Bereich ebenfalls als durchschnittlich betrachtet.
  • Befindet sich der optimum-Wert im oberen Teil des Bereichs, wird der untere Bereich als der schlechteste Teil, der mittlere Bereich als der durchschnittliche Teil und der obere Bereich als der bevorzugte Teil betrachtet.

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

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

Ein solcher Balken wird mit dem <meter>-Element erstellt. Dies ist nützlich, um eine Art von Messgerät zu implementieren; zum Beispiel einen Balken, der den insgesamt genutzten Speicherplatz auf einer Festplatte anzeigt, der rot wird, wenn er beginnt, sich zu füllen.

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

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

Fortschritt

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

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

Dies ist zur Implementierung von allem, was Fortschrittsberichte erfordert, wie der Prozentsatz der insgesamt heruntergeladenen Dateien oder die Anzahl der beantworteten Fragen in einem Fragebogen.

Der Inhalt innerhalb des <progress>-Elements dient als Fallback für Browser, die das Element nicht unterstützen, und für Screenreader, um es zu verlesen.

Zusammenfassung

Wie Sie in den letzten Artikeln gesehen haben, gibt es viele Arten von Formularsteuerelementen. Sie müssen sich nicht alle diese Details sofort merken und können auf diese Artikel so oft zurückgreifen, wie Sie möchten, um sich über Details zu informieren.

Jetzt, da Sie ein Verständnis für das HTML bezüglich der verschiedenen verfügbaren Formularsteuerelemente haben, werfen wir einen Blick darauf, wie man sie gestaltet.

• Zurück
• Übersicht: Webformulare
• Weiter