HTML-Attributwert <input type="text">

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Das Attribut value ist eine Zeichenfolge, die den aktuellen Wert des in das Textfeld eingegebenen Textes enthält. Sie können diesen Wert in JavaScript über die Eigenschaft value von HTMLInputElement abrufen.

let theText = myTextInput.value;

Wenn für das Eingabefeld keine Validierungsbedingungen gelten (weitere Informationen finden Sie unter Validierung), kann der Wert eine leere Zeichenfolge ("") sein.

Zusätzliche Attribute

Neben den globalen Attributen und den Attributen, die für alle <input>-Elemente unabhängig von ihrem Typ gelten, unterstützen Texteingabefelder die folgenden Attribute.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist>-Element stellt eine Liste vordefinierter Werte bereit, die für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die Vorschläge aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die Benutzer in das text-Eingabefeld eingeben können. Der Wert muss eine ganze Zahl größer oder gleich 0 sein. Wenn maxlength nicht angegeben wird oder einen ungültigen Wert hat, gibt es für das text-Eingabefeld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Constraint Validation schlägt fehl, wenn der Textwert des Feldes länger als maxlength UTF-16-Codeeinheiten ist. Die Constraint Validation wird nur angewendet, wenn Benutzer den Wert ändern.

minlength

Die minimale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die Benutzer in das text-Eingabefeld eingeben können. Der Wert muss eine nicht negative ganze Zahl sein, die kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn minlength nicht angegeben wird oder einen ungültigen Wert hat, gibt es für das text-Eingabefeld keine minimale Länge.

Die Constraint Validation schlägt fehl, wenn der in das Feld eingegebene Text kürzer als minlength UTF-16-Codeeinheiten ist. Die Constraint Validation wird nur angewendet, wenn Benutzer den Wert ändern.

pattern

Wenn das Attribut pattern angegeben ist, enthält es einen regulären Ausdruck, mit dem der value des Eingabefeldes übereinstimmen muss, damit er die Constraint Validation besteht. Es muss sich um einen gültigen regulären JavaScript-Ausdruck handeln, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken dokumentiert wird. Beim Kompilieren des regulären Ausdrucks wird das Flag 'u' angegeben, damit das Muster als Folge von Unicode-Codepunkten und nicht als ASCII behandelt wird. Der Mustertext darf nicht von Schrägstrichen umgeben sein.

Wenn kein Muster angegeben ist oder das angegebene Muster ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut vollständig ignoriert.

Weitere Informationen und ein Beispiel finden Sie unter Ein Muster angeben.

placeholder

Das Attribut placeholder ist eine Zeichenfolge, die Benutzern einen kurzen Hinweis darauf gibt, welche Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Wortgruppe sein, die den erwarteten Datentyp veranschaulicht, und keine ausführliche Erklärung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung (LTR oder RTL) hat, der Platzhalter aber in der entgegengesetzten Richtung angezeigt werden soll, können Sie Formatierungszeichen des bidirektionalen Unicode-Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu ändern. Weitere Informationen finden Sie unter Unicode-Steuerzeichen für bidirektionalen Text verwenden.

readonly

Ein boolesches Attribut, das angibt, dass Benutzer dieses Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft value von HTMLInputElement direkt setzt.

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss größer als null sein; der Standardwert ist 20. Da Zeichen unterschiedlich breit sind, ist die Angabe nicht unbedingt exakt. Je nach Zeichen und Schriftart (den verwendeten font-Einstellungen) kann das resultierende Eingabefeld schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dadurch wird nicht begrenzt, wie viele Zeichen Benutzer in das Feld eingeben können. Es wird lediglich ungefähr festgelegt, wie viele Zeichen gleichzeitig sichtbar sind. Verwenden Sie das Attribut maxlength, um die Länge der eingegebenen Daten nach oben zu begrenzen.

spellcheck

Mit dem globalen Attribut spellcheck wird angegeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann für alle bearbeitbaren Inhalte verwendet werden; hier betrachten wir die Besonderheiten bei der Verwendung von spellcheck für <input>-Elemente. Für spellcheck sind folgende Werte zulässig:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder kein Wert

Übernimmt das Standardverhalten des Elements für die Rechtschreibprüfung. Dieses kann von der spellcheck-Einstellung eines übergeordneten Elements oder anderen Faktoren abhängen.

Die Rechtschreibprüfung kann für ein Eingabefeld aktiviert werden, wenn das Attribut readonly nicht gesetzt und das Feld nicht deaktiviert ist.

Der beim Auslesen von spellcheck zurückgegebene Wert spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Einstellungen des User Agents die Angabe überschreiben.

Texteingabefelder verwenden

<input>-Elemente vom Typ text erstellen einfache, einzeilige Eingabefelder. Verwenden Sie sie, wenn Benutzer einen einzeiligen Wert eingeben sollen und kein speziellerer Eingabetyp für diesen Wert verfügbar ist. Für ein Datum, eine URL, eine E-Mail-Adresse oder einen Suchbegriff gibt es beispielsweise besser geeignete Optionen.

Einfaches Beispiel

<div>
  <label for="uname">Choose a username: </label>
  <input type="text" id="uname" name="name" />
</div>

Dies wird wie folgt dargestellt:

Wenn dieses Eingabefeld Teil eines Formulars ist und das Formular abgesendet wird, wird das Name-Wert-Paar name=Chris an den Server gesendet (sofern vor dem Absenden „Chris“ als Wert eingegeben wurde). Denken Sie daran, das Attribut name für das <input>-Element anzugeben. Andernfalls wird der Wert des Textfeldes nicht mit den übermittelten Daten gesendet.

Platzhalter festlegen

Mit dem Attribut placeholder können Sie im Texteingabefeld einen hilfreichen Platzhalter angeben, der einen Hinweis auf die erwartete Eingabe gibt. Das folgende Beispiel zeigt dies:

<div>
  <label for="uname">Choose a username: </label>
  <input
    type="text"
    id="uname"
    name="name"
    placeholder="Lower case, all one word" />
</div>

Unten sehen Sie, wie der Platzhalter dargestellt wird:

Der Platzhalter wird normalerweise in einer helleren Farbe als die Vordergrundfarbe des Elements dargestellt. Er verschwindet automatisch, sobald Benutzer Text in das Feld eingeben (oder sobald dem Feld durch Setzen seines Attributs value programmgesteuert ein Wert zugewiesen wird).

Physische Größe des Eingabeelements

Die physische Größe des Eingabefeldes lässt sich mit dem Attribut size steuern. Damit können Sie festlegen, wie viele Zeichen das Texteingabefeld gleichzeitig anzeigen kann. Dies beeinflusst die Breite des Elements: Sie können sie in Zeichen statt in Pixeln angeben. Im folgenden Beispiel ist das Eingabefeld etwa 30 Zeichen breit:

<div>
  <label for="uname">Choose a username: </label>
  <input
    type="text"
    id="uname"
    name="name"
    placeholder="Lower case, all one word"
    size="30" />
</div>

Validierung

Für <input>-Elemente vom Typ text erfolgt keine automatische Validierung, da ein einfaches Texteingabefeld beliebige Zeichenfolgen akzeptieren können muss. Es gibt jedoch einige Möglichkeiten zur clientseitigen Validierung, die im Folgenden beschrieben werden.

Hinweis zur Gestaltung

Für die Gestaltung von Formularelementen stehen nützliche Pseudoklassen zur Verfügung, mit denen Benutzer erkennen können, ob ihre Eingaben gültig sind. Dies sind :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS: Es zeigt neben Eingabefeldern mit gültigen Werten ein Häkchen und neben Eingabefeldern mit ungültigen Werten ein Kreuz (X) an.

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Für diese Technik muss außerdem nach dem Formularelement ein <span>-Element platziert werden, das die Symbole aufnimmt. Das ist notwendig, weil manche Eingabetypen in einigen Browsern Symbole, die direkt nach ihnen platziert werden, nicht gut darstellen.

Eingabe erforderlich machen

Mit dem Attribut required können Sie einfach festlegen, dass vor dem Absenden des Formulars ein Wert eingegeben werden muss:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Dies wird wie folgt dargestellt:

Wenn Sie versuchen, das Formular ohne eingegebenen Benutzernamen abzusenden, zeigt der Browser eine Fehlermeldung an.

Länge des Eingabewerts

Mit dem Attribut minlength können Sie eine Mindestlänge für den eingegebenen Wert festlegen. Entsprechend legen Sie mit maxlength seine maximale Länge fest.

Im folgenden Beispiel muss der eingegebene Wert 4 bis 8 Zeichen lang sein.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Dies wird wie folgt dargestellt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen abzusenden, erhalten Sie eine entsprechende Fehlermeldung (die sich je nach Browser unterscheidet). Der Browser verhindert, dass Sie mehr als 8 Zeichen eingeben.

Ein Muster angeben

Mit dem Attribut pattern können Sie einen regulären Ausdruck angeben, mit dem der eingegebene Wert übereinstimmen muss, damit er als gültig gilt. Eine kurze Einführung in die Validierung von Eingaben mit regulären Ausdrücken finden Sie unter Mit einem regulären Ausdruck validieren.

Im folgenden Beispiel wird der Wert auf 4 bis 8 Zeichen begrenzt und darf nur Kleinbuchstaben enthalten.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Dies wird wie folgt dargestellt:

Beispiele

Gute Beispiele für die Verwendung von Texteingabefeldern im Zusammenhang finden Sie in unseren Artikeln Ihr erstes HTML-Formular und Anleitung zur Strukturierung eines HTML-Formulars.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formulare
• <input> und die zugrunde liegende Schnittstelle HTMLInputElement
• <input type="search">
• <textarea>: mehrzeilige Texteingabe