HTML: Formulare - Felder

Felder dienen zu Eingabe von Daten, Texten und sonstigem. Im Vergleich zum Papier-Formular stellen sie z.B. ein Feld für den Namen, ein Feld für einen Text oder Felder für ander Dinge dar.

Einzeiliges Textfeld

Ein einzeiliges Textfeld wird mit dem input-Element notiert. Da mit dem input-Element verschiedene Arten von Textfeldern darstellen werden können wird zusätzlich die Angabe des Attributes type erwartet. Als Wert wird hier Text eingegeben, damit handelt es sich um ein Textfeld. Beispiel:

<form action="mailto:name@name.de">
<input name="Eingabefeld" type="text">
</form>

Bitte beachten Sie, dass jedes Feld einen Namen enthalten muss. Der Name des Feldes wird im Wert des name-Attributs notiert. Ebenfalls zu beachten ist, dass das input-Element keinen beendenden Tag erhalten muss. Er kan weggelassen werden.

Standardwerte

Ein Standardwert, also die vorherige Angabe des Inhalts eines Textfeldes, können sie mit dem value-Attribut vornehmen. Im diesem Attribut wird gespeichert, was im jeweiligen Textfeld steht. Beispiel:

<form action="mailto:name@name.de">
 <input value="max@mustermann.org" name="Namenfeld"
        type="text">
</form>

Platzhalter

Mit dem Attribut placeholder kann man einen Wert angeben, der angezeigt wird, wenn noch keine Eingabe erfolgt ist. Beispiel:

<form action="mailto:name@name.de">
 <input placeholder="Ihre E-Mail Adresse" name="Namenfeld"
        type="text">
</form>

Feldlänge

Die Länge des jeweiligen Textfeldes bestimmt man mit dem size-Attribut. Als Wert kann hier jede (ganze) Zahl notiert werden. Beispiel:

<form action="mailto:name@name.de">
 <input size="20" name="Feld1" type="text">
 <input size="3" name="Feld2" type="text">
</form>

Maximale Länge

Die maximale (Zeichen-)Länge für den Inhalt von Textfeldern können Sie mit dem maxlength-Attribut festlegen. Als Wert kann hier jede (ganze) Zahl notiert werden. Beispiel:

<form action="mailto:name@name.de">
 <input maxlength="10" value="Sie koennen 10 Buchstaben eingeben"
        name="Namenfeld1" type="text">
 <input maxlength="34" value="Sie koennen 34 Buchstaben eingeben" 
        name="Namenfeld2" type="text">
</form>

Passwortfeld

Felder für die Eingabe von Passwörtern notierenn sie ebenfalls mit dem input-Element, allerdings benutzt man hierzu nicht den Wert Text des type-Attributs sondern den Wert Password. Bei Passwortfeldern werden bei der Eingabe keine Buchstaben oder Zahlen angeziegt sondern nur jeweils ein Sternchen (*) pro eingegebener Buchstabe/Zahl. Beispiel:

Ebenso wie bei Textfeldern ist auch bei Passwortfeldern die Angabe der Feldlänge, maximalen Zeichenlänge und des Namens möglich.

Mehrzeilige Textfelder

Textfelder die mehrere Zeilen groß sind notiert man mit dem textarea-Element. Beispiel:

<form action="mailto:nam@name.de">
 <textarea name="mehrzeiligesTextfeld" cols="30" rows="3">
  ... Text ...
 </textarea>
</form>

Die Vorbeschriftung von mehrzeiligen Textfeldern erfolgt durch die Eingabe von Text innerhalb des textarea-Elements.

Um die Größe eines mehrzeiligen Textfeldes anzugeben benutzt man die Attribute rows und cols. rows gibt die Höhe in Zeilen an - cols die Breite in Zeichen.

Automatischer Zeilenumbruch

Bei mehrzeiligen Textfeldern können sie einstellen, ob Text automatisch auf die nächste Zeile umgebrochen werden soll oder erst durch einfügen es Umbruchs (Enter-/Return-Taste oder im Quelltext mit n). Notieren Sie dies mit dem wrap-Attribut. Als Werte sind hier virtual (automatisch umgebrochen aber beim Absenden werden diese Umbrüche nicht mitgesendet), physical (automatisch umgebrochen und beim Absenden werden diese Umbrüche mitgesendet) und off (kein Umbruch - Zeile wird verlängert) möglich. Beispiel:

<form action="mailto:nam@name.de">
 <textarea wrap="off" name="mehrzeiligesTextfeld" cols="50"
           rows="5"> </textarea>

	
 <textarea wrap="virtual" name="mehrzeiligesTextfeld" cols="50" 
           rows="5"> </textarea>

	
 <textarea wrap="physical" name="mehrzeiligesTextfeld" cols="50" 
           rows="5"> </textarea>
</form>

Selectfelder

Selectfelder sind Felder, bei denen man aus mehreren festen Möglichkeiten wählen kann. Diese sind besonders dann nützlich, wenn der Besucher nicht einfach eirgendwas eintragen soll, sondern aus den Vorgaben wählen soll.

Selectfelder werden mit dem select-Element definiert. Zusätzlich müssen sie option-Elemente enthalten, welche die Auswahlmöglichkeiten darstellen. Beispiel:

<select>
 <option>Auswahl 1</option>
 <option>Auswahl 2</option>
 <option>Auswahl 3</option>
</select>

Der Text der dabei im option-Element steht wird als Auswahltext angezeigt. Das beendene option-Tag kann eigentlich weggelassen werden, wird hier aber zum besseren Verständniss noch mit dargestellt.

Werte

Beim option-Element ist es möglich, mit Hilfe des value-Attributes, den Wert der Option zu bestimmen. Der Wert des ausgewählten Eintrags wird dann beim Absenden des Formulars als Wert dieses Elements verschickt - alle anderen Werte nicht. Beispiel:

Höhe

Die Höhe eines Selectfeldes können Sie mit dem size-Attribut des select-Elements bestimmen. Geben Sie hierbei die Anzahl der Zeilen an, über die sich das Feld erstrecken soll. Beispiel:

<select size="3">
 <option>Anna</option>
 <option>Berta</option>
 <option>Carolin</option>
</select>

Vordefinierte Auswahl

Bei Selectfeldern ist es, ebenso wie Beispielsweise bei Checkboxen, möglich eine Auswahl im Voraus zu treffen. Hierzu bedient man sich des selected-Attributes. Es erhält keinen Wert und wird in die jeweilige Option eingefügt. Beispiel:

<select size="1">
 <option selected>10</option>
 <option>20</option>
 <option>30</option>
</select>

Mehrere Auswählen

Ebenso wie die Auswahl nur eines Punktes/einer Optin möglich sein kann, kann auch die Möglichkeit bestehen, dass mehrere Optionen gewählt werden können. Hierzu benutzt man das multiple-Attribut des select-Elements. Beispiel:

<select multiple size="3">
 <option selected>Milch</option>
 <option>Eier</option>
 <option>Butter</option>
</select>

Gruppen

Optionen können zu Gruppen zusammengefasst werden. Hierzu verwendet man das optgroup-Element. Beispiel:

<select>
 <optgroup label="Kueche">
  <option>Kuehlschrank</option>
  <option>Tisch</option>
  <option>Toepfe</option>
 </optgroup>
 <optgroup label="Wohnzimmer">
  <option>Fernseher</option>
  <option>Schrankwand</option>
  <option>Kronleuchter</option>
 </optgroup>
</select>

Bitte beachten Sie dabei, dass das label-Attribut anzugeben ist. Es sagt aus, um was es sich handelt. Leider stellt noch kein Browser diese Gruppen korrekt dar. Sollte es irgendwann doch dargestellt werden können, dann könnte dies in etwa so aussehen:

Darstellung: Mögliche Darstellung des optgroup-Elements

Nur Lesen und Ausgeschaltet

Alle drei Formen von Textfeldern können auf einen 'Nur-Lesen' Status gesetzt werden. Dadurch ist es einem Besucher nicht möglich etwas in ein Textfeld zu schreiben. Dieser Status wird erreicht, indem das readonly-Attribut notiert wird. Beispiel:

<form action="mailto:name@name.de"
 <input name="Feld1" type="text" readonly value="Nur Lesen">

	
 <textarea name="Feld2" cols="30" rows="3" readonly>
 ... Text ...
 </textarea>

	
 <select>
  <optgroup disabled label="Obst">
   <option>Banane</option>
   <option>Apfel</option>
   <option>Weintrauben</option>
  </optgroup>
  <optgroup label="Gemüse">
   <option>Erbsen</option>
   <option>Krotten</option>
   <option disabled>Apfel</option>
  </optgroup>
 </select> 

	
</form>

Bitte beachten Sie, dass auch Passwortfelder einen 'Nur-Lesen' Status erhalten können. Da dies jedoch unnötig ist, ist dies hier nicht als Beispiel aufgeführt. Bitte beachten Sie auch, dass das readonly-Attribut keinen Wert erhält.

Ebenso wie Sie diese Felder auf 'Nur-Lesen' setzten können können Sie sie auch 'ausschalten'. Dies geschieht mit dem disabled-Attribut. Es hat wie das readonly-Attribut keine Werte und kann bei allen drei Formen angewandt werden.

Formularfeld

Mit dem fieldset-Element lassen sich Formulare mit einem Rahmen umschließen. Diese dienen der optischen Unterstützung, quasi als Vermerk, dass es sich um ein Formular handelt. Sie können aber auch ohne Formular jederzeit eingesetzt werden. Beispiel:

<fieldset>
 <legend>Formular</legend>
 ...
 <input type="text">
 <input type="submit">
 ... usw. ...
</fieldset>

In diesem Zusammenhang kann auch das legend-Element verwendet werden. In diesem wird notiert, was als Überschrift in das Formularfeld eingefügt werden soll. Zusätzlich sind auch Textformatierungen möglich. Beispiel:

<fieldset>
 <legend><b>Bitte ausfüllen</b></legend>
 ...
</fieldset>

Bezeichnung

Mit dem label-Element, können Sie den Formularelementen Bezeichnungen zuweisen. Dies kann auf zwei Arten geschehen:

Mit Hilfe des for-Attributes

Es wird Beschreibungstext in das label-Element eingeschlossen und mit dem for-Attribut verweist man auf das entsprechende andere Formularelement welches die jeweilige ID zugewiesen bekommen hat. Beispiel:

<label for="vorname">Ihr Vorname</label>
<input type="text" id="vorname">

	
<label for="text">Ihr Text</label>
<textarea cols="30" rows="3" id="text">
</textarea>

Durch Umschließen des Gesamten

Es werden Beschreibungstext und das Element, welches beschrieben wird vom label-Element umschlossen. Beispiel:

<label>
 Ihr Vorname
 <input type="text">
</label>

	
<label>
 Ihr Text
 <textarea cols="30" rows="3">
 </textarea>
</label>

Unsichtbare Elemente

Manchmal ist es notwendig unsichtbare Formularelemente zu verwenden, um nicht die Gestaltung und das aussehen der Seite zu 'gefährden'. In unsichtbaren Feldern können, ebenso wie in normalen Feldern, Buchstaben und Zeichen gespeichert werden. Diese Elemente werden mit dem input-Element definiert und bekommen zusätzlich das Attribut type mit dem Wert hidden zugewiesen. Beispiel:

<form>
 <input type="hidden" value="Browsername">
 <input type="hidden" value="Text">
 ...
</form>

E-Mail Feld

Durch die Benutzung des E-Mail Feldes ist es möglich, E-Mail adressen automatisch zu befüllen und bereits vorzuvalidieren. Außerdem wird auf Smartphones in der Tastatur bereits ein @-Zeichen hinterlegt.

<input type="email" />

Datum auswählen

Es gibt mittlerweile auch die Möglichkeit ein Datum oder ein Datum mit Uhrzeit auszuwählen. Das geht über die Types date,datetime und datetime-local.

Weitere Möglichkeiten seit HTML5

Diese Typen kann man durch HTML5 in das type-Attribut des input-Tags schreiben

color: Farbauswahl
month: Monatsauswahl
week: Monatswauswahl
number: Zahlenauswahl
range: Zahlenbereitch
tel: Telefonnummern
url

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Formulare – Buttons und Boxen

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project