WHATWG版HTMLでinput要素とtextarea要素にminlength属性が追加

ウェブページのフォーム入力欄には、maxlength属性を書くことにより入力の最大文字数を設定することができます。

一行入力欄である <input type="text"/><input type="password"/>maxlength属性はRFC1866(HTML 2.0)の頃から定義されています。HTML5ではtextarea要素(W3C)にも設定できるようになり、どのブラウザも最新版では対応しています[1]

一方、逆に最小文字数を設定するminlength属性、ありそうでいままでなかったのですが、先日WHATWGのHTML Living Standard(www.whatwg.org)に取り入れられました。

設定できる要素

§

input要素とtextarea要素に設定することができます。

input要素で設定できるのは text, search, url, tel, email, password の6タイプとなっています(maxlength属性と同じ)。input要素の節にはタイプ毎に設定できる属性の一覧表(www.whatwg.org)があるのでこれを見るのが分かりやすいでしょう。

required属性との関係

§

minlength属性だけを指定した状態では、「未入力」は許可されます。つまり、「何も入力しなくてもいいけど、もし入力するならX文字以上にしてね」ということになります。

未入力を許可しない場合はrequired属性を併記しましょう。

指定できる値

§

0以上の整数です。

またmaxlength属性と両方指定されている場合、maxlength属性値と同じかそれより小さい数値でなくてはなりません。まあ言うまでもなく当たり前ですね。

このあたりのルールは4.10.19.4 Setting minimum input length requirements: the minlength attribute(www.whatwg.org)に記載されています。

コード例

§

こんな仕様の会員登録フォームを例にします。

会員番号
必須、8桁固定
パスワード
必須、10桁以上
年齢
任意、成人しか登録できないので2桁〜3桁のみを許可
<form action="regist.php" method="post">
  <p><label>会員番号(<strong>必須</strong>、8桁)
    <input name="id" required="" minlength="8" maxlength="8"/></label></p>
  <p><label>パスワード(<strong>必須</strong>、10桁以上)
    <input type="password" name="pwd" required="" minlength="10"/></label></p>
  <p><label>年齢
    <input name="age" minlength="2" maxlength="3"/></label></p>
  <p><button>登録</button></p>
</form>

W3C版では?

§

2013年10月4日現在、HTML5 と HTML 5.1 では Editor's Draft 版も含め定義されていません。

The W3C Markup Validation Service(validator.w3.org)でもエラーになります。

2014年2月5日追記2014年2月4日版(W3C)でW3CのHTML5仕様にも追加されました。

脚注

  • 1.

    IEは10から対応、またOpera12系は未対応 ↩ 戻る