Wie werden Sie ein HTML-Formular erstellen?

Um ein HTML-Formular zu erstellen, werde ich das <form>-Element verwenden. Innerhalb davon werden Steuerelemente platziert, wie Textfelder (<input type="text">), Passwortfelder (<input type="password">), Kontrollkästchen (<input type="checkbox">), Radio-Buttons (<input type="radio">), Dropdown-Listen (<select> und <option>), Textbereiche (<textarea>) und Absende-Buttons (<button type="submit"> oder <input type="submit">).

Jedes Formularelement hat ein name-Attribut zur Identifikation auf Serverseite und in der Regel ein id-Attribut zur Verknüpfung mit einem <label>.

Attribute des <form>-Elements:

action: URL, an die die Formulardaten beim Absenden gesendet werden.
method: HTTP-Anfragemethode zum Senden der Daten (GET oder POST).
enctype: Art der Datenkodierung beim Senden (z.B. multipart/form-data für Datei-Uploads).

Beispiel für ein einfaches Formular:

<form action="/submit-form" method="post">
  <label for="username">Benutzername:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Passwort:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Mich erinnern</label><br><br>

  <label for="country">Land:</label><br>
  <select id="country" name="country">
    <option value="ru">Russland</option>
    <option value="us">USA</option>
  </select><br><br>

  <label for="message">Nachricht:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Absenden</button>
</form>

Die Formularvalidierung kann sowohl clientseitig (mit HTML5-Validierungsattributen, JavaScript) als auch serverseitig erfolgen.

HTML5-Validierungsattribute:

required: Pflichtfeld.
minlength, maxlength: Minimale und maximale Länge des Textfelds.
min, max: Minimal- und Maximalwerte für numerische Felder.
type mit verschiedenen Werten (email, url, number, date usw.) für automatische Browser-Validierung.
pattern: Regulärer Ausdruck zur Validierung der Eingabe.

Beispiel mit HTML5-Validierung:

<form action="/submit-form" method="post">
  <label for="email">E-Mail:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Alter (von 18 bis 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Postleitzahl (5 Ziffern):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Absenden</button>
</form>

Zur Gestaltung des Formulars wird CSS verwendet. Für komplexere Logik oder asynchronen Datenversand wird JavaScript eingesetzt. Zur Verbesserung der Zugänglichkeit des Formulars werden entsprechende ARIA-Attribute und eine korrekte HTML-Struktur verwendet.