[(X)HTML] モバイルサイトにおけるinput要素の初期入力モード指定
携帯サイトでは、特に何も指定せずにinput 要素を使用すると初期入力モードが全て「全角かな」になるため、メールアドレスや数字のみ入力すればよい項目は、いちいち入力モードを変えなければいけない。 これは携帯電話の特性上、ユーザにとっては非常にストレスになる。
input要素向け独自属性
これを回避してユーザビリティを向上させるため、各キャリアごとに初期入力モードを指定するためのinput要素向け独自属性が用意されている。
Docomo, au（istyle属性）
| 全角かな | istyle="1" |
|---|---|
| 半角カナ | istyle="2" |
| 英字 | istyle="3" |
| 数字 | istyle="4" |
※type属性に"password"が指定してある入力ボックスではこの属性は無視される
au（format属性）
| 半角英字（大文字）モード | format="*A" |
|---|---|
| 半角英字（小文字）モード | format="*a" |
| 半角数字モード | format="*N" |
| 半角英数（大文字）モード | format="*X" |
| 半角英数（小文字）モード | format="*x" |
| 全角かなモード | format="*M" |
| 全角英字モード | format="*m" |
「*(アスタリスク)」部分に文字数を指定することで、文字数制限が可能
アスタリスクは"文字数制限なし"という意味
Softbank（mode属性）
| 全角かな | mode="hiragana" |
|---|---|
| 半角カナ | mode="hankakukana" |
| 英字 | mode="alphabet" |
| 数字 | mode="numeric" |
| 全角カナ | mode="katakana" |
style 属性を使用した記述
しかし、上述した属性は XHTML では機能しないため、XHTML で記述する際は style 属性を使用して以下のように記述する必要がある。
Docomo, Softbank
| 全角かな | style="-wap-input-format:"*<ja:h>"" |
|---|---|
| 半角カナ | style="-wap-input-format:"*<ja:hk>"" |
| 英字/半角文字 | style="-wap-input-format:"*<ja:en>"" |
| 数字/半角文字 | style="-wap-input-format:"*<ja:n>"" |
au
| 全角かな | style="-wap-input-format:*M;" |
|---|---|
| 英字/半角文字 | style="-wap-input-format:*m;" |
| 数字/半角文字 | style="-wap-input-format:*N;" |
style 属性を使用した3キャリア共通の記述
これを3キャリア共通で使用するにはセミコロンで区切ってひとつながりに記述する。
Docomo, Softbank, au
| 全角かな | style="-wap-input-format:"*<ja:h>";-wap-input-format:*M;" |
|---|---|
| 半角カナ | style="-wap-input-format:"*<ja:hk>";-wap-input-format:*M;" |
| 英字/半角文字 | style="-wap-input-format:"*<ja:en>";-wap-input-format:*m;" |
| 数字/半角文字 | style="-wap-input-format:"*<ja:n>";-wap-input-format:*N;" |
※auは半角カナはなし
エスケープするとそれぞれ以下のようになる。
style="-wap-input-format:"*<ja:h>";-wap-input-format:*M;"
style="-wap-input-format:"*<ja:hk>";-wap-input-format:*M;"
style="-wap-input-format:"*<ja:en>";-wap-input-format:*m;"
style="-wap-input-format:"*<ja:n>";-wap-input-format:*N;"トラックバックURL
http://mashimonator.weblike.jp/mt/mt-tb.cgi/31
コメント投稿フォーム