Wichtige Attribute¶

Formularelemente besitzen verschiedene Attribute, mit denen man ihr Verhalten steuern und ihr Aussehen beeinflussen kann.
Im Folgenden werden die wichtigsten Attribute erklärt.

name¶

Das Attribut name legt den Namen des Eingabefelds fest.
Es dient dazu, die eingegebenen Daten beim Absenden des Formulars zu identifizieren.

Funktionsweise:
Wenn ein Formular an einen Server gesendet wird, überträgt der Browser die Daten als Schlüssel-Wert-Paare.
Der Schlüssel ist der Wert des name-Attributs, der Wert ist der Inhalt des Eingabefelds.

<input type="text" name="vorname" />

Wenn man „Lena“ eingibt, wird beim Absenden gesendet:

vorname=Lena

Wichtig

Jedes Eingabefeld, das Daten übermitteln soll, muss ein name-Attribut besitzen. Ohne name wird der Inhalt nicht übertragen.

id¶

Das Attribut id vergibt eine eindeutige Kennung innerhalb der Seite.

Funktionsweise:
Eine id darf nur einmal pro Seite vorkommen.
Sie wird benötigt, um das Element eindeutig ansprechen zu können – z. B. durch CSS, JavaScript oder ein zugehöriges <label>.

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

value¶

Das Attribut value legt einen voreingestellten Wert fest, der im Eingabefeld bereits angezeigt wird.

Funktionsweise:

Bei Textfeldern erscheint der Wert als Text im Feld.
Bei Kontrollfeldern (checkbox, radio, submit) bestimmt value, welcher Wert beim Absenden übermittelt wird.

<input type="text" name="stadt" value="Flensburg" />
<input type="radio" name="geschlecht" value="m" />
<input type="radio" name="geschlecht" value="w" />

placeholder¶

Das Attribut placeholder zeigt einen grau dargestellten Beispieltext im Eingabefeld an, solange das Feld leer ist. Man verwendet placeholder, um Hinweise oder Beispieleingaben zu zeigen – z. B. das erwartete Format oder den Zweck des Feldes.

Funktionsweise:
Der Text verschwindet automatisch, sobald man in das Feld klickt oder etwas eingibt.

<input type="text" name="vorname" placeholder="Bitte Vornamen eingeben" />

required¶

Das Attribut required kennzeichnet ein Feld als Pflichtfeld.

Funktionsweise:
Der Browser überprüft beim Absenden automatisch, ob das Feld ausgefüllt wurde.
Wenn nicht, erscheint eine Fehlermeldung, und das Formular wird nicht gesendet.

<input type="email" name="email" required />

disabled¶

Das Attribut disabled macht ein Eingabefeld unveränderbar und ausgegraut.

Funktionsweise:
Ein disabled-Feld kann weder angeklickt noch bearbeitet werden.
Sein Wert wird nicht mit dem Formular übertragen.

<input type="text" name="status" value="Nur-Lesen" disabled />

readonly¶

Das Attribut readonly macht ein Feld schreibgeschützt, aber nicht deaktiviert.

Funktionsweise:
Man kann den Wert sehen und markieren (z. B. kopieren), aber nicht verändern.
Im Gegensatz zu disabled wird der Wert beim Absenden mitgesendet.

Beispiel:

<input type="text" name="kundennr" value="12345" readonly />

min, max, step¶

Diese Attribute legen den zulässigen Wertebereich und die Schrittweite fest.
Sie gelten für Felder mit numerischen oder zeitbezogenen Eingaben, z. B. number, date, range.

Funktionsweise:

min – kleinster erlaubter Wert
max – größter erlaubter Wert
step – Schrittweite zwischen zwei Werten

Beispiel:

<input type="number" name="alter" min="0" max="120" step="1" />
<input type="date" name="geburtstag" min="1900-01-01" max="2025-12-31" />
<input type="range" name="alter" min="0" max="120" step="10" />

Beispiel: Kontaktformular¶

<form action="/kontakt.php" method="post">
  <fieldset>
    <legend>Kontaktformular</legend>

    <label for="name">Name:</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Max Mustermann"
      required
    />

    <label for="email">E-Mail:</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="name@example.com"
      required
    />

    <label for="nachricht">Nachricht:</label>
    <textarea
      id="nachricht"
      name="nachricht"
      cols="40"
      rows="5"
      required
    ></textarea>

    <input type="submit" value="Absenden" />
    <input type="reset" value="Zurücksetzen" />
  </fieldset>
</form>