<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 semantischBedeutung: 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: