HTML Input Eigenschaften

value-Eigenschaft

value Eigenschaft, die die Standardschlüsselzuweisung des Eingabefelds regelt:

Beispiel

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

Selbst ausprobieren

readonly-Eigenschaft

readonly Eigenschaft, die regelt, dass das Eingabefeld schreibgeschützt ist (nicht geändert werden kann):

Beispiel

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

Selbst ausprobieren

Die readonly-Eigenschaft erfordert keinen Wert. Sie entspricht readonly="readonly".

disabled-Eigenschaft

disabled Eigenschaft, die regelt, dass das Eingabefeld deaktiviert ist.

Elemente, die deaktiviert sind, sind nicht verfügbar und nicht klickbar.

Elemente, die deaktiviert sind, werden nicht übermittelt.

Beispiel

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

Selbst ausprobieren

Die disabled-Eigenschaft erfordert keinen Wert. Sie entspricht disabled="disabled".

size-Eigenschaft

size Eigenschaft, die die Größe des Eingabefelds (in Zeichen) regelt:

Beispiel

<form action="">
 Vorname:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Nachname:<br>
<input type="text" name="lastname">
</form>

Selbst ausprobieren

maxlength-Eigenschaft

maxlength Eigenschaft, die die maximale Länge des Eingabefelds regelt:

Beispiel

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

Selbst ausprobieren

Wenn das maxlength-Attribut gesetzt ist, akzeptiert das Eingabefeld keine Zeichen über die zulässige Anzahl hinaus.

Dieses Attribut bietet keine Rückmeldung. Wenn eine Benachrichtigung des Benutzers erforderlich ist, muss JavaScript-Code geschrieben werden.

Anmerkung:Eingrenzungen sind nicht immer zuverlässig. JavaScript bietet viele Methoden, um unerwünschte Eingaben zu verhindern. Um sicherzustellen, dass die Eingaben begrenzt werden, muss der Empfänger (Server) gleichzeitig überprüfen.

HTML5-Attribute

HTML5 hat für <input> zusätzliche Attribute hinzugefügt:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height und width
  • list
  • min und max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

und fügt <form> zusätzliche Attribute hinzu, falls erforderlich:

  • autocomplete
  • novalidate

autocomplete-Attribut

Das autocomplete-Attribut legt fest, ob ein Formular oder Eingabefeld automatisch vervollständigt werden soll.

Wenn die automatische Vervollständigung aktiviert ist, füllt der Browser automatisch Werte basierend auf den vorherigen Eingaben des Benutzers aus.

Tipp:Sie können die automatische Vervollständigung des Formulars auf 'on' setzen und gleichzeitig bestimmte Eingabefelder auf 'off' stellen und umgekehrt.

Das autocomplete-Attribut gilt für <form> und die folgenden <input>-Typen: text, search, url, tel, email, password, Datumswähler, range und color.

Beispiel

Automatische Vervollständigung aktivierter HTML-Formulare (einige Eingabefelder sind auf 'off' gesetzt):

<form action="action_page.php" autocomplete="on">
   Vorname:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-Mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Selbst ausprobieren

Tipp:In einigen Browsern müssen Sie möglicherweise die Funktion für die automatische Vervollständigung manuell aktivieren.

Das Attribut novalidate

Das Attribut novalidate gehört zu den <form>-Attributen.

Wenn gesetzt, legt novalidate fest, dass die Daten des Formulars beim Übermitteln nicht überprüft werden.

Beispiel

Zeigt an, dass das Formular beim Übermitteln nicht überprüft wird:

<form action="action_page.php" novalidate>
   E-Mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Selbst ausprobieren

Das Attribut autofocus

Das Attribut autofocus ist ein boolesches Attribut.

Wenn gesetzt, legt das Attribut autofocus fest, dass das <input>-Element automatisch fokusiert werden soll, wenn die Seite geladen wird.

Beispiel

Machen Sie das Eingabefeld "Vorname" beim Laden der Seite automatisch fokusiert:

Vorname:<input type="text" name="fname" autofocus>

Selbst ausprobieren

Das Attribut form

Das Attribut form legt ein oder mehrere Formulare fest, zu denen das <input>-Element gehört.

Tipp:Um mehrere Formulare zu referenzieren, verwenden Sie eine durch Leerzeichen getrennte Liste der Formular-ID.

Beispiel

Ein Eingabefeld befindet sich außerhalb des HTML-Formulars (aber gehört noch zum Formular):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Einreichen">
</form>
 Nachname: <input type="text" name="lname" form="form1">

Selbst ausprobieren

Das Attribut formaction

Das Attribut formaction legt fest, welche URL für die Verarbeitung der Datei des Eingabekontrollers bei der Übermittlung des Formulars verwendet wird.

Das Attribut formaction überschreibt das action-Attribut des <form>-Elements.

Das Attribut formaction ist für type="submit" und type="image" geeignet.

Beispiel

Eine HTML-Formular mit zwei Submit-Buttons für verschiedene Aktionen:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Einreichen"><br>
   <input type="submit" formaction="demo_admin.asp">
   value="Als Admin einreichen">
</form>

Selbst ausprobieren

Das Attribut formenctype

Das Attribut formenctype legt fest, wie die Daten des Formulars (form-data) beim Übermitteln an den Server codiert werden (nur für Formulare mit method="post").

Das Attribut formenctype überschreibt das enctype-Attribut des <form>-Elements.

Die Eigenschaft formenctype ist für type="submit" und type="image" geeignet.

Beispiel

Senden der Standardkodierung sowie der Kodierung "multipart/form-data" (zweiter Einreichknopf) der Formulardaten (form-data):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Einreichen">
   <input type="submit" formenctype="multipart/form-data">
   value="als Multipart/form-data einreichen">
</form>

Selbst ausprobieren

Eigenschaft formmethod

Die Eigenschaft formmethod definiert die HTTP-Methode, die verwendet wird, um die Formulardaten (form-data) an die action URL zu senden.

Die Eigenschaft formmethod überschreibt die Eigenschaft method des <form>-Elements.

Die Eigenschaft formmethod ist für type="submit" und type="image" geeignet.

Beispiel

Der zweite Einreichknopf überschreibt die HTTP-Methode des Formulars:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Einreichen">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="mit POST einreichen">
</form>

Selbst ausprobieren

Eigenschaft formnovalidate

Die Eigenschaft novalidate ist ein boolesches Attribut.

Wenn diese Einstellung gesetzt ist, wird bei der Einreichung des Formulars keine Validierung der <input>-Elemente durchgeführt.

Die Eigenschaft formnovalidate überschreibt die Eigenschaft novalidate des <form>-Elements.

Die Eigenschaft formnovalidate kann mit type="submit" verwendet werden.

Beispiel

Formular mit zwei Einreichknöpfen (Validierung und ohne Validierung):

<form action="action_page.php">
   E-Mail: <input type="email" name="userid"><br>
   <input type="submit" value="Einreichen"><br>
   <input type="submit" formnovalidate value=" ohne Validierung einreichen">
</form>

Selbst ausprobieren

Eigenschaft formtarget

Die durch die Eigenschaft formtarget angegebene Bezeichnung oder das Schlüsselwort zeigt an, wo die empfangenen Antworten nach dem Absenden des Formulars angezeigt werden.

Die Eigenschaft formtarget überschreibt die Eigenschaft target des <form>-Elements.

Die Eigenschaft formtarget kann mit type="submit" und type="image" verwendet werden.

Beispiel

Dieser Formular hat zwei Submit-Buttons, die verschiedene Zielfenster haben:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Selbst ausprobieren

Eigenschaften height und width

Die Eigenschaften height und width bestimmen die Höhe und Breite des <input>-Elements.

Die Eigenschaften height und width werden nur für <input type="image"> verwendet.

Anmerkung:Definieren Sie immer die Abmessungen des Bildes. Wenn der Browser die Bildgröße nicht kennt, blinkt die Seite beim Laden des Bildes.

Beispiel

Definieren Sie das Bild als Submit-Button und stellen Sie die Eigenschaften height und width ein:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Selbst ausprobieren

list-Eigenschaft

Die <list>-Eigenschaft des <datalist>-Elements enthält die vorgegebenen Optionen des <input>-Elements.

Beispiel

Verwenden Sie <datalist>, um das <input>-Element mit vorgegebenen Werten zu konfigurieren:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Selbst ausprobieren

Die Attribute min und max

Die Attribute min und max legen den Minimal- und Maximalwert des <input>-Elements fest.

Die Attribute min und max sind für die folgenden Eingabetypen geeignet: number, range, date, datetime, datetime-local, month, time und week.

Beispiel

Das <input>-Element mit Mindest- und Maximalwert:

Geben Sie ein Datum vor dem 1980-01-01 ein:
<input type="date" name="bday" max="1979-12-31">
 Geben Sie ein Datum nach dem 2000-01-01 ein:
<input type="date" name="bday" min="2000-01-02">
 Menge (zwischen 1 und 5):
<input type="number" name="quantity" min="1" max="5">

Selbst ausprobieren

Die property multiple

Die property multiple ist eine boolesche Property.

Wenn gesetzt, bestimmt sie, dass der Benutzer mehrere Werte im <input>-Element eingeben kann.

Die property multiple ist für die folgenden Eingabetypen geeignet: email und file.

Beispiel

Dateiupload-Feld für mehrere Werte:

Wählen Sie ein Bild aus: <input type="file" name="img" multiple>

Selbst ausprobieren

Die property pattern

Die property pattern legt die reguläre Ausdrücke fest, die zur Überprüfung des Wertes des <input>-Elements verwendet werden.

Die property pattern ist für die folgenden Eingabetypen geeignet: text, search, url, tel, email und password.

Tipp:Verwenden Sie die globale property title, um das Muster zu beschreiben und dem Benutzer zu helfen.

Tipp:Lernen Sie mehr über reguläre Ausdrücke in unserem JavaScript-Tutorial.

Beispiel

Der Eingabefeld enthält nur drei Buchstaben (keine Ziffern oder Sonderzeichen):

Ländercode: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Drei-Buchstaben-Ländercode">

Selbst ausprobieren

Die property placeholder

Die property placeholder legt eine Beschreibung für den erwarteten Wert des Eingabefelds fest (Beispielwert oder eine kurze Beschreibung der Formatierung).

Diese Anweisung wird vor der Eingabe des Benutzers im Eingabefeld angezeigt.

Das placeholder-Attribut ist für die folgenden Eingabetypen gültig: text, search, url, tel, email und password.

Beispiel

Eingabefelder mit Platzhaltertext:

<input type="text" name="fname" placeholder="First name">

Selbst ausprobieren

required-Attribut

Das required-Attribut ist ein boolesches Attribut.

Wenn gesetzt, wird vorgeschrieben, dass das Eingabefeld vor dem Absenden des Formulars ausgefüllt werden muss.

Das required-Attribut ist für die folgenden Eingabetypen gültig: text, search, url, tel, email, password, Datumswähler, number, checkbox, radio und file.

Beispiel

Pflichtfelder für Eingaben:

Benutzername: <input type="text" name="usrname" required>

Selbst ausprobieren

step-Attribut

Das step-Attribut legt den gültigen numerischen Intervall des <input>-Elements fest.

Beispiel: Wenn step="3", dann sind gültige Zahlen -3, 0, 3, 6 und so weiter.

Tipp:Das step-Attribut kann zusammen mit den Attributen max und min verwendet werden, um einen gültigen Wertebereich zu erstellen.

Das step-Attribut ist für die folgenden Eingabetypen gültig: number, range, date, datetime, datetime-local, month, time und week.

Beispiel

Eingabefelder mit spezifischen rechtlichen numerischen Intervallen:

<input type="number" name="points" step="3">

Selbst ausprobieren