<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 mit 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 den 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> stellt eine Liste von vordefinierten Werten bereit, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle 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 die text-Eingabe eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn maxlength nicht angegeben ist oder ein ungültiger Wert angegeben ist, hat die text-Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des Textwerts des Feldes größer als maxlength UTF-16 Codeeinheiten 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. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength angegebenen Wert ist. Wenn minlength nicht angegeben ist oder ein ungültiger Wert angegeben ist, hat die text-Eingabe keine Mindestlänge.

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, 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, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung 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 dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks festgelegt, damit das Muster als Folge von Unicode-Codepunkten und nicht als ASCII behandelt wird. Keine Schrägstriche sollten um den Mustertext angegeben werden.

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

Weitere Einzelheiten 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 Information in das 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 des Steuerelements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-bidirektionale Algorithmusformatierungszeichen verwenden, um die Richtung im Platzhalter außer Kraft zu setzen; siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für weitere Informationen.

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

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 die Breite der Zeichen variiert, kann dies möglicherweise nicht genau sein und sollte nicht darauf vertraut 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 in Verwendung).

Dies legt keine Begrenzung fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig sichtbar 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 bei jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir die Besonderheiten in Bezug auf die Verwendung von spellcheck bei <input>-Elementen. Die erlaubten Werte für spellcheck sind:

false

Deaktivieren der Rechtschreibprüfung für dieses Element.

true

Aktivieren der Rechtschreibprüfung für dieses Element.

"" (leerer String) oder kein Wert

Befolgen Sie das Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann sich auf die spellcheck-Einstellung des übergeordneten Elements oder andere Faktoren stützen.

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

Der Wert, der durch Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Einstellungen des Benutzeragenten die Einstellung außer Kraft setzen.

<input>-Elemente vom Typ text erstellen grundlegende, einzeilige Eingaben. Sie sollten diese verwenden, wann immer Sie wollen, dass der Benutzer einen einzeiligen Wert eingibt und es keinen spezifischeren Eingabetyp gibt, um diesen Wert zu erfassen (zum Beispiel, wenn es sich um ein Datum, eine URL, eine E-Mail-Adresse 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 folgendermaßen dargestellt:

Wenn das Formular eingereicht wird, wird das Datenname/Werte-Paar name=Chris an den Server gesendet (falls "Chris" als Eingabewert vor der Übermittlung eingegeben wurde). Sie müssen daran denken, das name-Attribut im <input>-Element anzugeben, andernfalls wird der Wert des Textfelds nicht mit den übermittelten Daten aufgenommen.

Sie können innerhalb Ihrer Texteingabe einen nützlichen Platzhalter angeben, der einen Hinweis darauf geben kann, was eingegeben werden soll, indem Sie das placeholder-Attribut 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 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 programmgesteuert durch Einstellen seines value-Attributs einen Wert gesetzt bekommt).

Die physische Größe des Eingabefelds kann durch das size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Texteingabefeld gleichzeitig anzeigen kann. Dies wirkt sich auf die Breite des Elements aus 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 vom Typ text haben keine automatische Validierung (da eine grundlegende Texteingabe in der Lage sein muss, beliebige Strings zu akzeptieren), aber es gibt einige clientseitige Validierungsoptionen, die wir unten diskutieren werden.

Es gibt hilfreiche Pseudo-Klassen zum Formatieren von Formularelementen, um dem Benutzer zu zeigen, 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 neben Eingaben anzeigt, die gültige Werte enthalten, und ein Kreuz (X) neben Eingaben, die ungültige Werte enthalten.

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 Formelement platziert wird und als Halter für die Symbole fungiert. Dies war notwendig, weil einige Eingabetypen bei einigen Browsern keine Symbole direkt nach ihnen gut darstellen.

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

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

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

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen abzusenden, erhalten Sie eine entsprechende Fehlermeldung (die zwischen den Browsern variiert). 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 betrachtet zu werden (siehe Validierung gegen einen regulären Ausdruck für einen Einsteigerkurs über die 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 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 dargestellt:

Gute Beispiele für Texteingaben im Kontext finden Sie in unseren Artikeln Ihr erstes HTML-Formular und Anleitung: Eine HTML-Form strukturieren.

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