携帯サイトはPCサイトと違い文字の入力がユーザーのストレスになりやすい傾向にあります。
せっかく訪れたユーザーもフォーム入力が煩わしくて携帯サイトから離脱するケースも少なくありません。
とはいえ、携帯サイトからフォームを無くしてしまう事も出来ないでしょう。会員を募集したり、掲示板への投稿、商品を販売そしたりする際にはやはりフォームへの入力操作は必須になってきます。
そこで今回は、inputタグにあるパラメーターを埋め込んでおき、予め携帯端末の初期入力モードを入力内容に適したモードに設定しておくことで、「英数字入力モードに指定してユーザーIDを入力してもらう」、「数字入力モード指定して電話番号を入力してもらう」など、ユーザーの負担を少しでも軽減していく事にします。PCサイトだと「Internet Explorer」の独自実装(*)であるime-modeにあたる機能と言えばイメージしやすいでしょうか。（*最近では他のブラウザでもime-modeが実装されてきています）
imode(DoCoMo端末)の場合
imodeの場合は「istyle」属性を利用して「istyle=”属性値”」という記述で実装します。ただ、「INPUT type=”password”」の場合はこれらの属性は無視されるので注意が必要です。
・istyleで指定できる属性値
| 属性値 | 入力モード |
|---|---|
| １ | 全角かな/全角文字 |
| ２ | 全角カナ/全角文字 |
| ３ | 英字/半角文字 (小文字) |
| ４ | 数字/半角文字 (数字) |
EzWeb(au端末)の場合
EzWebの場合はキャリア公式サイトに説明のあるとおり「format」属性を利用して「format=”[桁数][属性値]”」という記述で実装します。3キャリアの中では桁数が指定出来るなど、属性値が豊富で様々な対応が可能となっています。
入力文字の桁数を制限する場合には、桁数分だけ文字入力フォーマット値を書くか、「4N」のように文字入力フォーマット値の前に桁数をつけます。桁数を制限しない場合には、「*N」のように文字入力フォーマット値の前に「*」をつけます。
・formatで指定できる属性値一覧
| 属性値 | 入力モード |
|---|---|
| A | 英大文字のみ (句読点の入力も可能) |
| a | 英小文字のみ (句読点の入力も可能) |
| N | 数字のみ |
| X | 大文字と数字記号 (句読点、記号の入力も可能) |
| x | 英小文字と数字記号 (句読点、記号の入力も可能) |
| M | 全角漢字 (トグルによりすべての文字) |
| m | 英小文字 (トグルによりすべての文字) |
またEzWebではistyle属性にも下記のとおり対応しています。
- istyle=”1″ → format=”*M”
- istyle=”2″ → format=”*M”
- istyle=”3″ → format=”*m”
- istyle=”4″ → format=”*N”
Yahoo!ケータイ(Softbank端末)の場合
Yahoo!ケータイの場合はmode属性を利用して「mode=”属性値”」という記述で実装します。
・modeで指定できる属性値
| 属性値 | 入力モード |
|---|---|
| hiragana | 全角ひらがな |
| katakana | 全角カタカナ |
| hankakukana | 半角カタカナ |
| alphabet | 英字 |
| numeric | 数字 |
3キャリア全てに対応した記述方法
これまでのキャリア毎の属性を全て指定しておくと、ひとつのHTMLで3キャリア全てに対応させる事が可能です。EzWebのformat属性の様に桁数属性値が他のキャリアには無いので、実際には別途maxlengthなどを指定しておく方が良いでしょう。
・半角英数字の場合
<input type="text" istyle="3" format="*x" MODE="alphabet" />
・半角数字の場合
<input type="text" istyle="4" format="*N" MODE="numeric" />
PCサイトでもフォームのユーザビリティは重要な項目ですが、携帯サイトではより積極的にフォームのユーザビリティを向上させていく必要があります。上記の他にも「電話番号や郵便番号を一つのinputで入力させる」「可能な限り選択肢を利用する」など、こうした一工夫を重ねていく事で、ユーザー満足度の高い携帯サイトとなり、携帯サイト本来の目的を達成する事に繋がるのではないでしょうか。
