Lädt...

HTML-Input-Attribute

Input-Typen wählten das Control mit type. Input-Attribute verfeinern Verhalten am gleichen Tag: Hinweise, Pflicht, Bereiche, Längen, Muster, Sperren. Diese Lektion ist ein Alltagskatalog — keine zweite Typenkarte und nicht der spätere form=-Trick.

Warum Input-Attribute zählen

Passendes type lässt Lücken: leere Pflichtfelder, Alter außerhalb der Range, zu lange Codes. Attribute füllen mit leichten Browser-Checks. Wichtige Daten serverseitig prüfen.

Direkte Antwort

1) name, id, value behalten. 2) placeholder ist Kurzhinweis — kein Label-Ersatz. 3) required für Pflicht. 4) min/max/step für Zahl/Datum; maxlength für Text; optional pattern. 5) readonly sichtbar und meist submitted; disabled blockiert und meist nicht submitted. 6) Attribute verfeinern type — ersetzen ihn nicht; getrennt von form-Zuordnung.

📊 Handy input attributes

Attribute Role Beginner tip
placeholder Hint text in an empty field Not a label — always keep a real label
required Must be filled before submit Browser may block empty submit
min / max / step Limits for number/date-like types Match the type you already chose
maxlength Max characters for text-like types Soft cap in the UI; still check on the server
pattern Allowed character pattern Keep patterns simple for beginners
disabled Not usable; usually not submitted Do not disable fields you still need to send
readonly Visible, not editable; still submitted Good for fixed display values

Profil: Pflicht, Hinweise, Länge

Kleines Profilformular: Name required mit placeholder, Username mit maxlength/pattern, optionale Stadt.

Profile with input attributes

html 
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>

<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>

<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">

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

Profil-Demo lesen

  • required auf Name und Username
  • placeholder nur wenn leer — Name vom label
  • maxlength=12
  • pattern Buchstaben/Ziffern/_
  • Stadt ohne required
  • type=text bereits gesetzt; Attribute verfeinern

Buchung: Ranges und Sperren

Zahl/Datum gewinnen mit min/max/step. readonly-Code bleibt sichtbar und wird meist gesendet; disabled Promo meist nicht.

Booking ranges and locks

html 
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>

<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>

<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>

<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>

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

Buchungs-Demo lesen

  • min/max/step für Gäste und Nacht
  • value=2 Startwert
  • readonly behält Code und sendet meist
  • disabled blockiert Edit und oft Submit
  • Datumslimits brauchen type=date
  • nächste Lektion: form=id-Zuordnung

Die richtigen Helfer wählen

  • Pflicht: required
  • Leer-Hinweis: placeholder (+ label)
  • Zahl/Datum-Grenzen: min max step
  • Zeichencap: maxlength
  • einfaches Format: pattern
  • sichtbar, nicht editierbar, senden: readonly
  • sperren, meist nicht senden: disabled
  • Verkabelung: name id value
  • type hier nicht neu wählen

Übung — Felder mit Attributen straffen

  1. Profil; required entfernen, dann zurück
  2. placeholder leeren; label behalten
  3. maxlength auf 20
  4. Gäste unter min / über max
  5. readonly am Code wechseln
  6. Submit-Erwartung: Code vs Promo
  7. Satz: Attribute verfeinern; type wählte das Gesicht

Leichte Fehler

  • placeholder statt label
  • disable Feld, das gesendet werden muss
  • nur Browser-Checks ohne Server
  • min/max auf ignorierenden Typen
  • zu komplexes pattern
  • Verwechslung mit Typenkatalog
  • früh zu form= springen

Zusammenfassung

  • Attribute verfeinern nach type
  • Alltag: required, placeholder, Ranges, maxlength, pattern
  • readonly meist submit; disabled meist nicht
  • placeholder hintet; label benennt
  • name/id/value behalten
  • weiter: Input-form-Attribute

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
5
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 52 von 68
Html Tutorial