<input type="text">

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

let theText = myTextInput.value;

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

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

Der Wert des List-Attributs ist die id eines <datalist>-Elements, das im selben Dokument vorhanden ist. Das <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das text-Eingabefeld eingeben kann. Dieser Wert muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die Texteingabe keine maximale Länge. 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 größer als maxlength UTF-16-Code-Einheiten ist. 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. Dieser Wert muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die Texteingabe keine Mindestlänge.

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

Das pattern-Attribut, falls angegeben, ist ein regulärer Ausdruck, den der value des Eingabefelds erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie vom RegExp-Typ verwendet und in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als Sequenz von Unicode-Codepunkten und nicht als ASCII behandelt wird. Es sollten keine Schrägstriche 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.

Siehe Festlegen 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 Information im Feld erwartet wird. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Ausrichtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Ausrichtung angezeigt werden muss, können Sie Unicode-Bidi-Formatierungszeichen verwenden, um die Ausrichtung des Platzhalters zu überschreiben; siehe Wie man Unicode-Kontrollen 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 immer noch direkt durch JavaScript-Code, der die value-Eigenschaft des HTMLInputElement setzt, geändert werden.

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein sollte. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies mehr oder weniger genau sein und sollte nicht darauf verlassen werden, dass es so ist; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und den Schriftart-Einstellungen (font).

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

Das globale Attribut spellcheck 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 die Spezifika der Verwendung von spellcheck auf <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 basierend auf einer übergeordneten spellcheck-Einstellung oder anderen Faktoren erfolgen.

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 Präferenzen des Benutzeragenten die Einstellung überschreiben.

<input>-Elemente vom Typ text erstellen grundlegende, einzeilige Eingaben. Sie sollten sie überall verwenden, wo Sie möchten, dass der Benutzer einen einzeiligen Wert eingibt und kein spezifischerer Eingabetyp zum Sammeln dieses Wertes verfügbar ist (zum Beispiel, wenn es sich um ein Datum, eine URL, eine E-Mail-Adresse oder einen Suchbegriff handelt, stehen Ihnen 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 angezeigt:

Wenn das Formular gesendet wird, wird das Daten-Name/Wert-Paar, das an den Server gesendet wird, name=Chris sein (wenn "Chris" als der Eingabewert vor dem Senden eingegeben wurde). Sie müssen darauf achten, das Attribut name auf das <input>-Element einzuschließen, andernfalls wird der Wert des Textfelds nicht mit den gesendeten Daten aufgenommen.

Sie können einen nützlichen Platzhalter innerhalb Ihrer Texteingabe bereitstellen, der einen Hinweis darauf geben kann, was eingegeben werden soll, indem Sie das Attribut placeholder verwenden. Sehen 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 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 wenn das Feld programmgesteuert durch Setzen seines value-Attributs einen Wert erhält).

Die physische Größe des Eingabefelds kann mit dem Attribut size gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Texteingabe gleichzeitig anzeigen kann. Dies beeinflusst die Breite des Elements, indem Sie die Breite in Zeichen anstelle von Pixeln angeben. 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, die auf sie angewendet wird (da eine grundlegende Texteingabe in der Lage sein muss, jeden beliebigen String zu akzeptieren), aber es gibt einige Client-seitige Validierungsoptionen, die wir unten besprechen werden.

Es gibt nützliche Pseudoklassen, die zum Stylen von Formularelementen verfügbar sind, um dem Benutzer anzuzeigen, wann ihre Werte gültig oder ungültig sind. Diese sind :valid und :invalid. In diesem Abschnitt werden wir das folgende CSS verwenden, 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>, das nach dem Formularelement platziert wird und als Halter für die Symbole dient. Dies war notwendig, weil einige Eingabetypen in manchen Browsern Symbole, die direkt nach ihnen platziert werden, nicht gut anzeigen.

Sie können das required-Attribut verwenden, um das Eingeben eines Wertes vor der Formularübermittlung zu einer 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 angezeigt:

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

Sie können eine Mindestlänge (in Zeichen) für den eingegebenen Wert mit dem Attribut minlength festlegen; verwenden Sie in ähnlicher Weise maxlength, um die maximale Länge des eingegebenen Wertes in Zeichen festzulegen.

Das Beispiel unten 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 wie folgt angezeigt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, wird Ihnen eine entsprechende Fehlermeldung angezeigt (die je nach Browser unterschiedlich ist). Wenn Sie versuchen, mehr als 8 Zeichen einzugeben, lässt der Browser dies nicht zu.

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

Das Beispiel unten beschränkt den Wert auf 4–8 Zeichen 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 wie folgt angezeigt:

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

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