HTML Eingabetypen

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

Eingabetyp: text

<input type="text"> definiert fürTexteingabeEinzelnes Eingabefeld für

Beispiel

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

Selbst ausprobieren

Der obige HTML-Code sieht im Browser so aus:

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 sieht im Browser so aus:

Benutzername:


Benutzerpasswort:

Anmerkung:Zeichen im Feld "password" werden maskiert (als Sternchen oder gefüllter Kreis angezeigt).

Eingabetyp: submit

<input type="submit"> definierteinreichenFormulardaten anForm-HandlerSchaltfläche.

Form-Handler (Form-Handler) ist in der Regel eine Serverseite, die Skripte zur Verarbeitung von Eingabedaten enthält.

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

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 sieht im Browser so aus:

Vorname:


Nachname:


Wenn Sie das value-Attribut des Submit-Buttons 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

<input type="radio"> definiert einen Radiobutton.

Radio-Buttons ermöglichen 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 sieht im Browser so aus:

Männlich

Weiblich

Eingabetyp: checkbox

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

Kontrollkästchen erlauben es dem Benutzer, zwischen einer begrenzten Anzahl von Optionen Null oder mehrere 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 sieht im Browser so aus:

Ich habe ein Fahrrad

Ich habe ein Auto

Eingabetyp: button

<input type="button"> definiertKnopf。

Beispiel

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

Selbst ausprobieren

Der obige HTML-Code sieht im Browser so aus:

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"> Für Eingabefelder, die numerische Werte enthalten sollten.

Sie können auf Zahlen 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 minimalen Wert für das Eingabefeld.
pattern Definieren Sie das reguläre Ausdrucksformat für die Eingabewerte.
readonly Definieren Sie, ob das Eingabefeld als lesbar festgelegt 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 das gültige Nummerintervall 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"> Für Eingabefelder, die Daten enthalten sollten.

Je nach Browserunterstützung wird der Datumsauswahlbereich 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 ein, das vor dem 01.01.1980 liegt:
  <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 Farbenauswahlbereich 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 in 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 Datumsauswahlbereich 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 Datumsauswahlbereich 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, Zeit (ohne Zeitzone) auszuwählen.

Je nach Browserunterstützung wird der Zeitauswahlbereich 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 Datumsauswahlbereich 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 Datumsauswahlbereich 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.

Abhängig von der Browser-Unterstützung kann die E-Mail-Adresse automatisch überprüft werden, wenn sie eingereicht wird.

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

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.

Derzeit wird nur Safari 8 von Typ tel unterstützt.

Beispiel

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

Selbst ausprobieren

Eingabetyp: url

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

Abhängig von der Browser-Unterstü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 matchen.

Beispiel

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

Selbst ausprobieren