Status: Aktueller Standard
<input> steht für input (Eingabe).
<input>-Element ist das zentrale Formular-Steuerelement in HTML. Es erzeugt interaktive Eingabefelder unterschiedlicher Typen (Text, Checkbox, Datei, Datum, etc.). Es ist ein Self-Closing Tag und hat daher kein schließendes Tag.
<input type="..." [attribute]>...</input>Legt Eingabetyp fest:
text: Text (Standard)
password: Passwort (***)
email: Für Email
tel: Für Telefonnummern
url: Für Link-Angaben
search: Für Sucheingaben
checkbox: Für Auswahlfelder
radio: Nur eine Option wählen
number: Für Zahleneingaben
range: Für Schieberegler
date: Für Datum-Eingaben
time: Für Zeit-Eingaben
color: Für Farbauswahl
submit: Für Button "absenden"
reset: Für Button "rücksetzen"
button: Platzhalter für Skripte
image: Bilder als Submit-Button
hidden: Unsichtbare Datenfelder mitsenden
Wichtig für Auswertung!
Der Wert der Eingabe
Grauer Hinweistext für Benutzer
Eingabe ist Pflichtfeld
Keine Eingabe möglich, aber Wert kann verschickt werden
Keine Eingabe möglich, kein Versenden möglich
Mindestanzahl Zeichen
Maximalzahl Zeichen
Validierung auf regulären Ausdruck (Regex)
Für Zahlen und Daten
Für Zahlen und Daten
Für Zahlen und Daten
Autovervollständigung (on/off)
<input>
- --- <form action="/submit" method="post" enctype="multipart/form-data" autocomplete="on">
<!-- ========================== -->
<fieldset>
<legend>Textbasierte Eingaben</legend>
<label for="text">Text:</label>
<input type="text" id="text" name="text" required>
<label for="password">Passwort:</label>
<input type="password" id="password" name="password">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<label for="website">URL:</label>
<input type="url" id="website" name="website">
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone">
<label for="search">Suche:</label>
<input type="search" id="search" name="search">
<label for="number">Zahl:</label>
<input type="number" id="number" name="number" min="0" max="100">
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
<label for="date">Datum:</label>
<input type="date" id="date" name="date">
<label for="time">Zeit:</label>
<input type="time" id="time" name="time">
<label for="datetime">Datum & Zeit:</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="month">Monat:</label>
<input type="month" id="month" name="month">
<label for="week">Woche:</label>
<input type="week" id="week" name="week">
<label for="color">Farbe:</label>
<input type="color" id="color" name="color">
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Checkboxen & Radio</legend>
<label>
<input type="checkbox" name="newsletter" value="yes">
Newsletter abonnieren
</label>
<label>
<input type="checkbox" name="terms" required>
AGB akzeptieren
</label>
<p>Geschlecht:</p>
<label>
<input type="radio" name="gender" value="male"> Männlich
</label>
<label>
<input type="radio" name="gender" value="female"> Weiblich
</label>
<label>
<input type="radio" name="gender" value="diverse"> Divers
</label>
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Datei & Versteckte Felder</legend>
<label>Datei-Upload:
<input type="file" name="file">
</label>
<input type="hidden" name="hiddenField" value="hiddenValue">
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Freitext</legend>
<label>Textarea:
<textarea name="message" rows="4" cols="50"></textarea>
</label>
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Buttons</legend>
<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>
<button type="button" onclick="alert('Button ohne Submit')">Normaler Button</button>
<input type="submit" value="Submit-Input">
<input type="reset" value="Reset-Input">
<input type="image" src="https://via.placeholder.com/100x40" alt="Bild-Submit">
</fieldset>
/form>