<input type="text">

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

let theText = myTextInput.value;

Wenn für die Eingabe keine Validierungseinschränkungen festgelegt sind (siehe Validierung für weitere Details), kann der Wert eine leere Zeichenkette ("") sein.

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

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das im gleichen Dokument enthalten ist. Das <datalist> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen wird. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den vorgeschlagenen Optionen 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-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 ist oder ein ungültiger Wert festgelegt wurde, hat die text-Eingabe keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des Textwerts des Feldes größer ist als maxlength UTF-16-Code-Einheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenlä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 vom maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert festgelegt wurde, hat die text-Eingabe keine Mindestlänge.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kürzer ist als minlength UTF-16-Code-Einheiten. Die Einschränkungsvalidierung wird 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 Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er durch den RegExp-Typ verwendet wird und in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird bei der Kompilierung des regulären Ausdrucks angegeben, so dass das Muster als Sequenz von Unicode-Code-Punkten behandelt wird, statt als ASCII. Um das Muster herum sollten keine Schrägstriche 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 Einzelheiten und ein Beispiel finden Sie unter Angabe eines Musters.

Das placeholder-Attribut ist eine Zeichenkette, die 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 zeigt, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn die Kontrolle über eine bestimmte Ausrichtung (LTR oder RTL) verfügt, der Platzhalter jedoch in der entgegengesetzten Ausrichtung dargestellt werden muss, können Sie formatierende Zeichen des Unicode-Bidirektionalitätsalgorithmus verwenden, um die Ausrichtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für weitere Informationen.

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch direktem Setzen der HTMLInputElement-value-Eigenschaft über JavaScript-Code 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 genau sein oder auch nicht, und sollte nicht darauf verlassen werden. Das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der Schriftart (font-Einstellungen, die verwendet werden).

Dies legt keine Begrenzung für die Anzahl der Zeichen fest, die der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele gleichzeitig gesehen werden können. Um ein oberes Limit 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, hier betrachten wir jedoch die Besonderheiten 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.

"" (leere Zeichenkette) oder kein Wert

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

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

Der durch das Lesen von spellcheck zurückgegebene Wert spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb einer Steuerung wider, wenn die Präferenzen des User-Agents die Einstellung überschreiben.

<input>-Elemente des Typs text erstellen grundlegende, einzeilige Eingaben. Sie sollten sie überall dort 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, URL, E-Mail oder 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 folgendermaßen gerendert:

Wenn gesendet, wird das Daten-Name/Wert-Paar an den Server als name=Chris übertragen (wenn "Chris" als Eingabewert vor der Übermittlung eingegeben wurde). Sie müssen daran denken, das name-Attribut auf dem <input>-Element einzuschließen, andernfalls wird der Wert des Textfeldes nicht bei den gesendeten Daten eingeschlossen.

Sie können einen nützlichen Platzhalter in Ihre Texteingabe einfügen, der einen Hinweis darauf geben kann, was eingegeben werden soll, 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 können sehen, wie der Platzhalter unten gerendert 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 programmgesteuert durch Festlegen des value-Attributs einen Wert erhält).

Die physische Größe der Eingabebox kann über das size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Texteingabe gleichzeitig anzeigen kann. Dies hat Auswirkungen auf die Breite des Elements und ermöglicht es Ihnen, die Breite in Zeichen anstatt in Pixeln anzugeben. In diesem Beispiel ist die Eingabe zum Beispiel 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 grundlegende Texteingabe in der Lage sein muss, beliebige Zeichenfolgen zu akzeptieren. Es gibt jedoch einige clientseitige Validierungsoptionen, die wir im Folgenden diskutieren werden.

Es gibt nützliche Pseudo-Klassen zum Stylen von Formularelementen, um dem Benutzer zu helfen zu sehen, 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 enthält, die gültige Werte haben, und ein Kreuz (X) neben Eingaben, die ungültige Werte haben.

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 und als Halter für die Symbole dient. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Symbole, die direkt danach platziert werden, nicht gut anzeigen.

Sie können das required-Attribut verwenden, um die Eingabe eines Wertes vor der Formularübermittlung verpflichtend 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 folgendermaßen gerendert:

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

Sie können mit dem minlength-Attribut eine Mindestlänge (in Zeichen) für den eingegebenen Wert festlegen; ähnlich 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 folgendermaßen gerendert:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen abzusenden, 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 mit einem regulären Ausdruck für einen Crashkurs 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 folgendermaßen gerendert:

Gute Beispiele für die Verwendung von Texteingaben im Kontext finden Sie in unseren Artikeln 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