HTML 属性: minlength

minlength 属性は、ユーザーが <input> または <textarea> に入力できる最小文字列長を（UTF-16 コード単位で）定義します。この属性は 0 以上の整数値である必要があります。

長さは UTF-16 コード単位で測定され、（多くの文字体系では）文字数と等しくなります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は maxlength の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。

入力欄のテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 validityState.tooShort が true を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。

minlength は required の意味を含みません。入力欄が minlength 制約に違反するのは、ユーザーが値を入力した場合のみです。入力欄に required が設定されていない場合、 minlength を設定していても、空文字列を送信することができます。

試してみましょう

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

<label for="description">Product description:</label>
<textarea
  id="description"
  name="description"
  minlength="10"
  maxlength="40"
  required></textarea>

label {
  display: block;
  margin-top: 1em;
}

input:valid,
textarea:valid {
  background-color: palegreen;
}

例

minlength="5" を追加すると、値は空か 5 文字以上でないと有効にはならなくなります。

html

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

擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null （空欄）または 5 文字以上であれば有効になります。ライム色は無効であり、レモン色は有効です。

css

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

仕様書

Specification
HTML # attr-input-minlength
HTML # attr-textarea-minlength

HTML 属性: minlength

試してみましょう

例

仕様書

ブラウザーの互換性

html.elements.input.minlength

html.elements.textarea.minlength

関連情報