HTML のテキスト入力欄の minlength 属性2021年12月09日 21時30分

この記事は HTML アドベントカレンダーの 9 日目の分です。


HTML の input 要素と textarea 要素には minlength 属性を指定できます。入力するテキストの最小文字数を指定するものですが、いくつか注意点があります。

まず、minlength 属性を指定していても入力が必須となるわけではありません。何も入力していなくても (0 文字の入力でも) クライアント側フォーム検証を通ってフォーム送信可能になります。入力を必須にするには別途 required 属性を指定する必要があります。

次に、minlength 属性で指定される「文字数」とは UTF-16 の符号単位の数です。絵文字など Unicode の BMP (基本多言語面) 外の文字 (U+10000 以上の文字) は 2 文字として数えられます。この文字数の扱いは maxlength 属性も同じです。

<input type="text" name="q" minlength="2" maxlength="3">

というテキスト入力欄があったとき、「🍣」1 文字だけでもフォーム送信可能ですし、「🍣🍣」と 2 文字入力することはできません。

参考文献