Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

<input>NEU

Web-Entwicklern standen bislang nur allgemeine Formularelemente zur Verfügung, wie beispielsweise Text- und Passwortfelder, Checkboxen oder Dropdown-Listen. Wenn in einem Textfeld etwa ein numerischer Wert erwartet wurde, so war der Web-Entwickler genötigt die Benutzereingaben serverseitig zu validieren.

Die HTML5 Spezifikation erweitert die Möglichkeiten des <input> Elements um insgesamt 14 neue type-Attribute. Auf die einzelnen type-Attribute wird in den folgenden Beispielen näher eingegangen.


type="date"

Der input type="date" spezifiziert ein <input> Element welches als value Wert einen String besitzt, der seinerseits ein gültiges Datum definiert.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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 semantischInformationBedeutung: semantischder Bedeutung, dem Sinn entsprechend korrekten Ausweisung implementiert worden.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- 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.

Beispiel:
//<!-- input Element vom Typ pattern -->
<input pattern="[0-9]{5}" name="pattern" value="12454" title="fünfstellige Postleitzahl">

Beispiel:


Notation

<input [Attribute] />

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


W3C Logo Spezifikation

Tastaturkürzel