<input type="text">

Das value-Attribut ist eine Zeichenfolge, die den aktuellen Wert des in das Textfeld eingegebenen Textes enthält. Sie können diesen Wert unter Verwendung 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 eine leere Zeichenfolge ("") 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 im selben Dokument befindlichen <datalist>-Elements. Der <datalist> bietet eine Liste vordefinierter Werte, die dem Nutzer für diese Eingabe vorgeschlagen werden. Jegliche 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-Codeeinheiten), die der Benutzer in die Texteingabe eingeben kann. Dies 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 schlägt bei der Constraint-Validierung fehl, wenn die Länge des Textwerts des Feldes größer als maxlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung 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 Texteingabe eingeben kann. Dies 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 schlägt bei der Constraint-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, damit der Wert die Constraint-Validierung besteht. 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 beschrieben; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche um den Mustertest angegeben werden.

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

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

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

Wenn der Inhalt der Kontrolle eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-Bidirektionalitätsalgorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben. Siehe Wie man Unicode-Steuerelemente für bidirektionalen Text verwendet für mehr Informationen.

Ein Boolean-Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch JavaScript-Code geändert werden, der direkt die HTMLInputElement-value-Eigenschaft setzt.

Das size-Attribut ist ein numerischer Wert, der angibt, 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 Zeichenbreiten unterscheiden, kann dies möglicherweise nicht exakt sein, und es sollte nicht darauf vertraut werden, dass es so ist; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der verwendeten Schriftart (font-Einstellungen).

Dies setzt keine Begrenzung, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig zu sehen sein können. Um eine obere Grenze 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 für jeglichen bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir spezifische Aspekte der Verwendung von spellcheck auf <input>-Elementen. Die zulässigen 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 Zeichenfolge) oder kein Wert

Folgen Sie dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der Einstellung des übergeordneten Elements' spellcheck oder anderen 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 beim Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung in einem Steuerungselement wider, wenn die Vorlieben 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 es keinen spezifischeren Eingabetyp gibt, um diesen Wert zu sammeln (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 es übermittelt wird, wird das Datenname/Wert-Paar, das an den Server gesendet wird, name=Chris sein (wenn "Chris" als Eingabewert vor der Übermittlung eingegeben wurde). Sie müssen das name-Attribut auf dem <input>-Element enthalten, sonst wird der Wert des Textfeldes nicht mit den übermittelten Daten aufgenommen.

Sie können innerhalb Ihrer Texteingabe einen nützlichen Platzhalter bereitstellen, der einen Hinweis darauf geben kann, was eingegeben werden soll, indem Sie das placeholder-Attribut verwenden. 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 typischerweise in einer helleren Farbe als die Vordergrundfarbe des Elements gerendert und verschwindet automatisch, wenn der Benutzer beginnt, Text in das Feld einzugeben (oder wann immer das Feld einen Wert programmgesteuert durch Setzen seines value-Attributs erhält).

Die physische Größe der Eingabe-Box kann unter Verwendung des size-Attributs gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Texteingabe gleichzeitig anzeigen kann. Dies beeinflusst die Breite des Elements und lässt Sie die Breite in Bezug auf Zeichen anstatt Pixel angeben. In diesem Beispiel ist zum Beispiel die Eingabe 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, aber es stehen einige clientseitige Validierungsoptionen zur Verfügung, die wir unten besprechen werden.

Es gibt nützliche Pseudo-Klassen, die bei der Formatierung von Formularelementen helfen können, sodass der Benutzer sehen kann, wann seine 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 platziert.

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, dass ein <span>-Element nach dem Formelement platziert wird, das als Halter für die Icons dient. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Icons, die direkt nach ihnen platziert werden, nicht sehr gut anzeigen.

Sie können das required-Attribut als einfache Möglichkeit verwenden, 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 wie folgt dargestellt:

Wenn Sie versuchen, das Formular abzusenden, ohne einen Suchbegriff einzugeben, wird der Browser eine Fehlermeldung anzeigen.

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

Im folgenden Beispiel wird gefordert, 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 dargestellt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, erhalten Sie eine entsprechende Fehlermeldung (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 pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der eingegebene Wert entsprechen muss, um als gültig betrachtet zu werden (siehe Validierung gegen einen regulären Ausdruck für einen Schnellkurs zur Verwendung regulärer Ausdrücke zur Validierung von Eingaben).

Im folgenden Beispiel wird der Wert auf 4-8 Zeichen beschränkt und verlangt, 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 dargestellt:

Gute Beispiele für verwendete Texteingaben im Kontext 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