<input type="text">

Das value-Attribut ist ein String, der den aktuellen Wert des in das Textfeld eingegebenen Texts enthält. Sie können diesen mit der value-Eigenschaft von HTMLInputElement in JavaScript abrufen.

let theText = myTextInput.value;

Sind keine Validierungsbeschränkungen für die Eingabe vorhanden (siehe Validierung für weitere Details), kann der Wert ein leerer String ("") sein.

Neben den globalen Attributen und den Attributen, die auf alle <input>-Elemente unabhängig vom Typ wirken, unterstützen Texteingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den Vorschlägen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

Die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die text-Eingabe eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn maxlength nicht angegeben oder ein ungültiger Wert angegeben ist, gibt es keine maximale Länge für die text-Eingabe. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des Textwertes des Feldes mehr als maxlength UTF-16-Codeeinheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die text-Eingabe eingeben kann. Dies muss ein nicht-negativer Ganzzahlenwert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn minlength nicht angegeben oder ein ungültiger Wert angegeben ist, gibt es keine Mindestlänge für die text-Eingabe.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern-Attribut ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das u-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, so dass das Muster als Abfolge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Mustertext angegeben werden.

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

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

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in dem Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erläuternde Nachricht zu sein. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidirektionale-Algo-Formatierelemente verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für weitere Informationen.

Ein boolesches Attribut, das bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann, wenn es vorhanden ist. Sein value kann jedoch weiterhin geändert werden, indem der JavaScript-Code direkt die value-Eigenschaft des HTMLInputElement setzt.

Das size-Attribut 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 Zeichenbreiten variieren, kann dies genau oder ungenau sein und sollte nicht darauf vertraut werden, dass dies der Fall ist; die resultierende Eingabe kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font-Einstellungen, die verwendet werden).

Dies legt keine Grenze dafür fest, wie viele Zeichen Sie in das Feld eingeben können. Es gibt nur an, wie viele Zeichen ungefähr gleichzeitig sichtbar sein können. Um ein obere Grenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Das globale spellcheck-Attribut wird verwendet, um anzugeben, ob für ein Element die Rechtschreibprüfung aktiviert werden soll. Es kann für alle bearbeitbaren Inhalte verwendet werden, doch hier betrachten wir spezifische Aspekte in Bezug auf die Verwendung von spellcheck bei <input>-Elementen. Die erlaubten Werte für spellcheck sind:

false

Deaktivieren Sie die Rechtschreibprüfung für dieses Element.

true

Aktivieren Sie die Rechtschreibprüfung für dieses Element.

"" (leerer String) oder kein Wert

Folgen Sie dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf den spellcheck-Einstellung eines Elternteils oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktiviert haben, wenn nicht das readonly-Attribut gesetzt ist und es nicht deaktiviert ist.

Der Wert, der durch das Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Benutzereinstellungen diese Einstellung überschreiben.

<input>-Elemente des Typs text erzeugen einfache, einzeilige Eingaben. Sie sollten sie überall verwenden, wo Sie möchten, dass der Benutzer einen einzeiligen Wert eingibt und kein spezifischeres Eingabetyp verfügbar ist, um diesen Wert zu sammeln (wenn es beispielsweise ein Datum, eine URL, eine E-Mail-Adresse oder ein Suchbegriff ist, haben Sie bessere Optionen zur Verfügung).

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

Dies wird so gerendert:

Wenn das Formular übermittelt wird, wird das Datenname/Wert-Paar an den Server gesendet als name=Chris (wenn "Chris" vor der Übermittlung als Eingabewert eingegeben wurde). Sie müssen daran denken, das name-Attribut auf dem <input>-Element einzuschließen, andernfalls wird der Wert des Textfelds nicht mit den übermittelten Daten einbezogen.

Sie können einen nützlichen Platzhalter innerhalb Ihrer Texteingabe bereitstellen, der einen Hinweis darauf geben kann, was eingegeben werden sollte, indem Sie das placeholder-Attribut verwenden. Betrachten Sie das folgende Beispiel:

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

Sie sehen, wie der Platzhalter unten gerendert wird:

Der Platzhalter wird typischerweise in einer helleren Farbe als die Vordergrundfarbe des Elements dargestellt und verschwindet automatisch, wenn der Benutzer beginnt, Text in das Feld einzugeben (oder wann immer das Feld programmatisch durch Setzen seines value-Attributs einen Wert erhält).

Die physische Größe des Eingabefeldes kann mit dem size-Attribut gesteuert werden. Damit können Sie angeben, wie viele Zeichen die Texteingabe gleichzeitig anzeigen kann. Dies beeinträchtigt die Breite des Elements und ermöglicht es Ihnen, die Breite in Zeichen anstelle von Pixeln anzugeben. In diesem Beispiel ist das Eingabefeld 30 Zeichen breit:

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

<input>-Elemente des Typs text haben keine automatische Validierung, da eine einfache Texteingabe in der Lage sein muss, beliebige Strings zu akzeptieren. Es gibt jedoch einige clientseitige Validierungsoptionen, die wir im Folgenden besprechen werden.

Für das Styling von Formularelementen gibt es nützliche Pseudoklassen, um dem Benutzer anzuzeigen, wann ihre Werte gültig oder ungültig sind. Diese sind :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, das ein Häkchen (Tick) neben Eingaben mit gültigen Werten und ein Kreuz (X) neben Eingaben mit ungültigen Werten anzeigt.

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;
}

Die Technik erfordert auch ein <span>-Element, das nach dem Formularelement platziert wird, um als Halter für die Symbole zu fungieren. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Symbole, die direkt nach ihnen platziert werden, nicht sehr gut anzeigen.

Sie können das required-Attribut verwenden, um einfach das Eingeben eines Wertes erforderlich zu machen, bevor das Formular übermittelt werden kann:

<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>

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 so gerendert:

Wenn Sie versuchen, das Formular ohne eingegebenen Suchbegriff zu übermitteln, zeigt der Browser eine Fehlermeldung an.

Sie können eine minimale Länge (in Zeichen) für den eingegebenen Wert mit dem minlength-Attribut angeben; genauso verwenden Sie maxlength um die maximale Länge des eingegebenen Wertes in Zeichen festzulegen.

Das folgende Beispiel erfordert, dass der eingegebene Wert 4–8 Zeichen lang ist.

<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>

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 so gerendert:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, erhalten Sie eine entsprechende Fehlermeldung (die sich zwischen den Browsern unterscheidet). Wenn Sie versuchen, mehr als 8 Zeichen einzugeben, lässt der Browser dies nicht zu.

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, den der eingegebene Wert erfüllen muss, um als gültig angesehen zu werden (siehe Validierung gegen einen regulären Ausdruck für einen einfachen Crash-Kurs zur Verwendung regulärer Ausdrücke zur Validierung von Eingaben).

Das folgende Beispiel schränkt den Wert auf 4-8 Zeichen ein und erfordert, dass er nur Kleinbuchstaben enthält.

<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>

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

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

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 so gerendert:

Gute Beispiele für die Kontexteinbindung von Texteingaben finden Sie in unserem Artikel Ihr erstes HTML-Formular und Wie man ein HTML-Formular strukturiert.

• HTML-Formulare
• <input> und die HTMLInputElement-Schnittstelle, auf der es basiert.
• <input type="search">
• <textarea>: Mehrzeilige Texteingabe
• Kompatibilität von CSS-Eigenschaften