<input type="text">

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Das value-Attribut ist eine Zeichenkette, die 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 eine leere Zeichenkette ("") sein.

Zusätzliche Attribute

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.

list

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

maxlength

Die maximale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in die text Eingabe einfügen kann. Dies muss ein intakter Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die text Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung fehlschlagen, wenn die Länge des Textwerts des Feldes länger als maxlength UTF-16 Code-Einheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in die text Eingabe einfügen kann. Dies muss ein nicht-negativer ganzzahliger Wert kleiner oder gleich dem durch maxlength angegebenen Wert sein. Wenn kein minlength angegeben wird oder ein ungültiger Wert angegeben wird, hat die text Eingabe keine Mindestlänge.

Die Eingabe wird die Einschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16 Code-Einheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value des Eingabefelds erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Er muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er durch den 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, sodass das Muster als Unicode-Codepunkte-Sequenz und nicht als ASCII behandelt wird. Keine Schrägstriche sollten um den Musterausdruck 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.

placeholder

Das placeholder-Attribut ist eine Zeichenkette, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information in diesem Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Zeilenumbrüche oder Zeilenfeeds enthalten.

Wenn der Inhalt des Steuerobjekts eine Ausrichtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden soll, können Sie die Unicode-bidirektionale Algorithmus-Formatierungszeichen verwenden, um die Richtung des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerelemente für bidirektionalen Text verwendet für mehr Informationen.

readonly

Ein boolesches Attribut, das bedeutet, dass dieses Feld, wenn vorhanden, nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch dennoch durch JavaScript-Code direkt durch Setzen der value-Eigenschaft des HTMLInputElement geändert werden.

size

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; die resultierende Eingabe kann je nach den Zeichen und den (font-Einstellungen) eingestellten Schriftarteneinstellungen schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies legt keine Begrenzung fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele auf einmal gesehen werden können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

spellcheck

Das spellcheck globale Attribut wird verwendet, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann für jeden bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir spezifische Details zur Verwendung von spellcheck bei <input> Elementen. Die erlaubten Werte für spellcheck sind:

false

Rechtschreibprüfung für dieses Element deaktivieren.

true

Rechtschreibprüfung für dieses Element aktivieren.

"" (leere Zeichenkette) oder kein Wert

Dem Standardverhalten des Elements für die Rechtschreibprüfung folgen. Dies kann auf der spellcheck-Einstellung eines Elternteils 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 Steuerelement wider, wenn die Vorlieben des Benutzeragenten die Einstellung überschreiben.

Verwendung von Texteingaben

<input> Elemente des Typs text erstellen grundlegende, einzeilige Eingaben. Sie sollten sie überall dort verwenden, wo der Benutzer einen einzeiligen Wert eingeben soll und kein spezifizierterer Eingabetyp für die Erfassung dieses Wertes verfügbar ist (zum Beispiel, wenn es ein Datum, URL, E-Mail oder Suchbegriff ist, stehen Ihnen bessere Optionen zur Verfügung).

Einfaches Beispiel

<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 so dargestellt:

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

Platzhalter setzen

Sie können einen nützlichen Platzhalter in Ihrem Texteingabefeld bereitstellen, 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 angezeigt wird:

Der Platzhalter wird normalerweise in einer helleren Farbe als die Vordergrundfarbe des Elements wiedergegeben und verschwindet automatisch, wenn der Benutzer beginnt, Text in das Feld einzugeben (oder wann immer der Wert des Feldes programmatisch durch Setzen seines value-Attributs festgelegt wird).

Physische Größe des Eingabeelements

Die physische Größe der Eingabebox kann mithilfe des size-Attributs gesteuert werden. Mit ihm 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 in Pixel 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>

Validierung

<input>-Elemente vom Typ text haben keine automatische Validierung (da eine grundlegende Texteingabe in der Lage sein muss, beliebige Zeichenketten zu akzeptieren), aber es stehen einige clientseitige Validierungsoptionen zur Verfügung, die wir im Folgenden diskutieren werden.

Eine Anmerkung zur Gestaltung

Es gibt nützliche Pseudoklassen für die Gestaltung von Formularelementen, die dem Benutzer helfen, zu erkennen, 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 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, dass ein <span>-Element nach dem Formularelement platziert wird, das als Halter für die Symbole fungiert. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Symbole, die direkt nach ihnen platziert sind, nicht gut anzeigen.

Eingabe erforderlich machen

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

Wenn Sie versuchen, das Formular ohne eingegebenen Benutzernamen zu übermitteln, zeigt der Browser eine Fehlermeldung an.

Länge des Eingabewerts

Sie können eine minimale Länge (in Zeichen) für den eingegebenen Wert mithilfe des minlength-Attributs angeben; ebenso verwenden Sie maxlength, um die maximale Länge des eingegebenen Werts 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 so dargestellt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, 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.

Ein Muster spezifizieren

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der eingegebene Wert entsprechen muss, um als gültig zu gelten (siehe Validierung mit einem regulären Ausdruck für einen Schnellkurs zur Validierung von Eingaben mithilfe von regulären Ausdrücken).

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: #999999;
}

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 so dargestellt:

Beispiele

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.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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