Formulare

Formulare sind ein zentrales Werkzeug zur Erfassung von Benutzereingaben und deren Übermittlung an einen Server zur Verarbeitung. Sie bestehen aus verschiedenen Formularelementen, die es Nutzern ermöglichen, Daten einzugeben. In diesem Kurs werden jedoch keine Daten an einen Server gesendet, da dies weiterführende Kenntnisse erfordert, die nicht Teil dieses Kurses sind.

Alle Codebeispiele enthalten das Attribut onsubmit="return false". Dieses Attribut verhindert standardmäßig, dass das Formular eine Anfrage an den Server sendet.

Erstellen von Formularen

Das <form>-Tag wird verwendet, um ein interaktives Formular auf einer Webseite zu erstellen. Es enthält verschiedene Formularelemente für die Benutzereingabe.
Beispiel:

<form>
  <!-- Form elements go here -->
</form>

Formularelemente

HTML stellt verschiedene Eingabetypen zur Verfügung, um Benutzereingaben zu erfassen. Jeder Typ besitzt spezifische Attribute und Verhaltensweisen. Zusätzlich kann für jedes Eingabefeld ein Label angegeben werden. Labels werden verwendet, um Text mit Formulareingabeelementen zu verknüpfen und so eine zugänglichere und benutzerfreundlichere Erfahrung zu bieten. Labels und Eingabefelder werden in den folgenden Kapiteln ausführlich behandelt.
Beispiel:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Formularübermittlung

Die Übermittlung eines Formulars wird durch einen Absende-Button (<button type="submit">) ausgelöst, der die Formulardaten zur Verarbeitung an den Server senden kann.
Beispiel:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Hier ist ein grundlegendes Formularbeispiel.

Videoanleitung