<input type="text">

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

let theText = myTextInput.value;

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

Zusätzlich zu den globalen Attributen und Attributen, die auf alle <input>-Elemente unabhängig von ihrem 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. Das <datalist> bietet eine Liste vordefinierter Werte, um dem Benutzer Vorschläge für diese Eingabe zu machen. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in den vorgeschlagenen Optionen einbezogen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste wählen oder einen anderen Wert angeben.

Die maximale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in die text-Eingabe eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength 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 Bescheidprüfungen nicht bestehen, wenn die Länge des Textwertes des Feldes größer ist als maxlength UTF-16 Code-Einheiten. Die Bescheidprüfungen werden nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die Mindestzeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in die text-Eingabe eingeben kann. Dies muss ein nicht-negativer, ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength festgelegten Wert ist. Wenn kein minlength angegeben oder ein ungültiger Wert angegeben ist, hat die text-Eingabe keine Mindestlänge.

Die Eingabe wird die Bescheidprüfungen nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16 Code-Einheiten lang ist. Die Bescheidprüfungen werden nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern-Attribut ist, wenn angegeben, ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, um die Bescheidprüfungen 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 ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als Unicode-Codepunkte-Sequenz anstelle als ASCII behandelt wird. Es sollten keine Schrägstriche um den Mustertext angegeben werden.

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

Siehe Spezifizieren eines Musters für weitere Details und ein Beispiel.

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp darstellt und keine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) aufweist, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Zweiweg-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerungen für bidi-Text verwendet für weitere Informationen.

Ein Boolesches Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, indem die HTMLInputElement value-Eigenschaft direkt festgelegt wird.

Das size-Attribut ist ein numerischer Wert, der anzeigt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da sich die Zeichenbreiten unterscheiden, kann dies genau oder nicht genau sein und sollte nicht als solche angenommen werden; die resultierende Eingabe kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font-Einstellungen).

Dies setzt keine Grenze, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur annähernd an, wie viele auf einmal angezeigt werden können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Das spellcheck globale Attribut wird verwendet, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir spezifische Details im Zusammenhang mit der Verwendung von spellcheck-Attributen auf <input>-Elementen. Die zulässigen Werte für spellcheck sind:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leerer String) oder kein Wert

Folgt dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf den spellcheck-Einstellungen eines übergeordneten Elements oder andere Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktiviert haben, wenn es nicht das readonly-Attribut gesetzt hat und 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 einer Steuerung wider, wenn die Einstellungen des Benutzeragenten die Einstellung überschreiben.

<input>-Elemente vom Typ text erstellen grundlegende, einzeilige Eingaben. Sie sollten diese verwenden, wann immer Sie möchten, dass der Benutzer einen einzeiligen Wert eingibt und kein spezifischerer Eingabetyp für das Erfassen dieses Wertes verfügbar ist (zum Beispiel, wenn es sich um ein Datum, eine URL, eine E-Mail oder einen Suchbegriff handelt, 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 wie folgt dargestellt:

Wenn das Formular übermittelt wird, wird das Daten Name/Wert-Paar an den Server gesendet, das name=Chris lautet (wenn "Chris" als Eingabewert vor der Einreichung eingegeben wurde). Sie müssen das name-Attribut im <input>-Element einfügen, sonst wird der Wert des Textfeldes nicht mit den übermittelten Daten eingeschlossen.

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 einschließen. Schauen Sie sich das folgende Beispiel an:

<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 können sehen, wie der Platzhalter unten dargestellt wird:

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

Die physische Größe der Eingabebox kann durch das size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Texteingabe gleichzeitig anzeigen kann. Dies beeinflusst die Breite des Elements und ermöglicht es Ihnen, die Breite in Bezug auf Zeichen anstelle von Pixeln zu spezifizieren. In diesem Beispiel ist die Eingabe beispielsweise 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 vom Typ text haben keine automatische Validierung, da eine grundlegende Texteingabe in der Lage sein muss, beliebige Zeichenfolgen zu akzeptieren. Es gibt jedoch einige Optionen für die clientseitige Validierung, die wir im Folgenden besprechen werden.

Es gibt nützliche Pseudo-Klassen für das Styling von Formularelementen, um dem Benutzer anzuzeigen, wann ihre Werte gültig oder ungültig sind. Diese sind :valid und :invalid. In diesem Abschnitt verwenden wir die folgende CSS, die 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 werden muss und als Halter für die Symbole fungiert. Dies war notwendig, da einige Eingabetypen in einigen Browsern die direkt nach ihnen platzierten Symbole nicht gut darstellen.

Sie können das required-Attribut verwenden, um das Eintragen eines Wertes vor der Formularübermittlung zur Pflicht zu machen:

<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 wie folgt dargestellt:

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

Sie können eine Mindestlänge (in Zeichen) für den eingegebenen Wert mithilfe des minlength-Attributs festlegen; verwenden Sie ebenso maxlength, um die maximale Länge des eingegebenen Wertes in Zeichen festzulegen.

Das folgende Beispiel erfordert, dass der eingegebene Wert eine Länge von 4–8 Zeichen hat.

<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 wie folgt dargestellt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, erhalten Sie eine entsprechende Fehlermeldung (die sich je nach Browser 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, dem der eingegebene Wert entsprechen muss, um als gültig betrachtet zu werden (siehe Validierung durch einen regulären Ausdruck für einen kurzen Kurs zur Verwendung von regulären Ausdrücken zur Validierung von Eingaben).

Das folgende Beispiel beschränkt den Wert auf 4-8 Zeichen und erfordert, dass er nur aus Kleinbuchstaben besteht.

<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 wie folgt dargestellt:

Sie können gute Beispiele für Texteingaben im Kontext in unseren Artikeln Ihr erstes HTML-Formular und Wie man ein HTML-Formular strukturiert sehen.

• HTML-Formulare
• <input> und das HTMLInputElement Interface, auf dem es basiert.
• <input type="search">
• <textarea>: Mehrzeilige Texteingabe