Weitere Formularsteuerungen

Ein mehrzeiliges Textfeld wird mit einem <textarea>-Element definiert, anstatt mit dem <input>-Element.

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

So wird es dargestellt:

Der Hauptunterschied zwischen einem <textarea> und einem regulären einzeiligen Textfeld ist, dass Benutzer harte Zeilenumbrüche (d.h. durch Drücken der Eingabetaste) einfügen können, die bei der Dateneinreichung enthalten bleiben.

<textarea> benötigt auch ein Abschluss-Tag; jeder Standardtext, den Sie enthalten möchten, sollte zwischen den Öffnungs- und Schlussetiketten platziert werden. Im Gegensatz dazu ist das <input> ein void element ohne Abschluss-Tag – jeder Standardwert wird innerhalb des value-Attributs gesetzt.

Beachten Sie, dass Sie zwar alles in einem <textarea>-Element (einschließlich anderer HTML-Elemente, CSS und JavaScript) einfügen können, es aber aufgrund seiner Natur als reiner Text-Inhalt gerendert wird. (Mit contenteditable auf Nicht-Form-Steuerelementen steht eine API zur Verfügung, um HTML/"reichhaltigen" Inhalt anstelle von reinem Text zu erfassen).

Visuell wird der eingegebene Text umbrochen, und das Formular-Steuerelement ist standardmäßig skalierbar. Die meisten Browser bieten einen Ziehgriff, den Sie ziehen können, um die Größe des Textbereichs zu vergrößern/verkleinern.

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

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

cols

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

wrap

Gibt an, wie das Steuerelement Text umbricht. Die Werte sind soft (der Standardwert), was bedeutet, dass der gesendete Text nicht umgebrochen wird, aber der von Browser gerenderte Text umbrochen ist; hard (das cols-Attribut muss bei Verwendung dieses Wertes angegeben werden), was bedeutet, dass sowohl der gesendete als auch der gerenderte Text umbrochen werden. off stoppt das Umbruchverhalten.

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

• both: Der Standard – ermöglicht das horizontale und vertikale Skalieren.
• horizontal: Ermöglicht nur das horizontale Skalieren.
• vertical: Ermöglicht nur das vertikale Skalieren.
• none: Ermöglicht kein Skalieren.
• block und inline: Experimentelle Werte, die nur das Skalieren in der block- oder inline-Richtung erlauben (dies variiert je nach Textgerichtetheit; lesen Sie Handling different text directions, wenn Sie mehr erfahren möchten).

Experimentieren Sie mit dem interaktiven Beispiel oben auf der resize-Referenzseite für eine Demonstration, wie diese funktionieren.

Drop-down-Steuerelemente sind eine einfache Möglichkeit, Benutzern das Auswählen aus vielen Optionen zu ermöglichen, ohne viel Platz in der Benutzeroberfläche einzunehmen. HTML hat zwei Arten von Drop-down-Steuerelementen: das Auswahlfeld und das Autovervollständigungsfeld. Die Interaktion ist bei beiden Arten von Drop-down-Steuerelementen gleich – nach der Aktivierung des Steuerelements 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 mit dem selected-Attribut auf dem gewünschten <option>-Element gesetzt werden – diese Option wird dann beim Laden der Seite vorausgewählt.

Verwendung von optgroup

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

Im <optgroup>-Element wird der Wert des label-Attributs vor den Werten der verschachtelten Optionen angezeigt. Der Browser hebt sie in der Regel visuell von den Optionen ab (d.h. fett gedruckt und auf einer anderen Verschachtelungsebene), damit sie weniger wahrscheinlich für tatsächliche Optionen gehalten werden.

Verwendung des value-Attributs

Wenn ein <option>-Element ein explizit gesetztes value-Attribut hat, wird dieser Wert gesendet, wenn das Formular mit dieser ausgewählten Option eingereicht wird. Wenn das value-Attribut weggelassen wird, wie in den obigen Beispielen, wird der Inhalt des <option>-Elements als Wert verwendet. value-Attribute sind daher nicht erforderlich, aber es könnte Gründe geben, einen verkü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 Auswahlfelds so eingestellt, dass sie einen einzigen Wert anzeigt. Das optionale size-Attribut bietet die Kontrolle darüber, wie viele Optionen sichtbar sind, wenn das Auswahlfeld nicht im Fokus steht.

Standardmäßig lässt ein Auswahlfeld nur die Auswahl eines Wertes zu. Durch Hinzufügen des multiple-Attributs zu dem <select>-Element kann man es zulassen, dass Benutzer mehrere Werte auswählen. Benutzer können mehrere Werte auswählen, indem sie den Standardmechanismus des Betriebssystems verwenden (z. B. können auf dem Desktop mehrere Werte angeklickt werden, während die Cmd/Strg-Tasten gedrückt gehalten 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 Kinder-<option>-Elementen verwenden, um die anzuzeigenden Werte anzugeben. Das <datalist> muss eine id erhalten.

Die Datenliste wird dann über das list-Attribut, dessen Wert die id der zu bindenden Datenliste ist, mit einem <input>-Element (z. B. ein text- oder email-Eingabetyp) verbunden.

Sobald eine Datenliste einem Formular-Widget zugeordnet ist, werden ihre Optionen verwendet, um den vom Benutzer eingegebenen Text automatisch zu vervollständigen; typischerweise wird dies dem Benutzer als ein Drop-down-Feld mit möglichen Übereinstimmungen für das, was er in das Eingabefeld eingegeben 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 Verwendungen von datalist

Nach 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 ein bisschen nicht offensichtlich erscheinen.

Zum Beispiel wird bei Browsern, die <datalist> für range-Eingabetypen unterstützen, eine kleine Markierung über dem Bereich für jeden <option>-Wert der Datenliste angezeigt. Sie können eine Implementierung Beispiel davon auf der <input type="range">-Referenzseite sehen.

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

In diesem Fall verhalten sich verschiedene Browser in verschiedenen Fällen unterschiedlich, daher sollten solche Verwendungen als progressive Verbesserung betrachtet werden, und es sollte sichergestellt werden, dass sie problemlos degradieren.

Es gibt noch einige weitere Formularfunktionen, 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 es wert, ihnen einen kurzen Hinweis zu geben.

Messgeräte und Fortschrittsbalken sind visuelle Darstellungen numerischer Werte. Unterstützung für <progress> und <meter> ist in allen modernen Browsern verfügbar.

Messgerät

Eine Messlatte stellt einen festen Wert in einem Bereich dar, der durch max und min-Werte begrenzt ist. Dieser Wert wird visuell als Leiste gerendert, und um zu wissen, wie diese Leiste 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 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. Zusammen mit den low und high Werten wird definiert, welcher Teil des Bereichs bevorzugt ist:

  • Wenn der optimum-Wert im unteren Teil des Bereichs liegt, wird der untere Bereich als der bevorzugte Teil angesehen, der mittlere Bereich als durchschnittlicher Teil und der obere Bereich als der schlechteste Teil betrachtet.
  • Wenn der optimum-Wert im mittleren Teil des Bereichs liegt, wird der untere Bereich als durchschnittlicher Teil angesehen, der mittlere Bereich als der bevorzugte Teil und der obere Bereich ebenfalls als durchschnittlich angesehen.
  • Wenn der optimum-Wert im oberen Teil des Bereichs liegt, wird der untere Bereich als der schlechteste Teil angesehen, der mittlere Bereich als durchschnittlicher Teil und der obere Bereich als der bevorzugte 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 die Leiste grün.
• Wenn der aktuelle Wert im durchschnittlichen Teil des Bereichs liegt, ist die Leiste gelb.
• Wenn der aktuelle Wert im schlechtesten Teil des Bereichs liegt, ist die Leiste rot.

Eine solche Leiste wird durch Verwenden des <meter>-Elements erstellt. Dies ist für die Implementierung jeder Art von Messgerät, zum Beispiel einer Leiste, die den Gesamtspeicherplatz auf einer Festplatte anzeigt, die rot wird, wenn sie voll wird.

<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 zum Vorlesen.

Fortschritt

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

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

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

Der Inhalt innerhalb des <progress>-Elements ist ein Fallback für Browser, die das Element nicht unterstützen, und für Bildschirmlesegeräte zum Vorlesen.

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 fortfahren — siehe Testen Sie Ihr Wissen: Andere Steuerungen.

Wie Sie in den letzten Artikeln gesehen haben, gibt es viele Arten von Formularsteuerungen. Sie müssen nicht alle diese Details auf einmal im Kopf behalten und können zu diesen Artikeln zurückkehren, so oft Sie möchten, um Details zu überprüfen.

Jetzt, da Sie ein Verständnis des HTMLs hinter den verschiedenen verfügbaren Formularsteuerungen haben, werden wir uns mit deren Gestaltung befassen.

• Zurück
• Übersicht: Webformulare
• Weiter