Formulare in HTML zu gestalten ist langweilig. Das ist zwar richtig, hilft aber nichts. Sie sind in nahezu allen Businessapplikationen vorhanden, in denen Nutzerdaten erfasst werden. Die Möglichkeiten der Formularauszeichnung mit HTML5 haben gegenüber früheren Versionen enorm zugelegt. So wird das Thema wenigstens aus technischer Sicht etwas spannender. Wir haben diese Möglichkeiten anhand von Beispielen zusammengestellt.
Quell; entwickler.de
Die Schreiber des Artikel haben auf einige wichtig Merkmale aufmerksam gemacht, hier geben Sie noch den folgenden Rat.
Wir haben Ihnen jetzt die wichtigsten HTML-Elemente zur Definition von Formularen vorgestellt. Bitte beherzigen Sie dabei folgende technische Grundsätze:
- Definition: In HTML werden die Formularelemente definiert. Wenn möglich werden hier über Attribute, z. B. required (Eingabe zwingend) oder min/max (Wertebereich definieren), die Grundlagen der Datenvalidierung gelegt
- Styling: Das erfolgt ausschließlich in CSS. Gruppierende Elemente in HTML wie <fieldset> dienen ausschließlich der logischen Strukturierung
- Datenvalidierung und Verarbeitung im Client: Greifen Sie mittels JavaScript auf den DOM-Baum der Webseite zu und lesen Sie die Daten direkt aus den Formularfeldern aus
- Übermittlung zum Server: Die Daten des Formulars werden mittels POST oder GET an den Server übermittelt und können dann dort zum Beispiel mit PHP verarbeitet werden
Hier noch einige Attribute für das <input> Feld
Das HTML-Element <input> bietet eine Reihe von Optionen, die man über das Attribut type anpassen kann. Tabelle 1 gibt Ihnen einen Überblick.
<label for="nachname">Der Nachname:</label>
<input type="text" name="nachname" maxlength="35" size="45" placeholder="Nachname" />
Wert des Attributs type im <input>-Tag | Beschreibung |
---|---|
text | einzeiliges Textfeld |
submit/reset/button | erzeugt einen Abbrechen-/Reset-/sonstigen Button |
password | einzeiliges Textfeld mit verdeckter Eingabe (*****) |
checkbox | Checkboxen als Eingabefelder |
color | Auswahldialog für Farben |
datetime | Auswahl von Datum, Uhrzeit und Zeitzone |
Erfassung einer E-Mail-Adresse | |
file | ermöglicht einen Dateiupload, i. d. R. über eine eigene Schaltfläche |
month | Eingabe von Monat und Jahr |
number | Textfeld für Zahlen |
range | Textfeld für Zahlen; Begrenzung auf einen Bereich |
radio | Definition von Radiobuttons |
search | Suchfeld |
tel | Eingabefeld für Telefonnummern |
time | Eingabe der Uhrzeit |
url | Erfassung der URL |
week | Eingabefeld von Jahr und Kalenderwoche |