Andere Formularelemente

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

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

Dies wird folgendermaßen dargestellt:

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

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

Beachten Sie, dass, obwohl Sie in ein <textarea>-Element alles einfügen können (einschließlich anderer HTML-Elemente, CSS und JavaScript), aufgrund seiner Natur alles so gerendert wird, als ob es reiner Textinhalt wäre. (Durch die Verwendung von contenteditable bei nicht-formularbezogenen Steuerelementen kann man eine API bereitstellen, um HTML/"Rich"-Inhalt anstelle von reinem Text zu erfassen).

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

Ein Beispiel für die Verwendung von Textbereichen finden Sie in dem Beispiel, das wir im ersten Artikel zusammengestellt haben.

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

cols

Gibt die sichtbare Breite (Spalten) des Textkontrollfeldes an, gemessen in durchschnittlichen Zeichenbreiten. Dies ist im Wesentlichen die anfängliche Breite, da sie durch Ändern der Größe des <textarea> verändert und durch CSS überschrieben werden kann. Der Standardwert, wenn keiner angegeben wird, ist 20.

rows

Gibt die Anzahl der sichtbaren Textzeilen für das Kontrollfeld an. Dies ist im Wesentlichen die anfängliche Höhe, da sie durch Ändern der Größe des <textarea> verändert und durch CSS überschrieben werden kann. Der Standardwert, wenn keiner angegeben wird, ist 2.

wrap

Gibt an, wie das Kontrollfeld Text umbricht. Die Werte sind soft (der Standardwert), was bedeutet, dass der übermittelte Text nicht umbrochen wird, aber der im Browser angezeigte Text umbrochen wird; hard (das cols-Attribut muss beim Verwenden dieses Wertes angegeben werden), was bedeutet, dass sowohl der übermittelte als auch der angezeigte Text umbrochen werden, und off, was das Umbruchverfahren stoppt.

Die Möglichkeit, eine <textarea> zu ändern, wird mit der CSS-resize-Eigenschaft gesteuert. Die möglichen Werte sind:

• both: Der Standardwert — erlaubt sowohl horizontales als auch vertikales Ändern der Größe.
• horizontal: Erlaubt nur horizontales Ändern der Größe.
• vertical: Erlaubt nur vertikales Ändern der Größe.
• none: Erlaubt keine Größenänderung.
• block und inline: Experimentelle Werte, die das Ändern der Größe nur in der block- oder inline-Richtung zulassen (dies variiert je nach Richtung Ihres Textes; lesen Sie Handhabung unterschiedlicher Textrichtungen, wenn Sie mehr erfahren möchten).

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

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: das Auswahlfeld und das Autovervollständigungsfeld. Die Interaktion ist bei beiden Arten 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 Auswahlfeld wird mit einem <select>-Element erstellt, das ein oder mehrere <option>-Elemente als Kinder enthält, von denen jedes einen 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 Auswahlfeld mithilfe des selected-Attributs im gewünschten <option>-Element festgelegt werden — diese Option ist dann bereits ausgewählt, wenn die Seite geladen wird.

Verwendung von optgroup

Die <option>-Elemente können in <optgroup>-Elemente verschachtelt werden, um visuell zugeordnete 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 hebt sie normalerweise visuell von den Optionen ab (d.h. durch Fettdruck und auf einer anderen Verschachtelungsebene), damit sie weniger wahrscheinlich mit tatsächlichen Optionen verwechselt werden.

Verwendung des Value-Attributs

Wenn ein <option>-Element ein explizites value-Attribut gesetzt hat, wird dieser Wert gesendet, wenn das Formular mit dieser Option abgeschickt 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, aber es könnte sein, dass Sie einen Grund haben, einen gekürzten oder anderen Wert an den Server zu senden als den, der visuell im Auswahlfeld 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 Auswahlfeldes ausreichend, um einen einzelnen Wert anzuzeigen. Das optionale size-Attribut bietet eine Steuerung darüber, wie viele Optionen sichtbar sind, wenn das Auswahlfeld nicht den Fokus hat.

Standardmäßig lässt ein Auswahlfeld nur die Auswahl eines einzigen Wertes zu. Durch Hinzufügen des multiple-Attributs zum <select>-Element können Benutzer mehrere Werte auswählen. Benutzer können mehrere Werte durch das von ihrem Betriebssystem bereitgestellte Standardmechanismus auswählen (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 Formularelemente bereitstellen, indem Sie das <datalist>-Element mit untergeordneten <option>-Elementen verwenden, um die anzuzeigenden Werte festzulegen. Das <datalist> muss mit einer id versehen werden.

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

Sobald eine Datenliste mit einem Formularelement verbunden ist, werden deren Optionen verwendet, um den vom Benutzer eingegebenen Text automatisch zu vervollständigen; typischerweise wird dies dem Benutzer als Dropdown-Box angezeigt, die mögliche Übereinstimmungen für das, was er in das Eingabefeld getippt hat, auflistet.

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 Verwendungen von Datenlisten

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

Zum Beispiel wird in Browsern, die <datalist> bei range-Eingabetypen unterstützen, über dem Schieberegler für jeden Datenlisten-<option>-Wert ein kleiner Markierungsstrich angezeigt. Sie können eine Implementierung Beispiel hierfür 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 dennoch die vollständige Farbpalette verfügbar ist.

In diesem Fall verhalten sich verschiedene Browser unterschiedlich, daher sollten Sie solche Anwendungen als progressive Verbesserung betrachten und sicherstellen, dass sie elegant zurückstufen.

Es gibt einige andere Formulareigenschaften, die nicht so offensichtlich sind wie die, die wir bereits erwähnt haben, aber dennoch in einigen Situationen nützlich sind. Daher dachten wir, es wäre wertvoll, sie kurz zu erwähnen.

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

Zähler

Ein Zählerbalken repräsentiert einen festen Wert innerhalb eines durch max und min begrenzten Bereiches. 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 low und high Werte teilen den Bereich in die folgenden drei Teile:

  • Der untere Teil des Bereiches liegt zwischen den min und low Werten, einschließlich.
  • Der mittlere Teil des Bereiches liegt zwischen den low und high Werten, ausschließlich.
  • Der höhere Teil des Bereiches liegt zwischen den high und max Werten, einschließlich.

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

  • Wenn der optimum Wert im unteren Teil des Bereiches liegt, wird der untere Bereich als der bevorzugte Teil betrachtet, der mittlere Bereich als der durchschnittliche Teil und der höhere Bereich als der schlechteste Teil.
  • Wenn der optimum Wert im mittleren Teil des Bereiches liegt, wird der untere Bereich als durchschnittlicher Teil betrachtet, der mittlere Bereich als der bevorzugte und der höhere Bereich ebenfalls als durchschnittlich betrachtet.
  • Wenn der optimum Wert im oberen Teil des Bereiches liegt, wird der untere Bereich als der schlechteste Teil betrachtet, der mittlere Bereich als der durchschnittliche und der höhere Bereich als der bevorzugte Teil.

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

• Wenn der aktuelle Wert im bevorzugten Bereich liegt, ist die Leiste grün.
• Wenn der aktuelle Wert im durchschnittlichen Bereich liegt, ist die Leiste gelb.
• Wenn der aktuelle Wert im schlechtesten Bereich liegt, ist die Leiste rot.

Ein solcher Balken wird mit dem <meter>-Element erstellt. Dies dient zur Implementierung jeder Art von Zähler; zum Beispiel eine Balkenanzeige, die den gesamten genutzten Speicherplatz auf einer Festplatte anzeigt und rot wird, wenn sie sich füllt.

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

Der Inhalt innerhalb des <meter>-Elements ist ein Ersatz für Browser, die das Element nicht unterstützen, und für assistive Technologien, um es zu verlautbaren.

Fortschritt

Ein Fortschrittsbalken stellt einen Wert dar, der sich über die Zeit bis zu einem durch das max-Attribut angegebenen Maximalwert ändert. Ein solcher Balken wird mit dem <progress>-Element erstellt.

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

Dies dient zur Implementierung von allem, was eine Fortschrittsanzeige erfordert, wie beispielsweise den Prozentsatz der heruntergeladenen Dateien oder die Anzahl der beantworteten Fragen in einem Fragebogen.

Der Inhalt innerhalb des <progress>-Elements ist ein Ersatz für Browser, die das Element nicht unterstützen, und für Bildschirmlesegeräte, um es zu verlautbaren.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren — siehe Testen Sie Ihr Wissen: Andere Steuerelemente.

Wie Sie in den letzten Artikeln gesehen haben, gibt es viele Arten von Formularelementen. Sie müssen sich nicht alle diese Details auf einmal merken und können so oft wie nötig zu diesen Artikeln zurückkehren, um Details zu überprüfen.

Jetzt, da Sie die HTML-Struktur der verschiedenen verfügbaren Formularelemente verstanden haben, werden wir uns ansehen, wie man sie stilisiert.

• Zurück
• Übersicht: Webformulare
• Weiter