WHATWG版HTMLでinput
要素とtextarea
要素にminlength
属性が追加
ウェブページのフォーム入力欄には、maxlength
属性を書くことにより入力の最大文字数を設定することができます。
一行入力欄である <input type="text"/>
と <input type="password"/>
のmaxlength
属性はRFC1866(HTML 2.0)の頃から定義されています。HTML5ではtextarea
要素にも設定できるようになり、どのブラウザも最新版では対応しています[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のHTML5仕様にも追加されました。
脚注
-
1.
IEは10から対応、またOpera12系は未対応 ↩ 戻る