<input>NEU
Bedeutung
Definiert ein Eingabefeld innerhalb des Dokumentes
Notation
<input [Attribute]>[Elementinhalt]</input>Elternelemente
Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:
Liste der HTML 5 Block-ElementeBlock-Elemente und Liste der HTML 5 Inline-ElementeInline-Elemente - ausgenommen zum <button> Element<button>.
Elementinhalt
void-Element, darf keinen End-Tag haben und ist ohne Inhalt.
Attribute
Kann folgende elementspezifische Attribute enthalten:zum HTML5 Attribut acceptaccept | zum HTML5 Attribut altalt | zum HTML5 Attribut autocompleteautocomplete | zum HTML5 Attribut autofocusautofocus | zum HTML5 Attribut checkedchecked | zum HTML5 Attribut disableddisabled | zum HTML5 Attribut formform | zum HTML5 Attribut formactionformaction | zum HTML5 Attribut formenctypeformenctype | zum HTML5 Attribut formmethodformmethod | zum HTML5 Attribut formnovalidateformnovalidate | zum HTML5 Attribut formtargetformtarget | zum HTML5 Attribut heightheight | zum HTML5 Attribut listlist | zum HTML5 Attribut maxmax | zum HTML5 Attribut maxlengthmaxlength | zum HTML5 Attribut minmin | zum HTML5 Attribut multiplemultiple | zum HTML5 Attribut namename | zum HTML5 Attribut patternpattern | zum HTML5 Attribut placeholderplaceholder | zum HTML5 Attribut readonlyreadonly | zum HTML5 Attribut requiredrequired | zum HTML5 Attribut sizesize | zum HTML5 Attribut srcsrc | zum HTML5 Attribut stepstep | zum HTML5 Attribut typetype | zum HTML5 Attribut valuevalue
Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:zum HTML5 Attribut accesskeyaccesskey | zum HTML5 Attribut classclass | zum HTML5 Attribut contenteditablecontenteditable | zum HTML5 Attribut contextmenucontextmenu | zum HTML5 Attribut datadata | zum HTML5 Attribut dirdir | zum HTML5 Attribut draggabledraggable | zum HTML5 Attribut hiddenhidden | zum HTML5 Attribut idid | zum HTML5 Attribut itemitem | zum HTML5 Attribut itempropitemprop | zum HTML5 Attribut langlang | zum HTML5 Attribut spellcheckspellcheck | zum HTML5 Attribut stylestyle | zum HTML5 Attribut subjectsubject | zum HTML5 Attribut tabindextabindex | zum HTML5 Attribut titletitle onabort | onblur | onchange | onclick | oncontextmenu | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop | onfocus | onformchange | onforminput | oninput | onkeydown | onkeypress | onkeyup | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onscroll | onselect | onsubmit
Standard-Style-Formateigenschaften
input {
display: inline-block
}
Beispiel
<form action="" method="post"> <label>Bezeichnug des Textfeldes:<br /> <input type="Type-Attribut" name="Bezeichnug des Textfeldes"> </label> </form>
Erläuterung
Das <input> Element markiert ein einzeiliges Eingabefeld, dessen Inhalt durch das Attribut type definiert wird. Bislang standen die Attributtypen <input type="text">, für allgemeinem Inhalt, und <input type="password">, für verdeckt dargestellte Einganben, in HTML zur Verfügung.
Die HTML5 Spezifikation stellt nunmehr eine Reihe weiterer Typen zur Verfügung.
| Notation | Bedeutung |
|---|---|
type="date" | Kontrollfeld für global gültige Datumsangabe |
type="datetime" | Kontrollfeld für global gültige Datums- sowie Zeitangabe inklusive Zeitzonenangabe |
type="datetime-local" | Kontrollfeld für lokal gültige Datums- sowie Zeitangabe |
type="time" | Kontrollfeld für Zeitangabe |
type="week" | Kontrollfeld für Angabe von Jahr und Kalenderwoche |
type="month" | Kontrollfeld für Angabe von Jahr und Monat |
type="number" | Textfeld für eine Ganzzahl, ggf. mit gültigem Wertebereich |
type="range" | Textfeld für eine Ganzahl, ggf. mit gültigem Wertebereich, Darstellung als Schieberegler |
type="tel" | Eingabefeld für Telefonnummern |
type="email" | Eingabefeld für E-Mail-Adressen |
type="url" | Eingabefeld für URL-Adressen (Uniform Resource Locator) |
type="search" | Eingabefeld für ein oder mehrere Suchbegriffe |
type="color" | Kontrollfeld für die Farbangabe, in hexadezimaler Schreibweise, Darstellung in Form eines Farbauswahldialogs |
pattern="[...]" | Eingabe, auf die ein regulärer Ausdruck passen muss |
type="date"
Der input type="date" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der seinerseits ein gültiges Datum definiert.
//<!-- min/max erlaubte Zeitspanne --> <input type="date" name="date" value="2008-10-15" min="2008-10-01" max="2008-11-01">
Beispiel:
type="datetime"
Der input type="datetime" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der seinerseits eine global gültiges Datum sowie Zeitangabe definiert.
//<!-- min/max erlaubte Zeitspanne --> <input type="datetime" name="datetime" value="2008-10-01T20:15:00Z" min="2008-10-01T20:00:00Z" max="2008-10-01T20:30:00Z">
Beispiel:
type="datetime-local"
Der input type="datetime-local" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der seinerseits eine lokal gültiges Datum sowie Zeitangabe definiert.
//<!-- min/max erlaubte Zeitspanne --> <input type="datetime-local" name="datetime-local" value="2008-10-08T20:15:00" min="2008-10-01T20:00:00" max="2008-10-01T20:30:00">
Beispiel:
type="time"
Der input type="time" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der eine Zeitangabe definiert.
//<!-- min/max erlaubte Zeitspanne --> <input type="time" name="time" value="21:15:00" min="19:00:00" max="21:59:59">
Beispiel:
type="week"
Der input type="week" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der eine bestimmte Kalenderwoche definiert.
//<!-- min/max erlaubte Zeitspanne --> <input type="week" name="week" value="2008-W22" min="2008-W15" max="2008-W30">
Beispiel:
type="month"
Der input type="month" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der einen Monat definiert.
//<!-- min/max erlaubte Zeitspanne --> <input type="month" name="month" value="2008-07" min="2008-01" max="2008-12">
Beispiel:
type="number"
Der input type="number" spezifiziert ein <input> Element welches eine Ganzzahl aufnehmen kann. Zusätzlich kann ebenfalls ein gültiger Wertebereich hinterlegt werden.
//<!-- min/max erlaubter Wertebereich --> <input type="number" name="number" value="50" min="1" max="100">
Beispiel:
type="range"
Der input type="range" spezifiziert einen Wertebereich welcher eine Ganzzahl aufnehmen kann. Zusätzlich kann ebenfalls ein gültiger Wertebereich hinterlegt werden. Das <input> Element wird daraufhin als Schieberegler auf der Webseite angezeigt, welcher dynamisch vom Benutzer verändert werden kann.
//<!-- min/max erlaubter Wertebereich --> <input type="range" name="range" value="3" min="0" max="10">
Beispiel:
type="tel"
Der input type="tel" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der seinerseits eine Telefonnummer repräsentiert.
//<!-- input Element vom Typ tel --> <input type="tel" name="tel" value="01234-5678910">
Beispiel:
type="email"
Der input type="email" spezifiziert ein <input> Element welches eine E-Mail-Adresse aufnehmen kann. Die eingegebene E-Mail-Adresse wird zusätzlich, beim Absenden des Formulars clientseitig, validiert.
//<!-- input Element vom Typ email --> <input type="email" name="email" value="email@example.com">
Beispiel:
type="url"
Der input type="url" spezifiziert ein <input> Element welches eine Uniform Resource Locator (URL) aufnehmen kann.
//<!-- input Element vom Typ url --> <input type="url" name="url" value="http://example.com/">
Beispiel:
type="search"
Der input type="search" spezifiziert ein <input> Element in welchem ein oder mehrere Suchbegriffe eingegeben werden können. Dabei ist das search Element lediglich zur semantisch
Bedeutung: semantischder Bedeutung, dem Sinn entsprechend korrekten Ausweisung implementiert worden.
//<!-- input Element vom Typ search --> <input type="search" name="search" value="Suchbegriff">
Beispiel:
type="color"
Der input type="color" spezifiziert einen Farbwert, welcher in hexadezimaler Schreibweise angegeben wird (R, G, B). Um dem Inputfeld den hexadezimalen Zahlenwert mitzuteilen muss zusätzlich eine # am Anfang angegeben werden.
//<!-- input Element vom Typ color --> <input type="color" name="color" value="#3B4998">
Beispiel:
type="pattern"
Der input pattern="[...]" spezifiziert Eingabefeld, dem im Attributwert ein Reguläre Ausdrückeregulärer Ausdruck zugewiesen wird, welchen der Browser bei der Eingabe gegenprüft.
//<!-- input Element vom Typ pattern -->
<input pattern="[0-9]{5}" name="pattern" value="12454" title="fünfstellige Postleitzahl">
Beispiel:
& 
Spezifikation