HTML - Element: <input>

Der <input>-Tag (input = Eingabe) erzeugt ein einzeiliges Eingabefeld für Formulare. Der <input>-Tag wird nicht geschlossen.

<!DOCTYPE html>
<html>
<head>
 <title>Einzeiliges Eingabefeld</title>
</head>
<body>

<h1>Einzeiliges Eingabefeld</h1>

<form action="">
<input>
</form>

</body>
</html>

Beispiel anzeigen

HTML-Tag <form>
» Formulare
» https://html.spec.whatwg.org/[...]autofilling-form-controls:-the-autocomplete-attribute

Attribute

type="text" - Standardeinstellung (HTML5, Optional)
type="hidden" - Verstecktes Feld.
type="password" - Passwort Eingabefeld.
type="submit" - Button um das Formular abzusenden.
type="reset" - Button um das Formular zurück zu setzen (Eingegebene Daten werden verworfen).
type="button" - Button (Klick-Buttons ohne Funktion, z. B.: für JavaScript).
type="file" - Auswählen von Dateien zum hochladen.
type="checkbox" - Checkbox.
type="radio" - Radio-Button.
type="image" - Bild-Button.

name="testi" - Bezeichnername.
value="Mein Test" - Inhalt der gesendet werden soll.
size="10" - Breite des Eingabefeldes.
minlength="5" - Eingabe von (5) minimalen Zeichen (HTML 5).
maxlength="25" - Eingabe von (25) maximalen Zeichen.
readonly="readonly" - Eingabefeld ist nur zum lesen bestimmt.
disabled="disabled" - Ausgeschaltetes Eingabefeld (Daten werden nicht übertragen).
checked="checked" - Ausgewählte Option (für Checkbox und Radio-Button).
src="" - Adresse eines Bildes (für einen Bild-Button).
width="" -Breite eines Bildes (Bild-Button).
height="" Höhe eines Bildes (Bild-Button).
accept="image/jpg" Dateityp (Mime-Type) für den Input-Typ: file. (accept="image/*")

➤ Sie sollten auf Reset-Buttons (type="reset") weitestgehend verzichten: Wer ein Formular nicht absenden möchte, kann die Seite einfach verlassen. Wer jedoch versehentlich ein umfangreiches Formular leert, obwohl er es eigentlich absenden wollte, ist zu Recht frustriert.

HTML 5 - Attribute

Die HTML 5 - Attribute werden noch nicht von allen Browsern unterstützt.
* = Unterstützung in allen aktuellen Browsern.

type="email" - Eingabe einer E-Mail-Adresse *.
type="url" - Eingabe einer URL-Adresse *.
type="search" - Eingabe für eine Suche *.
type="number" - Eingabe von Zahlen.
type="date" - Eingabe eines Datums.
type="time" - Eingabe einer Uhrzeit.
type="datetime" - Auswahl von Datum und Uhrzeit.
type="color" - Auswahl einer Farbe *.
type="range" - Bereich.
type="week" - Auswahl einer Woche.
type="month" - Auswahl eines Monats.

required="required" - Pflichtfeld *.
autofocus="autofocus" - Automatischer Fokus auf ein Eingabefeld im Formular*.
min="10" - Minimale Angabe einer Zahl (für Type: number).
max="100" - Maximale Angabe einer Zahl (für Type: number).
step="1" - Schrittweite (für Type: number).
multiple="multiple" - Dieses Attribut gibt an, ob der Benutzer mehr als
  einen Wert eingeben (auswählen) kann (für Type: email oder: file).
pattern="[a-z]" - Regulärer Ausdruck.
list="" - Verknüpfung mit einer <datalist> *.
spellcheck="true" - Rechtschreibung und Grammatik prüfen.
placeholder="Platzhalter" - Platzhalter * *.

* Verwenden Sie das Platzhalter-Attribut nicht anstatt eines <label>-Elements.
Ihre Zwecke sind unterschiedlich: das Label-Element beschreibt die Rolle des Form-Elements; Das heißt, es gibt an, welche Art von Informationen erwartet wird, das Platzhalter-Attribut ist ein Hinweis wie das Format des Inhalts sein sollte.

<!DOCTYPE html>
<html>
<head>
 <title>Einzeiliges Eingabefeld</title>
</head>
<body>

<h1>Einzeiliges Eingabefeld</h1>

<form action="">
<input type="text">  - Standardeinstellung.<br>
<input type="hidden"> - Verstecktes Feld.<br>
<input type="password" value="geheim"> - Passwort Eingabefeld.<br>
<input type="submit" value="Absenden"> - Button um das Formular abzusenden.<br>
<input type="image" src="logo.png"> - Bild-Button um das Formular abzusenden.<br>
<input type="reset" value="Abbrechen"> - Button um das Formular zurücksetzen.<br>
<input type="file"> - Auswählen von Dateien zum hochladen.<br>
<input type="checkbox"> - Checkbox.<br>
<input type="radio" name="wahl">A <input type="radio" name="wahl">B - Radio-Button (Auswahl).<br>
<input type="text" value="Nur zum lesen" readonly="readonly"> - Eingabefeld ist nur zum lesen bestimmt (Inhalt kann kopiert werden).<br>
<input type="text" value="Nur zum lesen" disabled="disabled"> - Eingabefeld ist nur zum lesen bestimmt.
</form>

<h2>HTML5-Attribute</h2>

<form action="">
<input type="email"> - Eingabe einer E-Mail-Adresse.<br>
<input type="url"> - Eingabe einer URL-Adresse.<br>
<input type="search"> - Eingabe für eine Suche.<br>
<input type="number"> - Eingabe für eine Zahl.<br>
<input type="date"> - Auswahl eines Datums.<br>
<input type="time"> - Auswahl einer Uhrzeit.<br>
<input type="datetime-local"> - Auswahl von Datum und Uhrzeit.<br>
<input type="color"> - Auswahl einer Farbe.<br>
<input type="range"> - Bereich.<br>
<input type="text" placeholder="Platzhalter"> - Platzhalter.
</form>

</body>
</html>

Beispiel anzeigen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<dt> Definitionsliste

CSS - DiscoLights - Box-Shadow Animation

PHP - Leere Arrays entfernen

JavaScript - Dateiname ermitteln

MySQL - Werte von Heute auslesen