Das form-Element und seine Möglichkeiten

Mit dem form-Element wird ein Formular für eine Webseite erstellt. Damit das Formular funktionieren kann, muss das form-Element andere Elemente sogenannte Kind-Elemente, wie z.B. input, aufnehmen.

Der Aufbau des form-Elements

Das form-Element umfasst einen Start-Tag und einen End-Tag.

<form></form>

Im Start-Tag müssen die Attribute action und method untergebracht werden. Mit dem Attribut action wird eine URL (Universal Ressource Locator) verbunden. Und mit dem Attribut method die Methode mit der der Formularinhalt verschickt wird. Standard ist hier GET oder POST. Daneben noch die Methoden PUT und DELETE. Hier werden die Methoden beschrieben [EN].

<form action="thankyou.html" method="POST"></form>

Das label-Element die Beschriftung der Formularfelder

Das label-Element besteht aus einem Start- und End-Tag. Es dient zum beschriften der nachfolgend erläuterten html-Elemente. Es enthält ein Attribut, das for-Attribut. Dieses dient als Verknüpfung zum nachfolgenden Eingabe-Element, wie z.B. dem input-Element.

<label for="user">Name:</label>

Das input-Element und seine Attribute

Das input-Element steht für sich alleine. Mit ihm kann der Inhalt des Formulars manipuliert werden. Damit es funktioniert enthält es Attribute.

  • id
  • type
  • name
  • min
  • max
  • step
  • placeholder
  • value
  • list

Das id-Attribut ist die Verbindung zwischen dem input-Element und dem label-Element.

Die zwei wichtigsten Attribute sind type und name. Mit dem type-Attribut wird die Funktion des Formularfeldes bestummen. Das name-Attribut bestimmt den Namen des mit der form-method übermittelnden Werts. Der Name kann frei gewählt werden.

Folgende Grundfunktionen enthält das type-Attribut:

  • text (Feld zur Eingabe z.B. eines Namens)
  • password (Feld zur Eingabe eines Passworts)
  • number (Feld zur Auswahl einer Zahl)
  • range (Ein Schieber)
  • checkbox (Box zum Abhacken)
  • radio (Kreis zum Auswählen)
  • date (Feld zur Auswahl eines Datums)
  • submit (Button zum Übermitteln)
<input id="user" name="user" type="text" placeholder="Max Muster">
<input id="password" name="password" type="password" placeholder="Passwort">
<input id="number" name="number" type="number" min="1" max="5" step="1">
<input id="range" name="range" type="range" step="1">
<input id="checkbox" name="checkbox" type="checkbox">
<input id="radio" name="radio" type="radio">
<input id="date" name="date" type="date">
<input type="submit" value="senden">

Das datalist-Element und sein Attribut

Das datalist-Element ist sibling zu seinem input-Element. Es besteht aus einem Start- und End-Tag und enthält das Attribut id. Dies verknüpft das input- mit dem datalist-Element. Das die Verknüpfung funktioniert muss im input-Element das for-Attribut gesetzt sein. Zum datalist-Element gehört das Kind-Element option.

<input list="gears" id="gear" name="gear">
<datalist id="gears">
  <option value="xt">Shimano XT</option>
  <option value="deore">Shimano Deore</option>
  <option value="ultegra">Shimano Ultegra</option>
</datalist>

Das option-Element

Wie im obigen Code-Beispiel zu sehen ist, besteht das option-Element aus einem Start- und End-Tag. Und enthält das Attribut value. Es ist Kind-Element von datalist und select. Das select-Element wird im nächsten Abschnitt beschrieben.

Das select-Element erstellt eine Dropdown-Liste

Das select-Element wird zum Erstellen einer Dropdown-Liste verwendet. Es besteht aus einem Start- und End-Tag. Und enthält die Attribute id und name. Damit das select-Element funktioniert, braucht es das Kind-Element option.

<select id="brand" name"brand">
  <option value="mondia">Mondia</option>
  <option value="cilo">Cilo</option>
  <option value="specialized">Specialized</option>
</select>

Zuletzt noch das textarea-Element

Das textarea-Element besteht aus einem Start- und End-Tag. Es enthält wie die vorangegangen beschriebenen Elemente die Attribute id und name. Da es in seiner Grösse verändert werden kann, kommen noch die Attribute rows und cols dazu. Rows beschreibt die Höhe des Textfeldes und cols die Breite.

  • id
  • name
  • rows
  • cols
  • placeholder
<textarea id="textfield" name="textfield" rows="10" cols="30" placeholder="Haben Sie noch Fragen?"></textarea>

Zusammenfassung

Wie oben beschrieben ist ein html-Formular eine recht komplexe Angelegenheit. Es besteht nicht nur aus einem Element, sondern aus vielen einzel Elementen. Und damit es funktioniert, muss eine http-Methode wie GET eingetragen und eine URL-Weiterleitung eingerichtet werden.

Mit diesen letzten Worten möchte ich diesen Beitrag abschliessen. Hier noch ein Link zu einem rudimentären html-Formular.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.