So erstellen Sie ein HTML-Formular (Beispiele erklärt)

Formulare werden verwendet, um Daten von Benutzern zu sammeln, z. B. Kontaktinformationen, oder um Benutzern die Interaktion mit der Website zu ermöglichen, z. B. das Veröffentlichen von Kommentaren oder das Durchführen von Suchen. In diesem Artikel erfahren Sie, wie Sie mit HTML ein einfaches Formular erstellen.

Struktur eines HTML-Formulars

Mithilfe des Tags wird ein HTML-Formular erstellt. Innerhalb dieses Tags können Sie eine Vielzahl verschiedener Eingabeelemente haben, wie z. B. Textfelder, Schaltflächen, Kontrollkästchen, Optionsfelder und mehr.

Eingabeelemente finden Sie hier

Eingabeelemente

Textfelder

Textfelder werden mithilfe des Tags erstellt mit dem Attribut Typ aufgelegt Text. Zum Beispiel:

Name:




Telefon

Das Element Wird für Eingabefelder für Telefonnummern verwendet.

Telefon:


Datum

Das Element dient zur Auswahl eines Datums.

Geburtsdatum:


Passwort

Das Element Wird für Passworteingabefelder verwendet. Der in dieses Feld eingegebene Text wird als Punkte angezeigt, um das Passwort auszublenden.

Passwort:


Archiv

Das Element wird verwendet, um dem Benutzer die Auswahl einer Datei aus seinem lokalen Dateisystem zu ermöglichen.

Datei hochladen:


Kontrollkästchen

Das Element Wird für Eingabefelder verwendet, die es dem Benutzer ermöglichen, keine, eine oder mehrere Optionen auszuwählen.

Ich akzeptiere die allgemeinen Geschäftsbedingungen

Radio

Das Element Wird für Eingabefelder verwendet, die es dem Benutzer ermöglichen, eine Option aus einer Reihe von Optionen auszuwählen.

Geschlecht:

Mann

Frauen

Nummer

Das Element Wird für numerische Eingabefelder verwendet.

Menge:


Bereich

Das Element Wird für Eingabefelder verwendet, die einen Wert aus einem Wertebereich enthalten müssen.

Volumen:




Tasten

Mithilfe des Tags werden Schaltflächen erstellt mit dem Attribut Typ aufgelegt einreichen. Wenn diese Schaltfläche gedrückt wird, werden die Formulardaten übermittelt. Zum Beispiel:

Name:




Umgang mit Formulareingaben

Wenn Sie auf die Schaltfläche „Senden“ klicken, werden die Formulardaten zur Verarbeitung übermittelt. Dies erfolgt über eine von zwei Methoden: GET oder POST, die über das Attribut angegeben werden Methode Im Etikett .

GET-Methode

Die GET-Methode übermittelt die Formulardaten als Teil der URL. Dies ist beispielsweise für Suchvorgänge nützlich, bei denen die Formulardaten nicht vertraulich sind. Allerdings weist diese Methode Einschränkungen hinsichtlich der Länge der zu sendenden Daten auf.

Eingabeelemente finden Sie hier

POST-Methode

Die POST-Methode übermittelt die Formulardaten getrennt von der URL. Dies ist sicherer und kann eine viel größere Datenmenge verarbeiten und wird daher für Dinge wie Kontakt- oder Anmeldeformularübermittlungen verwendet.

Eingabeelemente finden Sie hier

In beiden Fällen das Attribut Aktion wird verwendet, um die URL des serverseitigen Skripts anzugeben, das die Formulardaten verarbeiten wird.

HTML-Formularbeispiel mit allen Elementen 

Hier ist ein Formular, das alle Elemente verwendet, die wir in diesem Artikel besprochen haben:

Anmeldeformular

Name:



Familienname, Nachname:



Email:



Telefon:



Geburtsdatum:



Passwort:



Datei hochladen:



Ich akzeptiere die allgemeinen Geschäftsbedingungen


Geschlecht:

Mann

Frauen

Menge:



Volumen:




Dieses Formular enthält Felder für Vorname, Nachname, E-Mail, Telefon, Geburtsdatum, Passwort und ein Feld zum Hochladen eines Datei, ein Kontrollkästchen für Geschäftsbedingungen, Radios zur Auswahl des Geschlechts sowie Zahlen- und Bereichsfelder für Menge und Volumen, bzw.

Über die Schaltfläche „Senden“ am Ende wird das Formular an die im Attribut angegebene URL gesendet Aktion Vom Etikett Form (in diesem Fall „/submit_form“). Damit dieses Formular auf einer echten Website funktioniert, muss ein Server konfiguriert sein, der die Informationen aus diesem Formular im Pfad „/submit_form“ empfängt und verarbeitet.