Bausteine für Webformulare
Dieses Modul bietet eine Reihe von Artikeln, die Ihnen helfen werden, die Grundlagen von Webformularen zu beherrschen. Webformulare sind ein sehr mächtiges Werkzeug für die Interaktion mit Benutzern – am häufigsten werden sie verwendet, um Daten von Benutzern zu sammeln oder ihnen die Steuerung einer Benutzeroberfläche zu ermöglichen. Aus historischen und technischen Gründen ist es jedoch nicht immer offensichtlich, wie sie ihr volles Potenzial entfalten können. In den unten aufgeführten Artikeln werden wir alle wesentlichen Aspekte von Webformularen behandeln, einschließlich der Auszeichnung ihrer HTML-Struktur, dem Styling von Formularelementen, der Validierung von Formulardaten und dem Senden von Daten an den Server.
Voraussetzungen
Bevor Sie mit diesem Modul beginnen, sollten Sie zumindest unseren Einführung in HTML durchgearbeitet haben. An diesem Punkt sollten Sie die Einführungsleitfäden leicht verständlich finden und auch in der Lage sein, unseren Leitfaden zu grundlegenden nativen Formularelementen zu nutzen.
Das Beherrschen von Formularen erfordert jedoch mehr als nur HTML-Kenntnisse — Sie müssen auch einige spezifische Techniken erlernen, um Formularelemente zu stylen, und es sind einige Scripting-Kenntnisse erforderlich, um Dinge wie Validierung und die Erstellung benutzerdefinierter Formularelemente zu handhaben. Daher empfehlen wir Ihnen, bevor Sie sich die anderen unten aufgeführten Abschnitte ansehen, zuerst etwas CSS und JavaScript zu lernen.
Der obige Text ist ein guter Hinweis darauf, warum wir Webformulare in ein eigenes, eigenständiges Modul aufgenommen haben, anstatt Teile davon in die Themenbereiche HTML, CSS und JavaScript zu mischen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und erfordern zudem eine enge Verknüpfung verwandter CSS- und JavaScript-Techniken, um das Beste aus ihnen herauszuholen.
Einführungsleitfäden
- Ihr erstes Formular
-
Der erste Artikel unserer Serie bietet Ihnen Ihre allererste Erfahrung bei der Erstellung eines Webformulars, einschließlich des Entwurfs eines einfachen Formulars, der Implementierung mit den richtigen HTML-Elementen, dem Hinzufügen sehr einfacher Stilmittel über CSS und wie Daten an einen Server gesendet werden.
- Wie man ein Webformular strukturiert
-
Nachdem die Grundlagen geklärt sind, betrachten wir nun ausführlicher die Elemente, die verwendet werden, um Struktur und Bedeutung für die verschiedenen Teile eines Formulars zu liefern.
Die verschiedenen Formularelemente
- Grundlegende native Formularelemente
-
Wir beginnen diesen Abschnitt, indem wir die Funktionalität der ursprünglichen HTML
<input>-Typen im Detail betrachten, und welche Optionen zur Verfügung stehen, um verschiedene Arten von Daten zu sammeln. - Die HTML5-Eingabetyps
-
Hier setzen wir unser tiefgehendes Eintauchen in das
<input>-Element fort, indem wir die zusätzlichen Eingabetyps betrachten, die mit HTML5 bereitgestellt wurden, und die verschiedenen UI-Kontrollen und Datenaufnahmeverbesserungen, die sie bieten. Zusätzlich 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>.
Leitfäden zur Formulargestaltung
- Webformulare stylen
-
Dieser Artikel bietet eine Einführung in das Styling von Formularen mit CSS, einschließlich aller Grundlagen, die Sie für grundlegende Styling-Aufgaben wissen müssen.
- Erweiterte Formulargestaltung
-
Hier schauen wir uns einige fortgeschrittenere Techniken zur Formulargestaltung an, die erforderlich sind, wenn man versucht, mit einigen der schwieriger zu stylenden Formularelemente umzugehen.
- UI-Pseudoklassen
-
Eine Einführung in die UI-Pseudoklassen, die es ermöglichen, HTML-Formularelemente basierend auf ihrem aktuellen Zustand zu benennen.
Validierung und Absenden von Formulardaten
- Clientseitige Formularvalidierung
-
Das Senden von Daten ist nicht genug – wir müssen auch sicherstellen, dass die Daten, die Benutzer in Formulare eingeben, im richtigen Format vorliegen, um sie erfolgreich verarbeiten zu können und dass sie unsere Anwendungen nicht beeinträchtigen. Wir möchten auch unseren Benutzern helfen, unsere Formulare korrekt auszufüllen und nicht frustriert zu werden, wenn sie versuchen, unsere Apps zu nutzen. Formularvalidierung hilft uns, diese Ziele zu erreichen — dieser Artikel erklärt, was Sie wissen müssen.
- Formulardaten senden
-
Dieser Artikel betrachtet, was passiert, wenn ein Benutzer ein Formular absendet – wohin gehen die Daten und wie gehen wir damit um, wenn sie ankommen? Wir betrachten auch einige der Sicherheitsaspekte im Zusammenhang mit dem Senden von Formulardaten.
Fortgeschrittene Artikel
Die folgenden Artikel sind nicht unbedingt erforderlich für den Lernweg, aber sie werden sich als interessant und nützlich erweisen, wenn Sie die oben genannten Techniken gemeistert haben und mehr wissen wollen.
- Wie man benutzerdefinierte Formularelemente erstellt
-
Sie werden auf einige Fälle stoßen, in denen die nativen Formular-Widgets einfach nicht das bieten, was Sie brauchen, z. B. aufgrund von Styling oder Funktionalität. In solchen Fällen müssen Sie möglicherweise Ihr eigenes Formular-Widget aus rohem HTML erstellen. Dieser Artikel erklärt, wie Sie dies tun würden und auf welche Überlegungen Sie dabei achten müssen, mit einer praktischen Fallstudie.
- Formulare über JavaScript senden
-
Dieser Artikel betrachtet Möglichkeiten, ein Formular zu verwenden, um eine HTTP-Anfrage zusammenzustellen und sie über benutzerdefiniertes JavaScript zu senden, anstatt über die Standardformularübermittlung. Es wird auch betrachtet, warum Sie dies tun möchten und welche Auswirkungen das hat. (Siehe auch Using FormData objects.)
- Kompatibilitätstabelle für CSS-Eigenschaften für Formularelemente
-
Dieser letzte Artikel bietet ein nützliches Nachschlagewerk, das Ihnen ermöglicht, nachzuschlagen, welche CSS-Eigenschaften mit welchen Formularelementen kompatibel sind.