フォームのmaxlength属性

input要素には、maxlengthという属性が定義されています。先日社内でこの属性について質問をうけたので、すこし調べてみることにしました。

最大文字数を指定する属性

HTML4仕様書では、maxlength属性は次のように定義されています。

maxlength = number [CN]

When the type attribute has the value "text" or "password", this attribute specifies the maximum number of characters the user may enter. This number may exceed the specified size, in which case the user agent should offer a scrolling mechanism. The default value for this attribute is an unlimited number.

「この属性はユーザーが入力できる最大文字数を指定する」と書かれています。たとえば、<input type="password" maxlength="12" />と記述すれば、このパスワード入力フィールドは、12文字まで文字を入力することが出来ます。

このmaxlength属性ですが、昔はあまり使えるものではありませんでした。指定される値は文字数という定義にもかかわらず、Netscape 4ではバイト数として認識されていたため、日本語などの多バイト文字の入力に難があったためです。今日のブラウザでは、仕様どおり文字数として処理しています。

日本語入力とmaxlength

さて、maxlengthで指定した値を超えて入力した文字、および変換中の扱いについては、ブラウザの相互運用性が確保されていません。

どのようなことか言葉で説明するのは難しいので、maxlength="5"を指定したテキストフィールドを設置してみました。ここに「Web標準Blog」と入力してみます。

FirefoxやSafariでは、「WebひょうじゅんBlog」と、5文字を超えても入力されたすべての文字が表示されます。この状態から「Web標準Blog」と変換し確定すると、「Blog」が切り取られ「Web標準」がテキストフィールドに入力されます。

しかしIEやOperaでは、「Webひょ」と、5文字を越えた時点でその先は表示されなくなります（確定状態ではないので変換は可能です）。確定するとFirefoxやSafariと同じく、「Blog」が切り取られて「Web標準」となります。

入力中の文字は読むことが出来ても、切り取られることが予想できないFirefoxやSafari。一方、指定文字数を超えた文字は読めなくなるが、テキストボックスに何らかの仕掛けがあることを暗示するIEやOpera。どちらもユーザーが「文字制限がある」と気づくために充分な情報を提示していないように感じますが、この違いは興味深いと思います。

maxlengthのユーザビリティ

さて、ここまで簡単に解説してはみたものの、入力文字数を制限することが望ましいケースは、あまりないように感じています。思いつくものでも、ユーザー名やパスワードくらいでしょうか。

郵便番号や携帯電話番号など、桁の決まっている情報に対してmaxlength="7"やmaxlength="11"が指定されているフォームもありますが、あまり良い設計であるとは思いません。というのは、「163-1115」や「090-0000-0000」といったように、ハイフンを入力してしまうユーザーも少なからず存在するからです。

ハイフンを入力してしまったために文字が入力できず困ったり、または「数字以外の文字が含まれています。」などのエラーを見せられる状況は、よくある悪いユーザー体験のひとつでしょう。この場合はできるだけシステム側でハイフンを取り除いたりする工夫を行うべきです。

また、Ajaxを利用したWebサービスの登録フォームにおいて、入力可能な文字数のチェックを常に行うものや、「入力可能な文字数をオーバーしています」などのメッセージを表示させるものが増えています。このようなフィードバックを行う仕組みが、ブラウザにも標準的に導入されるべきなのかもしれません。