html mit Adi Prinz

Das form-Element

Das form-Element umschließt die Formularfelder. Mit dem action-Attribut wird festgelegt, wohin die eingegebenen Daten gesendet werden. Das method-Attribut bestimmt, wie die Daten übertragen werden.

<form action="formular-verarbeiten.php" method="post">
  <!-- Hier stehen die Formularfelder. -->
</form>
    

Die Verarbeitung der übertragenen Formulardaten wird im Modul PHP ausführlich behandelt. Auf dieser Seite beschäftigen wir uns zunächst mit dem Aufbau und den Steuerelementen eines HTML-Formulars.

Die Übertragungsmethoden GET und POST

Für das method-Attribut stehen hauptsächlich die Werte get und post zur Verfügung.

GET

Bei get werden die Formulardaten an die URL angehängt. Diese Methode eignet sich besonders für Suchformulare und Filter.

<form action="suche.php" method="get">
  <label for="suchbegriff">Suchbegriff:</label>
  <input type="search" id="suchbegriff" name="q">

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

Nach dem Absenden könnte die URL beispielsweise so aussehen:

suche.php?q=HTML
    

POST

Bei post werden die Formulardaten im Inhalt der Anfrage übertragen und nicht an die URL angehängt. Diese Methode wird beispielsweise für Kontaktformulare, Registrierungen und umfangreichere Eingaben verwendet.

<form action="kontakt-verarbeiten.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

post verschlüsselt die Daten nicht automatisch. Für eine sichere Übertragung muss die Website HTTPS verwenden.

Wichtige Attribute des form-Elements

• action: Zieladresse, an die die Formulardaten gesendet werden
• method: Übertragungsmethode get oder post
• enctype: Codierung der Formulardaten; bei einem Dateiupload ist multipart/form-data erforderlich
• autocomplete: schaltet die automatische Vervollständigung mit on oder off ein beziehungsweise aus
• novalidate: deaktiviert die automatische Formularprüfung des Browsers
• target: bestimmt, wo die Antwort geöffnet wird
• name: weist dem Formular einen Namen zu
• accept-charset: legt die Zeichenkodierung fest; normalerweise wird UTF-8 verwendet

Elemente innerhalb eines Formulars

Ein Formular kann unter anderem folgende Elemente enthalten:

• input – verschiedene Arten von Eingabefeldern
• textarea – mehrzeiliges Textfeld
• select – Auswahlliste
• option – Eintrag einer Auswahlliste
• optgroup – Gruppe innerhalb einer Auswahlliste
• button – Schaltfläche
• label – Beschriftung eines Formularfeldes
• fieldset – Gruppe zusammengehöriger Formularfelder
• legend – Überschrift eines fieldset-Elements
• datalist – Vorschläge für ein Eingabefeld
• output – Ausgabe eines berechneten Ergebnisses

Formularfelder richtig beschriften

Jedes Eingabefeld sollte eine eindeutige Beschriftung mit einem label-Element erhalten. Das for-Attribut des Labels muss mit der id des zugehörigen Formularfeldes übereinstimmen.

<label for="vorname">Vorname:</label>
<input type="text" id="vorname" name="vorname">
    

Durch die Verknüpfung kann auch auf die Beschriftung geklickt werden, um das zugehörige Eingabefeld zu aktivieren. Das verbessert außerdem die Barrierefreiheit.

Unterschied zwischen id und name

Die Attribute id und name haben unterschiedliche Aufgaben:

• id identifiziert ein Element innerhalb der HTML-Seite. Sie wird beispielsweise für Labels, CSS und JavaScript verwendet.
• name bestimmt den Namen, unter dem der eingegebene Wert an den Server gesendet wird.

<label for="nachname">Nachname:</label>
<input type="text" id="nachname" name="nachname">
    

Gibt ein Benutzer beispielsweise Prinz ein, wird bei einer GET-Anfrage folgender Name-Wert-Eintrag übertragen:

nachname=Prinz
    

Ein Formularfeld ohne name-Attribut wird beim Absenden nicht übertragen.

Einfache Textfelder

Für ein einzeiliges Textfeld wird type="text" verwendet. Zusätzliche Attribute können die Eingabe genauer festlegen.

<label for="benutzername">Benutzername:</label>
<input
  type="text"
  id="benutzername"
  name="benutzername"
  minlength="3"
  maxlength="30"
  required
  autocomplete="username">
    

• required macht das Feld zum Pflichtfeld.
• minlength legt die Mindestanzahl an Zeichen fest.
• maxlength begrenzt die Anzahl der Zeichen.
• autocomplete liefert dem Browser einen Hinweis zur Eingabe.
• value trägt einen anfänglichen Wert ein.
• placeholder zeigt einen kurzen Eingabehinweis an.

Ein placeholder ersetzt keine sichtbare Beschriftung. Sobald der Benutzer etwas eingibt, verschwindet der Platzhalter.

Praxisbeispiel: persönliche Daten

Das Attribut autocomplete verwendet festgelegte englische Werte wie given-name, family-name und address-level2.

E-Mail-Adresse eingeben

Mit type="email" erwartet der Browser eine gültig aufgebaute E-Mail-Adresse.

<label for="email">E-Mail-Adresse:</label>
<input
  type="email"
  id="email"
  name="email"
  autocomplete="email"
  required>
    

Die Prüfung des Browsers ist nur eine Unterstützung. Eingaben müssen zusätzlich auf dem Server geprüft werden.

Passwort eingeben

Bei type="password" werden die eingegebenen Zeichen verdeckt dargestellt. Das Passwort selbst wird dadurch jedoch weder verschlüsselt noch automatisch sicher gespeichert.

<label for="passwort">Passwort:</label>
<input
  type="password"
  id="passwort"
  name="passwort"
  minlength="8"
  autocomplete="new-password"
  required>
    

Für ein vorhandenes Benutzerkonto wird normalerweise autocomplete="current-password" verwendet. Bei der Registrierung ist autocomplete="new-password" geeignet.

Telefonnummern und Webadressen

Für Telefonnummern steht type="tel" und für Webadressen type="url" zur Verfügung.

<label for="telefon">Telefonnummer:</label>
<input
  type="tel"
  id="telefon"
  name="telefon"
  autocomplete="tel">

<label for="website">Website:</label>
<input
  type="url"
  id="website"
  name="website"
  placeholder="https://example.com">
    

type="tel" erzwingt kein bestimmtes Telefonnummernformat, weil Telefonnummern international unterschiedlich aufgebaut sind. Falls ein bestimmtes Format verlangt wird, kann zusätzlich pattern eingesetzt werden.

Suchfeld

Ein Suchfeld wird mit type="search" erstellt. Suchformulare verwenden meistens die Übertragungsmethode get.

<form action="suche.php" method="get">
  <label for="suche">Website durchsuchen:</label>
  <input type="search" id="suche" name="q">
  <button type="submit">Suchen</button>
</form>