HTML Eingabetypen

Dieses Kapitel beschreibt die Eingabetypen des <input>-Elements.

Eingabetyp: text

<input type="text"> definiert zurTexteingabeeines Einzeiligen Eingabefeldes:

Beispiel

<form>
 Vorname:<br>
<input type="text" name="firstname">
<br>
 Nachname:<br>
<input type="text" name="lastname">
</form>

Selbst ausprobieren

Der obige HTML-Code wird im Browser so dargestellt:

Vorname:


Nachname:

Eingabetyp: password

<input type="password"> definiertPasswortfeld:

Beispiel

<form>
 Benutzername:<br>
<input type="text" name="username">
<br>
 Benutzerpasswort:<br>
<input type="password" name="psw">
</form>

Selbst ausprobieren

Der obige HTML-Code wird im Browser so dargestellt:

Benutzername:


Benutzerpasswort:

Anmerkung:Zeichen im Feld 'password' werden maskiert behandelt (wird als Sternchen oder Füllkreis angezeigt).

Eingabetyp: submit

<input type="submit"> definierteinreichenFormulardaten anFormularverarbeitungsprogrammSchaltfläche.

Das Formularverarbeitungsprogramm (form-handler) ist in der Regel eine Serverseite, die Skripte zur Verarbeitung von Eingabedaten enthält.

Definieren Sie im action-Attribut des Formulars den Formularverarbeiter (form-handler):

Beispiel

<form action="action_page.php">
Vorname:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nachname:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Selbst ausprobieren

Der obige HTML-Code wird im Browser so dargestellt:

Vorname:


Nachname:


Wenn Sie das value-Attribut des Absendebuttons weglassen, wird der Button den Standardtext erhalten:

Beispiel

<form action="action_page.php">
Vorname:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nachname:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Selbst ausprobieren

Eingabetyp: Radio-Button

<input type="radio"> definiert einen Radio-Button.

Radio-Buttons erlauben es einem Benutzer, NUR EINE von einer begrenzten Anzahl von Optionen auszuwählen:

Beispiel

<form>
<input type="radio" name="sex" value="male" checked>Männlich
<br>
<input type="radio" name="sex" value="female">Weiblich
</form>

Selbst ausprobieren

Der obige HTML-Code wird im Browser so dargestellt:

Männlich

Weiblich

Eingabetyp: Kontrollkästchen

<input type="checkbox"> definiert ein Kontrollkästchen.

Kontrollkästchen erlauben es dem Benutzer, aus einer begrenzten Anzahl von Optionen NULL oder mehrere Optionen auszuwählen.

Beispiel

<form>
<input type="checkbox" name="vehicle" value="Bike">Ich habe ein Fahrrad
<br>
<input type="checkbox" name="vehicle" value="Car">Ich habe ein Auto 
</form>

Selbst ausprobieren

Der obige HTML-Code wird im Browser so dargestellt:

Ich habe ein Fahrrad

Ich habe ein Auto

Eingabetyp: Schaltfläche

<input type="button"> definiertSchaltfläche。

Beispiel

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Selbst ausprobieren

Der obige HTML-Code wird im Browser so dargestellt:

HTML5 Eingabetypen

HTML5 hat mehrere neue Eingabetypen hinzugefügt:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Anmerkung:Eingabetypen, die von alten Webbrowsern nicht unterstützt werden, werden als Eingabetyp text betrachtet.

Eingabetyp: number

<input type="number"> Verwendet für Eingabefelder, die numerische Werte enthalten sollten.

Sie können Numeren beschränken.

Je nach Browserunterstützung können Beschränkungen auf Eingabefelder angewendet werden.

Beispiel

<form>
  Menge (zwischen 1 und 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Selbst ausprobieren

Eingabebeschränkungen

Hier sind einige häufig verwendete Eingabebeschränkungen (einige sind neu in HTML5 hinzugekommen):

Eigenschaft Beschreibung
disabled Definieren Sie, ob das Eingabefeld deaktiviert sein soll.
max Definieren Sie den maximalen Wert für das Eingabefeld.
maxlength Definieren Sie die maximale Anzahl von Zeichen für das Eingabefeld.
min Definieren Sie den kleinsten Wert für das Eingabefeld.
pattern Definieren Sie das reguläre Ausdrucksformat für die Eingabewerte.
readonly Definieren Sie, ob das Eingabefeld schreibgeschützt ist (kann nicht geändert werden).
required Definieren Sie, ob das Eingabefeld obligatorisch ist (muss ausgefüllt werden).
size Definieren Sie die Breite des Eingabefelds (in Zeichen).
step Definieren Sie den gültigen Numerointervall für das Eingabefeld.
value Definieren Sie den Standardwert für das Eingabefeld.

Sie werden im nächsten Kapitel mehr über Eingabebeschränkungen lernen.

Beispiel

<form>
  Menge:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Selbst ausprobieren

Eingabetyp: date

<input type="date"> Verwendet für Eingabefelder, die ein Datum enthalten sollten.

Je nach Browserunterstützung wird der Datumsauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Geburtstag:
  <input type="date" name="bday">
</form>

Selbst ausprobieren

Sie können Beschränkungen für die Eingabe hinzufügen:

Beispiel

<form>
  Geben Sie ein Datum vor dem 01.01.1980 ein:
  <input type="date" name="bday" max="1979-12-31"><br>
  Geben Sie ein Datum nach dem 2000-01-01 ein:
  Geben Sie ein Datum nach dem 2000-01-01 ein:<br>
</form>

Selbst ausprobieren

Eingabetyp: color

<input type="color"> Verwendet für Eingabefelder, die Farben enthalten sollten.

Je nach Browserunterstützung wird der Farbenauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Wählen Sie Ihre Lieblingsfarbe aus:
  <input type="color" name="favcolor">
</form>

Selbst ausprobieren

Eingabetyp: range

<input type="range"> Verwendet für Eingabefelder, die Werte aus einem bestimmten Bereich enthalten sollten.

Je nach Browserunterstützung kann das Eingabefeld als Schieberegler angezeigt werden.

Beispiel

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Selbst ausprobieren

Sie können folgende Attribute verwenden, um Beschränkungen festzulegen: min, max, step, value.

Eingabetyp: month

<input type="month"> Ermöglicht dem Benutzer, Monat und Jahr auszuwählen.

Je nach Browserunterstützung wird der Datumsauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Geburtstag (Monat und Jahr):
  <input type="month" name="bdaymonth">
</form>

Selbst ausprobieren

Eingabetyp: week

<input type="week"> Ermöglicht dem Benutzer, Woche und Jahr auszuwählen.

Je nach Browserunterstützung wird der Datumsauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Wählen Sie eine Woche aus:
  <input type="week" name="week_year">
</form>

Selbst ausprobieren

Eingabetyp: time

<input type="time"> Ermöglicht dem Benutzer, Uhrzeit (ohne Zeitzone) auszuwählen.

Je nach Browserunterstützung wird der Zeitauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Wählen Sie eine Uhrzeit aus:
  <input type="time" name="usr_time">
</form>

Selbst ausprobieren

Eingabetyp: datetime

<input type="datetime"> Ermöglicht dem Benutzer, Datum und Uhrzeit (mit Zeitzone) auszuwählen.

Je nach Browserunterstützung wird der Datumsauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Geburtstag (Datum und Uhrzeit):
  <input type="datetime" name="bdaytime">
</form>

Selbst ausprobieren

Eingabetyp: datetime-local

<input type="datetime-local"> Ermöglicht dem Benutzer, Datum und Uhrzeit (ohne Zeitzone) auszuwählen.

Je nach Browserunterstützung wird der Datumsauswahlfeld im Eingabefeld angezeigt.

Beispiel

<form>
  Geburtstag (Datum und Uhrzeit):
  <input type="datetime-local" name="bdaytime">
</form>

Selbst ausprobieren

Eingabetyp: email

<input type="email"> Für Eingabefelder, die E-Mail-Adressen enthalten sollten.

Je nach Browserunterstützung kann die E-Mail-Adresse automatisch überprüft werden, wenn sie eingereicht wird.

Einige Smartphones erkennen Email-Typen und fügen der Tastatur ".com" hinzu, um E-Mail-Eingaben zu entsprechen.

Beispiel

<form>
  E-Mail:
  <input type="email" name="email">
</form>

Selbst ausprobieren

Eingabetyp: search

<input type="search"> Für Suchfelder (Suchfelder haben eine ähnliche Darstellung wie reguläre Textfelder).

Beispiel

<form>
  Google suchen:
  <input type="search" name="googlesearch">
</form>

Selbst ausprobieren

Eingabetyp: tel

<input type="tel"> Für Eingabefelder, die Telefonnummern enthalten sollten.

Nur Safari 8 unterstützt derzeit den Typ tel.

Beispiel

<form>
  Telefon:
  <input type="tel" name="usrtel">
</form>

Selbst ausprobieren

Eingabetyp: url

<input type="url"> Für Eingabefelder, die URL-Adressen enthalten sollten.

Je nach Browserunterstützung kann das URL-Feld automatisch überprüft werden, wenn es eingereicht wird.

Einige Smartphones erkennen URL-Typen und fügen der Tastatur ".com" hinzu, um URL-Eingaben zu entsprechen.

Beispiel

<form>
  Fügen Sie Ihre Homepage hinzu:
  <input type="url" name="homepage">
</form>

Selbst ausprobieren