Dasminlength-Attribut definiert die minimaleZeichenlänge, die der Benutzer in ein<input> oder<textarea> eingeben kann. Das Attribut muss einen ganzzahligen Wert von 0 oder höher haben.

Die Länge wird inUTF-16-Codeeinheiten gemessen, die oft, aber nicht immer, der Anzahl der Zeichen entsprechen. Wenn keinminlength angegeben ist oder ein ungültiger Wert angegeben wird, gibt es keine Mindestlänge für die Eingabe. Dieser Wert muss kleiner oder gleich dem Wert vonmaxlength sein, andernfalls wird der Wert niemals gültig sein, da es unmöglich ist, beide Kriterien zu erfüllen.

Die Eingabe wird die Gültigkeitsprüfung nicht bestehen, wenn die Länge des Textwerts des Feldes kürzer als dieminlength-UTF-16-Codeeinheiten ist, wobeivalidityState.tooShorttrue zurückgibt. Die Gültigkeitsprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Sobald das Absenden fehlschlägt, zeigen einige Browser eine Fehlermeldung an, die die erforderliche Mindestlänge und die aktuelle Länge angibt.

minlength impliziert nichtrequired; eine Eingabe verletzt nur eineminlength-Einschränkung, wenn der Benutzer einen Wert eingegeben hat. Wenn eine Eingabe nichtrequired ist, kann ein leerer String übermittelt werden, auch wennminlength gesetzt ist.

Probieren Sie es aus

<label for="name">Product name:</label><input   name="name"  type="text"  value="Shampoo"  minlength="3"  maxlength="20"  required /><label for="description">Product description:</label><textarea   name="description"  minlength="10"  maxlength="40"  required></textarea>

label {  display: block;  margin-top: 1em;}input:valid,textarea:valid {  background-color: palegreen;}

Beispiele

Durch Hinzufügen vonminlength="5" muss der Wert entweder leer oder fünf Zeichen oder länger sein, um gültig zu sein.

<label for="fruit">Enter a fruit name that is at least 5 letters long</label><input type="text" minlength="5" />

Wir können Pseudoklassen verwenden, um das Element basierend darauf zu stylen, ob der Wert gültig ist. Der Wert ist gültig, solange er entweder null (leer) oder fünf oder mehr Zeichen lang ist.Lime ist ungültig,lemon ist gültig.

input {  border: 2px solid currentColor;}input:invalid {  border: 2px dashed red;}input:invalid:focus {  background-image: linear-gradient(pink, lightgreen);}

Spezifikationen

Browser-Kompatibilität

html.elements.input.minlength

html.elements.textarea.minlength

Siehe auch

• maxlength
• size
• pattern
• Einschränkungsvalidierung
• Formularvalidierung
• <input>