HTML-Formulare erstellen

Willkommen zur nächsten Lektion! In dieser Lektion lernen Sie, wie Sie Formulare mit HTML erstellen. Formulare sind unverzichtbar, um Benutzereingaben zu erfassen, die Sie später mit PHP verarbeiten können. Fangen wir an!

Was sind HTML-Formulare?

HTML-Formulare werden verwendet, um Benutzereingaben zu erfassen. Sie ermöglichen es Benutzern, Felder auszufüllen, Auswahlen zu treffen und Daten zur Verarbeitung an einen Server zu senden.

Beispiel: Ein Anmeldeformular, in das Benutzer ihren Benutzernamen und ihr Passwort eingeben.

Wichtiger Punkt: Formulare bilden die Verbindung zwischen dem Benutzer und Ihren PHP-Skripten.

Ein einfaches Formular erstellen

So erstellen Sie ein einfaches HTML-Formular:

Erklärung:

• action: Gibt die PHP-Datei an, die die Formulardaten verarbeitet.
• method: Gibt an, wie die Daten gesendet werden (GET oder POST).
• required: Stellt sicher, dass das Feld vor dem Absenden ausgefüllt werden muss.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Formularelemente

Formulare können verschiedene Eingabetypen enthalten, um unterschiedliche Arten von Daten zu erfassen:

• text: Für einzeilige Texteingaben.
• email: Für E-Mail-Adressen.
• password: Für Passworteingaben.
• checkbox: Für Mehrfachauswahlen.
• radio: Für Einfachauswahlen.
• submit: Zum Absenden des Formulars.

Beispiel:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Optionsfelder verwenden

Mit Optionsfeldern können Benutzer eine Option aus einer Gruppe auswählen. Beispiel:

Tipp: Verwenden Sie für alle Optionsfelder einer Gruppe dasselbe name-Attribut.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Kontrollkästchen verwenden

Mit Kontrollkästchen können Benutzer mehrere Optionen auswählen. Beispiel:

Tipp: Verwenden Sie eine Array-Syntax (hobbies[]), um mehrere Werte zu erfassen.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Auswahllisten

Dropdown-Menüs ermöglichen es Benutzern, eine Option aus einer Liste auszuwählen. Beispiel:

Tipp: Verwenden Sie selected, um eine Standardoption festzulegen.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Barrierefreiheit von Formularen

Stellen Sie sicher, dass Ihre Formulare für alle Benutzer zugänglich sind:

• Verwenden Sie label-Tags, die über for-Attribute mit Eingabefeldern verknüpft sind.
• Gruppieren Sie zusammengehörige Eingabefelder mit fieldset und legend.
• Testen Sie Formulare auf ihre Benutzerfreundlichkeit auf mobilen Geräten.

Tipp: Barrierefreie Formulare verbessern die Benutzerfreundlichkeit für alle!

Sehr gut!

Herzlichen Glückwunsch! Sie haben gelernt, wie Sie HTML-Formulare mit verschiedenen Eingabetypen erstellen, darunter Textfelder, Optionsfelder, Kontrollkästchen und Dropdown-Menüs. Formulare bilden die Grundlage für Benutzereingaben in der Webentwicklung. In der nächsten Lektion lernen Sie, wie Sie Formulardaten mit PHP verarbeiten. Lassen Sie uns weiter programmieren!