Formulare in HTMLHypertext Markup Language Die Hypertext Markup Language (HTML, englisch für Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von Metainformationen enthalten, z. B. über die im Text verwendeten Sprachen, den Autor oder den zusammengefassten Inhalt des Textes. HTML wird vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG) weiterentwickelt. Die aktuelle Version ist seit dem 14. Dezember 2017 HTML 5.2, die bereits von vielen aktuellen Webbrowsern und anderen Layout-Engines unterstützt wird. Auch die Extensible Hypertext Markup Language (XHTML) wird durch HTML5 ersetzt. HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren.Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie CSS bestimmt. Ausnahme sind die als veraltet (englisch deprecated) markierten präsentationsbezogenen Elemente. 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 |