Skip to content

HTML Formulare

Auf vielen Websites findet man Formulare zur Kontaktaufnahme oder Übermittlung von Daten. Dieses Thema haben wir bis jetzt noch nicht angeschaut, und das wird sich mit dieser Aufgabe ändern.

Ziel(e)

  • Ich kann ein korrektes HTML-Formular ohne Funktion erstellen.

Aufgabe

Ein Formular auf einer Website funktioniert folgendermassen:

  1. Der Benutzer füllt das Formular aus und klickt auf einen Button, um die Informationen zu übermitteln.

  2. Die Namen der einzelnen Elemente mit den vom Benutzer eingegebenen Werten werden an den Server gesendet.

  3. Der Server verarbeitet die Informationen mit einer Programmiersprache wie PHP, C# und VB.net oder speichert sie in einer Datenbank.

Mit HTML kümmern wir uns nur um den ersten Schritt, um das Darstellen des Formulars auf der Website mit den gewünschten Feldern.

Ein Formular wird mit dem HTML-Tag form gestartet und endet mit form. Zusätzlich braucht das HTMl-Tag «form» immer zwei Attribute:

  • action

  • method mit dem Wert «get» oder «post»

Nebst dem Start und End-Tag kann das Formular mit verschiedenen Elementen abgefüllt. Folgende eine Auflistung, der meistverwendeten:

  • Label

  • Text-Feld

  • E-Mail-Feld

  • Checkbox-Feld

  • Radiobutton-Feld

  • Auswahl-Feld (DropDown)

  • Mehrzeiliges Textfeld

  • Absenden-Button

  • Reset-Button

Recherchiere im Internet die Definition der zwei Attributen mit den möglichen Werten vom form-Tag. Finde zusätzlich heraus, wie man im HTML die obengenannte Elemente definiert, mit allen Attributen und Werten die möglich sind.

Warum ist es so wichtig, dass die Elemente im Formular alle (ausser label) das Attribut «name» haben?

Halte alle Informationen und Antworten auf mind. zwei Seiten in deinem Projektjournal fest, so dass du es jederzeit zum Nachschlagen brauchen kannst.

https://www.w3schools.com/html/html_forms.asp

https://www.w3schools.com/html/html_forms_attributes.asp

https://www.w3schools.com/html/html_form_elements.asp

https://www.w3schools.com/html/html_form_input_types.asp

https://www.w3schools.com/html/html_form_attributes.asp

https://www.w3schools.com/html/html_form_attributes_form.asp