HTML-Formulare

#Vorlesung #Webbasierte #Systeme an der #Technischen #Hochschule #Mannheim

HTML-Formulare

In diesem Kapitel geht es um HTML5-Formulare, die Nutzereingaben erfassen und an einen Server übermitteln können. Alle Formularelemente, die verschickt werden sollen, müssen sich im Element form befinden. Das Attribut action gibt die URL an, an die beim Klicken auf den Senden-Button (Submit) die Daten gesendet werden, wodurch ein HTTP-Request ausgelöst wird. Über das Attribut method wird festgelegt, ob die Übertragung per GET (Standard) oder POST erfolgen soll. Während GET die Daten sichtbar an die URL anhängt, werden sie bei POST im Nachrichtentext übertragen.

Input-Elemente dienen zur Eingabe verschiedener Werte. Es gibt mehrere Typen von Buttons: type „button“ löst clientseitige Aktionen aus, type „submit“ sendet das Formular ab, type „reset“ setzt alle Eingaben zurück. Für einfache Texteingaben nutzt man input mit type „text“. Für Passwörter verwendet man input mit type „password“, wobei die Eingabezeichen durch Platzhalter wie Sternchen verdeckt werden. Trotz verdeckter Anzeige werden Passwörter beim Standard-HTTP-Protokoll aber unverschlüsselt übertragen – Schutz vor Auslesen besteht also erst mit HTTPS.

Dropdown-Auswahllisten erstellt man mit dem select-Element und mehreren option-Elementen. Damit kann genau ein Wert aus einer Liste ausgewählt werden. Mit dem Attribut selected legt man eine Vorauswahl fest. Die gewählte Option wird zusammen mit dem Namen des Feldes an den Server übermittelt.

Für spezielle Eingaben bietet HTML5 viele neue Typen: Mit input type „search“ kann ein Suchfeld erstellt werden. input type „tel“ ist für Telefonnummern vorgesehen, input type „email“ für E-Mail-Adressen und input type „url“ für Webadressen. In modernen Browsern helfen diese Typen, die Eingabe zu überprüfen oder eine passende Bildschirmtastatur einzublenden. Mit input type „hidden“ können unsichtbare Felder im Formular angelegt werden – deren Werte werden ebenfalls übertragen.

Für Zahlen gibt es input type „number“ mit den Attributen min, max, step und value. Damit kann der Benutzer Zahlen in festgelegten Bereichen auswählen oder eingeben. Mit input type „range“ wird ein Schieberegler erzeugt, dessen Wertebereich und Schrittweite ebenfalls konfigurierbar sind. Für Datums- und Zeitangaben bieten sich input type „date“ und input type „datetime-local“ an. Die Eingabefelder zeigen je nach Gerät und Browser passende Kalender- oder Zeit-Widgets an.

Textarea ist ein mehrzeiliges Eingabefeld für längere Texte, etwa Kommentare. Die Attribute name, rows und cols bestimmen Namen, Höhe und Breite des Feldes. Mit readonly lässt sich ein Feld als nicht editierbar markieren.

Radio-Buttons sind Auswahlfelder, bei denen innerhalb einer Gruppe (gleicher Name) nur eine Option ausgewählt werden kann. Das Attribut value bestimmt, welcher Wert übermittelt wird, checked setzt eine Vorauswahl. Checkboxen erlauben dem Benutzer, mehrere unabhängige Optionen zu wählen; ihre Werte werden beim Absenden als Array übertragen.

Zur Barrierefreiheit sollten alle Formulare ausreichend beschriftet werden. Das Element label verknüpft eine Textbeschreibung mit dem jeweiligen Eingabefeld, was die Bedienung verbessert und die anklickbare Fläche vergrößert. Mit fieldset können Formularabschnitte gruppiert und mit legend beschriftet werden; so entsteht ein optisch und semantisch gegliedertes Formular, das auch für Nutzer mit Hilfsmitteln leichter bedienbar ist. fieldset kann zudem Attribute wie disabled oder form erhalten, um Gruppen gezielt zu steuern oder sie einem bestimmten Formular zuzuordnen.

Abschließend empfiehlt es sich, immer auf korrekte Struktur, vollständige Labels und sinnvolle Gruppierungen zu achten, um die Usability und Zugänglichkeit von HTML-Formularen sicherzustellen. Die gesamte Darstellung und Anordnung der Formularelemente kann schließlich per CSS frei gestaltet werden.

Видео HTML-Formulare канала Informatik-Grundlagen mit Frank Dopatka