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.

<h1>-<h6> Überschrift

CSS - Hintergrundbild absolut positionieren

PHP - Zeichenkette nach Tabulator trennen

JavaScript - Ein Array von Zahlen mit dem Bucketsort-Algorithmus sortieren

MySQL - Zeichenkette ersetzen mit REPLACE

Zu lange Tabellen
Vermeiden Sie lange Tabellen. diese haben den Nachteil, dass die Kommunikation zwischen Server und Client (Ihnen) erheblich erhöht werden muss, was sich auf die Ladezeiten ebenso erheblich auswirkt. Denn der Inhalt einer Tabelle wird immer erst dann angezeigt, wenn diese vollständig geladen wurde. Unterbrechen Sie Tabellen daher immer an mehreren Stellen, um sie im Anschluss wieder weiterzuführen. So erscheint der Seiteninhalt optimaler Weise Stück für Stück und der 15 sekündige Totalausfall (weißer Bildschirm) bleibt dem Besucher erspart.