CSS ラベルやテキスト調整でフォームの使いやすさを向上させる方法

どうもこんばんは。Toshikuraです。今回のTipsは【CSS ラベルやテキスト調整でフォームの使いやすさを向上させる方法】です。お問い合わせフォームや資料請求フォーム等は成果に直結しますので、可能なかぎり最適化を行っていくのが望ましいかと思います。今後何回かに分けてフォーム関連の記事を書いていこうかと思いますのでおつきあい頂けますと幸いです。

基本編

1. ラベルをつける

フォームとラベルを関連付けます。ラベルをクリックでラジオボタンを選択させたり入力フォームを選択させる事ができる等、簡単ですがあるとないでは大分使いやすさに差が生まれます。

ラベル無し	ラベル有り
はい いいえ	はい いいえ
ダミー入力欄です：	ダミー入力欄です：

HTML – inputのID名とラベルのFORを共通のものに設定する方法

<input type="radio" name="Y" id="l1"><label for="l1"> はい</label>

HTML – ラベルでinputを囲む方法

<label><input type="radio" name="Y"> はい</label>

　

2. テキストを大きめに設定

単純ですが、フォーム内の文字サイズを大きめに設定します。事前にこの設定をしておくとスマートフォンでも入力・選択がしやすくなります。

通常サイズ	大きめサイズ

HTML

<input type="text" class="fm">

CSS

.fm{font-size:16px;}

　

3. 余白で入力欄を大きめに設定

フォントサイズを大きくするのと目的は同じですが、入力の対象や選択の対象を大きめに設定します。

通常サイズ	大きめサイズ

HTML

<input type="text" class="fm">

CSS

.fm{font-size:16px; padding:2px 5px;}

　

4. 必須項目は明示する

上とは少し異なりますが必須項目には必須と明示し赤文字等で記述してあげる事が望まれます。

未設定	設定済
テキスト[必須]：	テキスト[必須]：

HTML

テキスト<span class="attention">[必須]</span>：<input type="text" value="1234">

CSS

.fm{font-size:16px; padding:2px 5px;}
.attention{color:#f00;}

以上になります。デモでは今回の記事で書いたTIPを適応した場合、適応していない場合の比較と確認が可能です。