<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 enthält. Sie können diesen Wert mit der value-Eigenschaft des HTMLInputElement in JavaScript abrufen.

let theText = myTextInput.value;

Wenn für die Eingabe keine Validierungsbeschränkungen vorhanden sind (siehe Validierung für weitere Details), darf der Wert ein leerer String ("") sein.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Attributen, die bei allen <input> Elementen unabhängig von ihrem Typ funktionieren, 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. 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.

maxlength

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 ist, hat die Texteingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des Textwerts des Feldes größer ist als maxlength UTF-16-Codeeinheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird.

minlength

Die minimale Zeichenlänge (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 ungültiger Wert angegeben ist, hat die Texteingabe keine Mindestlänge.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, 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 durch den Benutzer geändert wird.

pattern

Wenn das pattern-Attribut angegeben ist, handelt es sich um einen regulären Ausdruck, dem der value des Eingabefelds entsprechen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie es vom RegExp-Typ verwendet wird und wie es 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 Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Um das Mustertest nicht unnötig zu erschweren, sollten keine Schrägstriche um die Textmuster herum spezifiziert werden.

Wenn das angegebene Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewandt und dieses Attribut wird vollständig 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 erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung hat (LTR oder RTL), der placeholder jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode bidirektionale Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerungen für bidi-Text verwendet für 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 geändert werden.

size

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 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, abhängig von den Zeichen und den Schriftart-Einstellungen (font), die verwendet werden.

Dies setzt keine Grenze für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann; es gibt nur an, wie viele Zeichen ungefähr auf einmal sichtbar sind. 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 eine Rechtschreibprüfung für 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 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.

"" (leerer String) oder kein Wert

Folgen Sie dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der spellcheck-Einstellung eines übergeordneten Elements oder anderen Faktoren basieren.

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

Der Wert, der durch das Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerungselements wider, wenn die Präferenzen des Benutzeragenten die Einstellung außer 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 verfügbar 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 folgendermaßen 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 müssen daran denken, das name-Attribut im <input> Element einzuschließen, da sonst der Wert des Textfeldes nicht mit den übermittelten Daten übermittelt wird.

Platzhalter festlegen

Sie können einen nützlichen 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 können 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 Größe des Eingabeelements

Die physische Größe des Eingabefeldes kann mit dem size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Texteingabe gleichzeitig anzeigen kann. Dies beeinflusst die Breite des Elements und ermöglicht 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 nützliche Pseudoklassen, die zum Styling von Formularelementen verwendet werden können, 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 Eingabefeldern mit gültigen Werten und ein Kreuz (X) neben Eingaben mit ungültigen 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 für 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 folgendermaßen dargestellt:

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

Länge des Eingabewerts

Sie können eine Mindestlänge (in Zeichen) für den eingegebenen Wert mit dem minlength-Attribut angeben; verwenden Sie ebenfalls 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 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 folgendermaßen 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, lässt der Browser dies nicht zu.

Angeben eines Musters

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 anhand eines regulären Ausdrucks für einen Schnellkurs zur Verwendung regulärer Ausdrücke 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: #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 folgendermaßen dargestellt:

Beispiele

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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