Formulare richtig gestalten

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>-TagBeschreibung
texteinzeiliges Textfeld
submit/reset/buttonerzeugt einen Abbrechen-/Reset-/sonstigen Button
passwordeinzeiliges Textfeld mit verdeckter Eingabe (*****)
checkboxCheckboxen als Eingabefelder
colorAuswahldialog für Farben
datetimeAuswahl von Datum, Uhrzeit und Zeitzone
emailErfassung einer E-Mail-Adresse
fileermöglicht einen Dateiupload, i. d. R. über eine eigene Schaltfläche
monthEingabe von Monat und Jahr
numberTextfeld für Zahlen
rangeTextfeld für Zahlen; Begrenzung auf einen Bereich
radioDefinition von Radiobuttons
searchSuchfeld
telEingabefeld für Telefonnummern
timeEingabe der Uhrzeit
urlErfassung der URL
weekEingabefeld von Jahr und Kalenderwoche