<input type="text"> HTML-Attributwert

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 ein String, der den aktuellen Wert des in das Textfeld eingegebenen Textes enthlt. Sie knnen diesen Wert mit der value-Eigenschaft des HTMLInputElement in JavaScript abrufen.

let theText = myTextInput.value;

Wenn fr die Eingabe keine Validierungsbeschrnkungen vorhanden sind (siehe Validierung fr weitere Details), darf der Wert ein leerer String ("") sein.

Zustzliche Attribute

Zustzlich zu den globalen Attributen und den Attributen, die bei allen <input> Elementen unabhngig von ihrem Typ funktionieren, untersttzen 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 fr 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 Vorschlge, keine Anforderungen: Benutzer knnen aus dieser vordefinierten Liste auswhlen oder einen anderen Wert angeben.

maxlength

Die maximale Zeichenlnge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die Texteingabe eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder hher sein. Wenn kein maxlength angegeben ist oder ein ungltiger Wert angegeben ist, hat die Texteingabe keine maximale Lnge. Dieser Wert muss auch grer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschrnkungsvalidierung nicht bestehen, wenn die Lnge des Textwerts des Feldes grer ist als maxlength UTF-16-Codeeinheiten. Die Einschrnkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer gendert wird.

minlength

Die minimale Zeichenlnge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die Texteingabe eingeben kann. Dies muss ein nicht-negativer Ganzzahlwert sein, der kleiner oder gleich dem Wert sein muss, der durch maxlength festgelegt wurde. Wenn kein minlength angegeben ist oder ein ungltiger Wert angegeben ist, hat die Texteingabe keine Mindestlnge.

Die Eingabe wird die Einschrnkungsvalidierung nicht bestehen, wenn die Lnge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten betrgt. Die Einschrnkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer gendert wird.

pattern

Wenn das pattern-Attribut angegeben ist, handelt es sich um einen regulren Ausdruck, dem der value des Eingabefelds entsprechen muss, damit der Wert die Einschrnkungsvalidierung besteht. Es muss ein gltiger regulrer JavaScript-Ausdruck sein, wie es vom RegExp-Typ verwendet wird und wie es in unserem Leitfaden zu regulren Ausdrcken dokumentiert ist; das 'u'-Flag wird beim Kompilieren des regulren Ausdrucks angegeben, sodass das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Um das Mustertest nicht unntig zu erschweren, sollten keine Schrgstriche um die Textmuster herum spezifiziert werden.

Wenn das angegebene Muster nicht angegeben oder ungltig ist, wird kein regulrer Ausdruck angewandt und dieses Attribut wird vollstndig ignoriert.

Weitere Details und ein Beispiel finden Sie unter Angeben eines Musters.

placeholder

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp veranschaulicht, anstatt eine erklrende Nachricht. Der Text darf keine Wagenrcklufe oder Zeilenumbrche enthalten.

Wenn der Inhalt der Steuerung eine Richtung hat (LTR oder RTL), der placeholder jedoch in der entgegengesetzten Richtung angezeigt werden muss, knnen Sie Unicode bidirektionale Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu berschreiben; siehe Wie man Unicode-Steuerungen fr bidi-Text verwendet fr mehr Informationen.

readonly

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch JavaScript-Code direkt ber die value-Eigenschaft von HTMLInputElement gendert werden.

size

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl grer als Null sein, und der Standardwert ist 20. Da die Zeichenbreiten variieren, kann dies genau sein oder nicht, und es sollte nicht darauf vertraut werden, dass dies der Fall ist; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhngig von den Zeichen und den Schriftart-Einstellungen (font), die verwendet werden.

Dies setzt keine Grenze fr die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann; es gibt nur an, wie viele Zeichen ungefhr auf einmal sichtbar sind. Um ein oberes Limit fr die Lnge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

spellcheck

Das spellcheck globale Attribut wird verwendet, um anzugeben, ob eine Rechtschreibprfung fr ein Element aktiviert werden soll. Es kann bei jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir die spezifischen Anwendungen von spellcheck auf <input> Elementen. Die zulssigen Werte fr spellcheck sind:

false

Deaktivieren Sie die Rechtschreibprfung fr dieses Element.

true

Aktivieren Sie die Rechtschreibprfung fr dieses Element.

"" (leerer String) oder kein Wert

Folgen Sie dem Standardverhalten des Elements fr die Rechtschreibprfung. Dies kann auf der spellcheck-Einstellung eines bergeordneten Elements oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprfung aktivieren, sofern das readonly-Attribut nicht gesetzt ist und es nicht deaktiviert ist.

Der Wert, der durch das Lesen von spellcheck zurckgegeben wird, spiegelt mglicherweise nicht den tatschlichen Zustand der Rechtschreibprfung innerhalb eines Steuerungselements wider, wenn die Prferenzen des Benutzeragenten die Einstellung auer Kraft setzen.

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 spezifischerer Eingabetyp verfgbar ist, um diesen Wert zu erfassen (beispielsweise ist ein date, URL, email oder Suchbegriff eine bessere Option).

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

Wenn bermittelt, wird das Datennamen/Wert-Paar, das an den Server gesendet wird, name=Chris sein (falls "Chris" als Eingabewert vor dem Absenden eingegeben wurde). Sie mssen daran denken, das name-Attribut im <input> Element einzuschlieen, da sonst der Wert des Textfeldes nicht mit den bermittelten Daten bermittelt wird.

Platzhalter festlegen

Sie knnen einen ntzlichen Platzhalter in Ihrer Texteingabe bereitstellen, der einen Hinweis darauf gibt, 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 knnen sehen, wie der Platzhalter unten dargestellt wird:

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

Physische Gre des Eingabeelements

Die physische Gre des Eingabefeldes kann mit dem size-Attribut gesteuert werden. Damit knnen Sie die Anzahl der Zeichen angeben, die die Texteingabe gleichzeitig anzeigen kann. Dies beeinflusst die Breite des Elements und ermglicht es Ihnen, die Breite in Zeichen statt in Pixeln anzugeben. 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 des Typs text haben keine automatische Validierung auf sie angewendet (da eine grundlegende Texteingabe in der Lage sein muss, beliebige Zeichenfolgen zu akzeptieren), aber es gibt einige clientseitige Validierungsoptionen, die wir im Folgenden diskutieren werden.

Ein Hinweis zum Styling

Es gibt ntzliche Pseudoklassen, die zum Styling von Formularelementen verwendet werden knnen, um dem Benutzer zu zeigen, wann ihre Werte gltig oder ungltig sind. Diese sind :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, das ein Hkchen neben Eingabefeldern mit gltigen Werten und ein Kreuz (X) neben Eingaben mit ungltigen Werten platzieren wird.

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 fr die Symbole dient. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Symbole, die direkt nach ihnen platziert werden, nicht gut anzeigen.

Eingabe erforderlich machen

Das required-Attribut kann auf einfache Weise verwendet werden, damit das Eingeben eines Werts erforderlich ist, bevor das Formular gesendet werden darf:

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

Wenn Sie versuchen, das Formular zu senden, ohne einen Benutzernamen einzugeben, zeigt der Browser eine Fehlermeldung an.

Lnge des Eingabewerts

Sie knnen eine Mindestlnge (in Zeichen) fr den eingegebenen Wert mit dem minlength-Attribut angeben; verwenden Sie ebenfalls maxlength, um die maximale Lnge des eingegebenen Werts in Zeichen festzulegen.

Das folgende Beispiel erfordert, dass der eingegebene Wert eine Lnge von 4 bis 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 folgendermaen dargestellt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu senden, erhalten Sie eine entsprechende Fehlermeldung (die je nach Browser unterschiedlich ist). Wenn Sie versuchen, mehr als 8 Zeichen einzugeben, lsst der Browser dies nicht zu.

Angeben eines Musters

Sie knnen das pattern-Attribut verwenden, um einen regulren Ausdruck anzugeben, dem der eingegebene Wert entsprechen muss, um als gltig zu gelten (siehe Validierung anhand eines regulren Ausdrucks fr einen Schnellkurs zur Verwendung regulrer Ausdrcke zur Validierung von Eingaben).

Das folgende Beispiel beschrnkt den Wert auf 4-8 Zeichen und erfordert, dass er nur Kleinbuchstaben enthlt.

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

Beispiele

Sie finden gute Beispiele fr Texteingaben im Kontext in unseren Artikeln Ihr erstes HTML-Formular und Wie man ein HTML-Formular strukturiert.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• HTML-Formulare
• <input> und das HTMLInputElement, auf dessen Basis es liegt.
• <input type="search">
• <textarea>: Mehrzeilige Texteingabe