Lädt...

HTML-Input-Typen

Formularelemente kartierten Tags in form. Input-Typen zoomen auf ein Tag: input. type wählt das Control-Gesicht. Diese Lektion ist ein Typenkatalog. Helfer wie required folgen.

Warum Input-Typen zählen

type=text funktioniert fast immer, aber Handys zeigen falsche Tastaturen, Passwörter bleiben sichtbar, Daten werden Freitext. Passendes type verbessert Eingabe, Checks und Wertform.

Direkte Antwort

1) type auf input setzen — text, email, password, number, checkbox, radio, date, file, hidden, submit. 2) Sichtbares mit label. 3) Radios einer Antwort teilen name; checkbox unabhängig. 4) Senden bevorzugt button type=submit. 5) type wählt nur das Gesicht — action/method und spätere Attribute sind andere Schichten.

📊 Starter input types

type Use Beginner tip
text General single-line text Default when nothing fitter exists
email Email addresses Mobile email keyboard + light format check
password Masked secrets Never store the real password in page source
number Numeric values Good for ages/qty — still validate on the server
checkbox Independent on/off Many can be checked at once
radio One choice in a named group Same name = one group
date Calendar date Browser UI varies; value is YYYY-MM-DD style
file Upload a file Needs multipart form encoding for real uploads
hidden Value not shown Still submitted with name/value

Signup: getypte Textfelder

Kleines Beitrittsformular: E-Mail, Passwort, Alter als number, Startdatum.

Signup with typed inputs

html 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

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

Signup-Demo lesen

  • email → E-Mail-UI
  • password maskiert Zeichen
  • number numerisch
  • date Datumskontrolle
  • label mit for/id; name als Schlüssel
  • action/method unverändert

Umfrage: checkbox, radio und file

Toggles und Uploads nutzen dasselbe input mit anderem type. Radios teilen name=plan. checkbox steht allein. file öffnet einen Dateidialog.

Survey checkbox radio file

html 
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

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

Umfrage-Demo lesen

  • Newsletter-checkbox unabhängig
  • gleiche name → eine Radio-Wahl
  • label macht Text klickbar
  • file + multipart für Uploads
  • fieldset rahmt Plan — Fokus bleibt type
  • nächste Lektion: Attribute wie required

Den richtigen Typ wählen

  • kurzer Freitext: text
  • E-Mail/Passwort: email/password
  • Anzahl/Alter: number
  • exklusive Option: radio mit gleichem name
  • unabhängiger Schalter: checkbox
  • Kalendertag: date
  • Anhang: file
  • versteckt: hidden
  • Mehrzeiler bleiben textarea

Übung — Typen wechseln

  1. Signup kopieren; email→text
  2. password kurz als text
  3. zweites number für Menge
  4. Radios mit verschiedenen names, dann fixen
  5. Newsletter + Pro; erwartete names notieren
  6. file ohne multipart — Bewusstsein
  7. Satz: type wählt das Input-Gesicht

Typische Fehler

  • text für Passwörter
  • Radios mit getrennten names
  • ohne label
  • file-Upload ohne Encoding erwarten
  • type ersetzt action/name
  • input statt textarea für lange Texte
  • Verwechslung mit Attribut-Lektion

Kurzfassung

  • ein input-Tag — viele Gesichter via type
  • type an die Daten anpassen
  • Radios teilen name; checkbox allein
  • sichtbare Inputs immer labeln
  • Formularelemente und Input-Attribute sind getrennte Schichten
  • als Nächstes: Input-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 51 von 68
Html Tutorial