<input> Elemente des Typstext erstellen einfache einzeilige Textfelder.

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label><input  type="text"   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

Dasvalue-Attribut ist eine Zeichenkette, die den aktuellen Wert des in das Textfeld eingegebenen Textes enthält. Sie können diesen Wert mithilfe derHTMLInputElementvalue-Eigenschaft in JavaScript abrufen.

let theText = myTextInput.value;

Wenn keine Validierungsbeschränkungen für die Eingabe vorhanden sind (sieheValidierung für weitere Details), kann der Wert eine leere Zeichenkette ("") sein.

Zusätzliche Attribute

Zusätzlich zu denglobalen 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 deslist-Attributs ist dieid 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 demtype 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 inUTF-16 Code-Einheiten), die der Benutzer in dietext Eingabe einfügen kann. Dies muss ein intakter Wert von 0 oder höher sein. Wenn keinmaxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat dietext Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert vonminlength sein.

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

minlength

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

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

pattern

Daspattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den dervalue des Eingabefelds erfüllen muss, um dieEinschränkungsvalidierung zu bestehen. Er muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er durch denRegExp Typ verwendet wird, und wie in unseremLeitfaden 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 alsASCII 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.

SieheFestlegen eines Musters für weitere Details und ein Beispiel.

placeholder

Dasplaceholder-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 Textdarf keine Zeilenumbrüche oder Zeilenfeeds enthalten.

Wenn der Inhalt des Steuerobjekts eine Ausrichtung (LTR oderRTL) 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; sieheWie 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. Seinvalue kann jedoch dennoch durch JavaScript-Code direkt durch Setzen dervalue-Eigenschaft desHTMLInputElement geändert werden.

size

Dassize-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 legtkeine 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 dasmaxlength-Attribut.

spellcheck

Dasspellcheck 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 vonspellcheck bei<input> Elementen. Die erlaubten Werte fürspellcheck 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 derspellcheck-Einstellung eines Elternteils oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktiviert haben, wenn es nicht dasreadonly-Attribut gesetzt hat und nicht deaktiviert ist.

Der Wert, der beim Lesen vonspellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung in einem Steuerelement wider, wenn die Vorlieben desBenutzeragenten die Einstellung überschreiben.

Verwendung von Texteingaben

<input> Elemente des Typstext 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 einDatum,URL,E-Mail oderSuchbegriff ist, stehen Ihnen bessere Optionen zur Verfügung).

Einfaches Beispiel

<form>  <div>    <label for="uname">Choose a username: </label>    <input type="text" 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, alsname=Chris (wenn "Chris" als Eingabewert vor der Übermittlung eingegeben wurde). Sie müssen immer daran denken, dasname-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 dasplaceholder-Attribut verwenden. Sehen Sie sich das folgende Beispiel an:

<form>  <div>    <label for="uname">Choose a username: </label>    <input      type="text"           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 seinesvalue-Attributs festgelegt wird).

Physische Größe des Eingabeelements

Die physische Größe der Eingabebox kann mithilfe dessize-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"           name="name"      placeholder="Lower case, all one word"      size="30" />  </div>  <div>    <button>Submit</button>  </div></form>

Validierung

<input>-Elemente vom Typtext 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 dasrequired-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" name="name" required />    <span></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 desminlength-Attributs angeben; ebenso verwenden Siemaxlength, 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"           name="name"      required      size="10"      placeholder="Username"      minlength="4"      maxlength="8" />    <span></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 daspattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der eingegebene Wert entsprechen muss, um als gültig zu gelten (sieheValidierung 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"           name="name"      required      size="45"      pattern="[a-z]{4,8}" />    <span></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 ArtikelnIhr erstes HTML-Formular undWie man ein HTML-Formular strukturiert sehen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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