Dieser Abschnitt bietet eine Reihe von Artikeln, die Dir helfen werden, HTML-Formulare zu meistern. HTML-Formulare sind sehr mächtige Werkzeuge, um mit dem Browser zu interagieren. Auch ist klar, dass wegen historischen und technischen Gründen es nicht immer offensichtlich ist, wie man diese volkommen effektiv nutzt. In dieser Anleitung werden wir alle Aspekte der HTML-Formulare abdecken: Von über Struktur und Styling, über das Arbeiten mit Daten und induviduelle Komponenten.

Voraussetzungen

Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest unsere Einführung in HTML durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer Nativen-Formular-Komponenten-Anleitung zu machen.

Der Rest von diesem Abschnitt ist sowieso ein bisschen mehr fortgeschritten, denn es ist einfach eine Formular-Komponente auf eine Website zu platzieren, aber man kann nicht wirklich etwas mit diesen anfangen, wenn man keine fortgeschrittene Formular-Eigenschaften, CSS und Javascript nutzt. Deshalb empfehlen wir dir bevor du dir die nächsten Sektionen anguckst, dass du etwas CSS und Javascript als erstes lernst.

Notiz: Wenn du auf einem Computer/Tablet/anderem Gerät arbeitest, wo du nicht die Möglichkeit hast, eigene Dateien zu erstellen, kannst du (die meisten) Code-Beispiele in einem Online-Coding-Programm, wie JSBin oder Thimble nutzen.

Grundlagen

Dein erstes HTML-Formular

Der erste Artikel in unserer Reihe bietet Dir deine erste Erfarung, ein HTML-Formular zu erstellen, was das einfache Designen eines Formulars, Einbinden mit den richtigen HTML-Elemten, dezentes Styling mit CSS und Weitergabe der Daten zu einem Server mit einschließt.
Wie man ein HTML-Formular strukturiert
Nach dem Abhandeln der Grundlagen, können wir jetzt mehr detalliert in die Elemente, die Struktur bieten, hereingucken und die Bedeutung verschiedener Teile des Formulars verstehen.

Welche Formular-Komponeneten sind verfügbar?

Die nativen Formular-Komponenten
Wir gucken jetzt auf die Funktionalität der verschiedenen Formular-Komponenten im Detail - Welche Optionen verfügbar sind, um verschiedene Dateitypen zu sammeln.

Prüfen und Abschicken von Daten

Das Senden von Daten
Dieser Artikel zeigt was passiert, wenn ein Benutzer ein Formular abschickt - wohin gehen die Daten und wie werden diese genutzt, wenn diese dort angekommen sind? Wir gucken ebenfalls auf ein paar Sicherheitsbedenken, die mit dem Senden von Daten verbunden sind.
Formulardaten-Validation
Das Senden von Daten ist noch nicht genug - wir müssen auch prüfen, ob die Daten, die der Nutzer eingegeben hat, im korrektem Format sind, um sie erfolgreich verarbeiten zu können und diese unserer Anwendung nicht zerstören werden. Wir möchten dem Nutzer beim Ausfüllen der Daten helfen, und ihn nicht frustrieren, wenn er versucht unsere Anwendung zu nutzen. Formular-Validation hilft un, diiese Ziele zu erreichen - Diesr Artikel berichtet Dir alles, was du wissen musst.

Weiterführende Anleitungen

Wie man eigene Formular-Komponenten baut
Du wirst über ein paar Fälle stoßen, wo die nativen Formuar-Komponenten nicht das bieten, was du brauchst, wie zum Beispiel aus Styling-Gründen oder Funktionalität. In diesen Fällen musst du eventuell deine eigenen Formular-Komponenten aus purem HTML bauen. Dieser Artikel erklärt, wie duu dies tun kannst und welchen Überlegungen du im klaren sein musst - Mit einem praktischen Fall-Beispiel.
Sending forms through JavaScript
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
HTML forms in legacy browsers
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.

Form styling guides

Styling HTML forms
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
Advanced styling for HTML forms
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
Property compatibility table for form widgets
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.

See also

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: F1nnIV
Zuletzt aktualisiert von: F1nnIV,