• Zurück
• Übersicht: Webformulare
• Weiter

Wir schauen uns jetzt die Funktionalität von nicht-<input> Formular-Elementen im Detail an, von anderen Steuerelementtypen wie Dropdown-Listen und mehrzeiligen Textfeldern bis hin zu weiteren nützlichen Formularfunktionen wie dem<output>-Element (das wir im vorherigen Artikel in Aktion gesehen haben) und Fortschrittsbalken.

Mehrzeilige Textfelder

Ein mehrzeiliges Textfeld wird mit einem<textarea>-Element angegeben, statt mit dem<input>-Element.

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

Dies wird wie folgt dargestellt:

Der Hauptunterschied zwischen einem<textarea> und einem normalen einzeiligen Textfeld besteht darin, dass Benutzer harte Zeilenumbrüche einfügen können (d.h. 'Return' drücken), die beim Absenden der Daten enthalten sind.

<textarea> erfordert auch einen schließenden Tag; jeglicher Standardtext, den Sie enthalten möchten, sollte zwischen den öffnenden und schließenden Tags eingefügt werden. Im Gegensatz dazu ist das<input> einvoid element ohne schließenden Tag — ein Standardwert wird imvalue-Attribut angegeben.

Beachten Sie, dass Sie zwar in ein<textarea>-Element alles einfügen können (einschließlich anderer HTML-Elemente, CSS und JavaScript), aufgrund seiner Natur wird dies alles als reiner Textinhalt gerendert. (Die Verwendung voncontenteditable auf Nicht-Formularsteuerungen bietet eine API zum Erfassen von HTML/"reichhaltigem" Inhalt anstelle von reinem Text).

Visuell wird der eingegebene Text umgebrochen und das Steuerelement kann standardmäßig in der Größe angepasst werden. Die meisten Browser bieten einen Ziehgriff, den Sie ziehen können, um die Größe des Textbereichs zu vergrößern oder zu verkleinern.

Ein Beispiel für die Verwendung eines Textbereichs finden Sie inunserem Beispiel, das wir im ersten Artikel zusammengestellt haben.

Steuerung des mehrzeiligen Renderings

<textarea> akzeptiert drei Attribute zur Steuerung seines Renderings über mehrere Zeilen:

cols

Gibt die sichtbare Breite (Spalten) des Text-Steuerelements an, gemessen in durchschnittlichen Zeichenbreiten. Dies ist effektiv die Anfangsbreite, da sie durch Anpassen der Größe des<textarea> verändert und mittels CSS überschrieben werden kann. Der Standardwert, wenn keiner angegeben ist, beträgt 20.

rows

Gibt die Anzahl der sichtbaren Textzeilen für das Steuerelement an. Dies ist effektiv die Anfangshöhe, da sie durch Anpassen der Größe des<textarea> verändert und mittels CSS überschrieben werden kann. Der Standardwert, wenn keiner angegeben ist, beträgt 2.

wrap

Gibt an, wie das Steuerelement Text umbricht. Die Werte sindsoft (der Standardwert), was bedeutet, dass der gesendete Text nicht umbrochen wird, aber der vom Browser angezeigte Text umgebrochen wird;hard (dascols-Attribut muss bei Verwendung dieses Wertes angegeben werden), was bedeutet, dass sowohl der gesendete als auch der angezeigte Text umbrochen werden, undoff, was den Umbruch stoppt.

Steuerung der Änderungen der Größe des Textbereichs

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

• both: Der Standardwert — erlaubt das Ändern der Größe sowohl horizontal als auch vertikal.
• horizontal: Ermöglicht das Ändern der Größe nur horizontal.
• vertical: Ermöglicht das Ändern der Größe nur vertikal.
• none: Ermöglicht keine Größenänderung.
• block undinline: Experimentelle Werte, die eine Größenänderung nur in derblock oderinline Richtung erlauben (dies variiert je nach der Richtung des Textes; lesen SieUmgang mit verschiedenen Textrichtungen, wenn Sie mehr erfahren möchten).

Spielen Sie mit dem interaktiven Beispiel oben auf derresize-Referenzseite für eine Demonstration, wie diese Werte 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 einzunehmen. HTML verfügt über zwei Arten von Dropdown-Steuerelementen: dieAuswahlliste und dieAutovervollständigungsliste. 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.

Auswahlliste

Eine einfache Auswahlliste wird mit einem<select>-Element erstellt, das ein oder mehrere<option>-Elemente als Kinder hat, von denen jedes eine seiner möglichen Werte angibt.

Einfaches Beispiel

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

Falls erforderlich, kann der Standardwert für die Auswahlliste mit demselected-Attribut auf dem gewünschten<option>-Element festgelegt werden — diese Option ist dann beim Laden der Seite voreingestellt.

Verwendung von optgroup

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

<select 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 deslabel-Attributs vor den Werten der verschachtelten Optionen angezeigt. Der Browser hebt sie normalerweise visuell von den Optionen ab (z.B. durch Fettdruck oder eine andere Verschachtelungsebene), sodass sie weniger wahrscheinlich mit tatsächlichen Optionen verwechselt werden.

Verwendung des value-Attributs

Wenn ein<option>-Element ein explizitesvalue-Attribut hat, wird dieser Wert gesendet, wenn das Formular mit dieser Option als ausgewählt übermittelt wird. Wenn dasvalue-Attribut weggelassen wird, wie in den obigen Beispielen, wird der Inhalt des<option>-Elements als Wert verwendet.value-Attribute sind also nicht nötig, aber Sie können einen Grund finden, einen kürzeren oder anderen Wert an den Server senden zu wollen als den, der in der Auswahlliste angezeigt wird.

Zum Beispiel:

<select 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 Auswahlliste ausreichend, um einen einzigen Wert anzuzeigen. Das optionalesize-Attribut ermöglicht die Kontrolle darüber, wie viele Optionen sichtbar sind, wenn die Auswahlliste nicht im Fokus ist.

Mehrfachauswahlliste

Standardmäßig erlaubt eine Auswahlliste nur die Auswahl eines einzigen Wertes. Durch das Hinzufügen desmultiple-Attributs zum<select>-Element können Sie Benutzern die Auswahl mehrerer Werte ermöglichen. Benutzer können mehrere Werte auswählen, indem sie den Standardmechanismus des Betriebssystems verwenden (z.B. können auf dem Desktop beim Drücken vonCmd/Strg mehrere Werte angeklickt werden).

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

Autovervollständigungsliste

Sie können vorgeschlagene, automatisch ausgefüllte Werte für Formular-Widgets bereitstellen, indem Sie das<datalist>-Element mit untergeordneten<option>-Elementen verwenden, um die anzuzeigenden Werte anzugeben. Das<datalist> muss mit einerid versehen werden.

Die Datenliste wird dann mit einem<input>-Element (z.B. einemtext- oderemail-Eingabetyp) über daslist-Attribut verbunden, dessen Wert dieid der zu verbindenden Datenliste ist.

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

Einfaches Beispiel

Schauen wir uns ein Beispiel an.

<label for="myFruit">What's your favorite fruit?</label><input type="text" name="myFruit" list="mySuggestion" /><datalist>  <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

Lautder HTML-Spezifikation können daslist-Attribut und das<datalist>-Element mit jeder Art von Widget verwendet werden, die eine Benutzereingabe erfordert. Dies führt zu einigen Verwendungen, die ein wenig unoffensichtlich erscheinen mögen.

Zum Beispiel wird in Browsern, die<datalist> beirange-Eingabetypen unterstützen, ein kleiner Häkchenmarkierung über dem Bereich für jeden<option>-Wert der Datenliste angezeigt. Sie können eine ImplementierungBeispiel 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 weiterhin die vollständige Farbpalette verfügbar bleibt.

In diesem Fall verhalten sich verschiedene Browser von Fall zu Fall unterschiedlich, daher sollten Sie solche Verwendungen als progressive Verbesserung betrachten und sicherstellen, dass sie problemlos abfallen.

Andere Formularfunktionen

Es gibt einige andere Formularfunktionen, die nicht so offensichtlich sind wie die, die wir bereits erwähnt haben, aber in manchen Situationen dennoch nützlich sind, sodass wir dachten, es lohne sich, sie kurz zu erwähnen.

Messlatten und Fortschrittsbalken

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

Messlatte

Eine Messlatte stellt einen festen Wert in einem vonmax undmin begrenzten Bereich dar. Dieser Wert wird visuell als Steg gerendert, und um zu wissen, wie dieser Steg aussieht, vergleichen wir den Wert mit einigen anderen festgelegten Werten:

• Dielow- undhigh-Werte teilen den Bereich in die folgenden drei Teile:

  • Der untere Teil des Bereichs liegt zwischen denmin- undlow-Werten, einschließlich.
  • Der mittlere Teil des Bereichs liegt zwischen denlow- undhigh-Werten, ausschließlich.
  • Der höhere Teil des Bereichs liegt zwischen denhigh- undmax-Werten, einschließlich.

• Deroptimum-Wert definiert den optimalen Wert für das<meter>-Element. In Kombination mit denlow- undhigh-Werten wird definiert, welcher Teil des Bereichs bevorzugt wird:

  • Wenn deroptimum-Wert im unteren Teil des Bereichs liegt, wird der untere Bereich als bevorzugter Teil betrachtet, der mittlere Bereich als durchschnittlicher Teil und der höhere Bereich als schlechtester Teil betrachtet.
  • Wenn deroptimum-Wert im mittleren Teil des Bereichs liegt, wird der untere Bereich als durchschnittlicher Teil betrachtet, der mittlere Bereich als bevorzugter Teil und der höhere Bereich ebenfalls als durchschnittlich betrachtet.
  • Wenn deroptimum-Wert im höheren Teil des Bereichs liegt, wird der untere Bereich als schlechtester Teil betrachtet, der mittlere Bereich als durchschnittlicher Teil und der höhere Bereich als bevorzugter Teil betrachtet.

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

• Wenn der aktuelle Wert im bevorzugten Teil des Bereichs liegt, ist der Steg grün.
• Wenn der aktuelle Wert im durchschnittlichen Teil des Bereichs liegt, ist der Steg gelb.
• Wenn der aktuelle Wert im schlechtesten Teil des Bereichs liegt, ist der Steg rot.

Ein solcher Steg wird mit dem<meter>-Element erstellt. Dies dient der Implementierung jeder Art von Messlatte, zum Beispiel einer Leiste, die den gesamten belegten Speicherplatz auf einem Datenträger anzeigt und rot wird, wenn er sich zu füllen beginnt.

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

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

Fortschritt

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

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

Dies dient zur Implementierung von allem, was Fortschrittsberichte erfordert, wie beispielsweise der Prozentsatz der heruntergeladenen Dateien oder die Anzahl der in einem Fragebogen ausgefüllten Fragen.

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

Zusammenfassung

Wie Sie in den letzten Artikeln gesehen haben, gibt es viele Arten von Formular-Steuerelementen. Sie müssen sich nicht sofort alle diese Details merken und können so oft Sie möchten zu diesen Artikeln zurückkehren, um Details nachzuschlagen.

Jetzt, da Sie ein Verständnis der HTML-Struktur der verschiedenen verfügbaren Formular-Steuerelemente haben, sehen wir uns an,wie Sie sie stylen können.

• Zurück
• Übersicht: Webformulare
• Weiter