気づかれないけどこだわりたいhtmlのinputタグの小技

ウェブサイトに入力フォームを入れるときにinputタグに設定しておきたいスタイルシート項目。

フォームの文字入力モードを自動的に切り替える

input のスタイルシートの中に ime-mode を設定しておくと日本語入力、英数字入力、英数字入力限定変更不可と入力フォームをクリックしたときに文字の入力モードを自動的に切り替えることができます。

入力フォームによってここは日本語、ここは英数字とそれぞれ入力文字を誘導したいときに使います。

【サンプル】cssの場合
input.sample { ime-mode: active; }

【サンプル】styleの場合
<input type="text" style="ime-mode: active;">

ime-mode: active
日本語入力モードになります。

ime-mode: inactive
英数字入力モードになります。

ime-mode: disabled
英数字入力モードになり、入力モードの操作をできなくします。

ime-mode: auto
ユーザーがそのとき選択している入力モードのままになります。
ime-modeを設定しない場合はこれになります。

英数字で入力して欲しい入力欄があったときにユーザーの文字モードが日本語になっている状態だと英数字に切り替えるのに一手間かかりますが、文字入力の初期入力モードを設定しておくことで任意の文字入力モードに自動的に切り替えてくれます。また、全角のままで入力されたりとサイト運営者がいれて欲しくない文字形式で入力されてしまうのを回避できます。

入力フォームをクリックしたときに、文字入力モードの切り替えが行われれば誤入力が防げ操作性もアップします。

会員登録やネットショッピングをして配達先の住所を入力するときに、住所は日本語で、郵便番号や電話番号は半角英数字でといったように文字入力に指定がある場合があります。それを入力するときは日本語と英数字で文字入力モードを切り替えなくてはならい場合がほとんどです。文字入力の指定がもっと細かい場合もありいちいちめんどくさいなと感じることも多いです。

ウェブサイトを制作している立場から見た場合、ほんの数文字つけ加えれば使い勝手よくなって便利になるのにな、と思います。文字入力が間違っていますとエラー出すより間違った入力がされないように設計しておくことのほうが重要です。

入力フォームの幅の指定をしておく

ブラウザによって幅が変わってしまうので input type="text" や textarea といったテキストを入力する項目には左右幅のサイズを指定しておいた方がいいです。幅の指定をしていないと確認しているブラウザではきっちり揃えたレイアウトを組んでいても他のブラウザで見たときに最悪の場合はデザインが崩れてしまいます。高さに関しては指定しなくてもデザインが大きく崩れてしまうことはありませんが、きっちり他のパーツとラインを揃えて作っているならサイズ指定はしておきましょう。

【サンプル】cssの場合
input[type="text"] {width: 220px;}
textarea{width: 220px;}

【サンプル】styleの場合
<input type="text" style="width: 220px;">
<textarea style="width: 220px;">

スポンサードリンク