Webformulare

Dieses Modul bietet eine Reihe von Artikeln, die Ihnen helfen, die Grundlagen von Webformularen zu meistern. Webformulare sind ein sehr leistungsfähiges Werkzeug zur Interaktion mit Benutzern – am häufigsten werden sie zum Sammeln von Daten von Benutzern oder zur Steuerung einer Benutzeroberfläche eingesetzt. Aus historischen und technischen Gründen ist es jedoch nicht immer offensichtlich, wie man sie optimal nutzt. In den unten aufgeführten Artikeln behandeln wir alle wesentlichen Aspekte von Webformularen, einschließlich der Auszeichnung ihrer HTML-Struktur, der Gestaltung von Formularelementen, der Validierung von Formulardaten und des Sendens von Daten an den Server.

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, sollten Sie zumindest unsere Einführung in HTML durchgearbeitet haben. An diesem Punkt sollten die Einführungstutorials leicht verständlich sein, und Sie sollten auch in der Lage sein, unser Tutorial zu Grundlegenden nativen Formularelementen zu nutzen.

Das Meistern von Formularen erfordert jedoch mehr als nur HTML-Kenntnisse — Sie müssen auch einige spezielle Techniken lernen, um Formularelemente zu gestalten, und einige Skriptkenntnisse sind erforderlich, um Dinge wie Validierung und das Erstellen eigener Formularelemente zu handhaben. Daher empfehlen wir Ihnen, bevor Sie sich die anderen unten aufgeführten Abschnitte ansehen, zunächst etwas CSS und JavaScript zu lernen.

Der obige Text ist ein guter Indikator dafür, warum wir Webformulare in ein eigenes, unabhängiges Modul gepackt haben, anstatt zu versuchen, es in die Themenbereiche HTML, CSS und JavaScript zu mischen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und erfordern auch eine enge Verbindung von CSS- und JavaScript-Techniken, um das Beste aus ihnen herauszuholen.

Hinweis: Wenn Sie an einem Computer/Tablet/anderen Gerät arbeiten, auf dem Sie keine eigenen Dateien erstellen können, können Sie die (meisten) Codebeispiele in einem Online-Coding-Programm wie JS Bin oder Glitch ausprobieren.

Einführungstutorials

Ihr erstes Formular: Der erste Artikel unserer Serie bietet Ihre erste Erfahrung im Erstellen eines Webformulars, einschließlich der Gestaltung eines einfachen Formulars, der Implementierung mit den richtigen HTML-Elementen, dem Hinzufügen von sehr einfachem Styling über CSS und wie Daten an einen Server gesendet werden.
Wie strukturiert man ein Webformular: Nachdem die Grundlagen behandelt wurden, betrachten wir nun detaillierter die Elemente, die verwendet werden, um den unterschiedlichen Teilen eines Formulars Struktur und Bedeutung zu verleihen.

Die verschiedenen Formularelemente

Grundlegende native Formularelemente: Wir beginnen diesen Abschnitt mit einem detaillierten Blick auf die Funktionalität der ursprünglichen HTML-<input>-Typen und untersuchen, welche Optionen verfügbar sind, um verschiedene Datentypen zu sammeln.
Die HTML5-Eingabetypen: Hier setzen wir unseren tiefen Einblick in das <input>-Element fort und betrachten die zusätzlichen Eingabetypen, die bei der Veröffentlichung von HTML5 bereitgestellt wurden, sowie die verschiedenen Benutzeroberflächen-Steuerelemente und Verbesserungen zur Datensammlung, die sie bieten. Außerdem betrachten wir das <output>-Element.
Andere Formularelemente: Als nächstes betrachten wir alle nicht-<input>-Formularelemente und zugehörige Werkzeuge, wie <select>, <textarea>, <meter> und <progress>.

Tutorials zur Formulargestaltung

Gestaltung von Webformularen: Dieser Artikel bietet eine Einführung in die Gestaltung von Formularen mit CSS, einschließlich aller Grundlagen, die Sie für grundlegende Gestaltungsaufgaben wissen müssen.
Erweiterte Formulargestaltung: Hier betrachten wir einige fortgeschrittenere Gestaltungstechniken, die verwendet werden müssen, um einige der schwerer zu stilisierenden Formularelemente zu bearbeiten.
Anpassbare Auswahl-Elemente: Dieser Artikel erklärt, wie man moderne HTML- und CSS-Features gemeinsam nutzen kann, um vollständig angepasste <select>-Elemente zu erstellen. Dazu gehört die volle Kontrolle über die Gestaltung der Auswahl-Schaltfläche, des Dropdown-Auswahlfeldes, des Pfeilsymbols, des aktuellen Auswahlsymbols und jedes einzelnen <option>-Elements.
UI-Pseudoklassen: Eine Einführung in die UI-Pseudoklassen, die es ermöglichen, HTML-Formularelemente basierend auf ihrem aktuellen Zustand anzusprechen.

Validierung und Übermittlung von Formulardaten

Clientseitige Formularvalidierung: Datensenden allein reicht nicht aus — wir müssen auch sicherstellen, dass die Daten, die Benutzer in Formulare eingeben, im richtigen Format sind, um sie erfolgreich zu verarbeiten, und dass sie unsere Anwendungen nicht beschädigen. Wir möchten auch unseren Benutzern helfen, unsere Formulare korrekt auszufüllen und nicht frustriert zu sein, wenn sie versuchen, unsere Apps zu verwenden. Die Formularvalidierung hilft uns, diese Ziele zu erreichen — dieser Artikel erklärt, was Sie wissen müssen.
Versenden von Formulardaten: Dieser Artikel betrachtet, was passiert, wenn ein Benutzer ein Formular übermittelt — wohin gehen die Daten und wie gehen wir damit um, wenn sie ankommen? Wir betrachten auch einige der mit dem Versenden von Formulardaten verbundenen Sicherheitsbedenken.

Zusätzliche Artikel

Die folgenden Artikel sind nicht im Lernpfad enthalten, werden jedoch interessant und nützlich sein, wenn Sie die oben genannten Techniken gemeistert haben und mehr erfahren wollen.

Wie man benutzerdefinierte Formularelemente erstellt: Sie werden auf einige Fälle stoßen, in denen die nativen Formularelemente einfach nicht das bieten, was Sie benötigen, z.B. aufgrund von Stil oder Funktionalität. In solchen Fällen müssen Sie möglicherweise Ihr eigenes Formularelement aus reinem HTML erstellen. Dieser Artikel erklärt, wie Sie das tun würden und welche Überlegungen Sie dabei berücksichtigen müssen, mit einer praktischen Fallstudie.
Versenden von Formularen über JavaScript: Dieser Artikel erläutert Möglichkeiten, ein Formular zu verwenden, um eine HTTP-Anfrage zusammenzustellen und sie über benutzerdefiniertes JavaScript zu senden, anstatt eine Standardformularübermittlung zu verwenden. Er erklärt auch, warum Sie das tun möchten und welche Implikationen dies hat. (Siehe auch Verwendung von FormData-Objekten.)
Anpassbare Auswahl-Elemente: Dieser Artikel erklärt, wie man moderne HTML- und CSS-Features gemeinsam nutzen kann, um vollständig angepasste <select>-Elemente zu erstellen.