CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Post on:2012年10月18日
sponsors
「使いやすい」と「かっこいい」を両立させたフォームをHTML5+CSS3で実装するチュートリアルを紹介します。
下記は各ポイントを意訳したものです。
「使いやすい」フォームをつくるポイント
ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。
フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。
- ラベル
- ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。
ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 - フィールド
- フィールドはユーザーが入力するエリアです。ユーザーが入力しやすいよう他のコンテンツと比べても大きくしておくべきです。決して、小さくしないでください。
- ラベル+フィールド
- フォームの各フィールドには、それに対応するlabel要素を必ず一つ配置します。input, select, textareaなどのフォームの要素はidを付与し、同じ値をlabel要素のfor属性に与えます。これはデスクトップだけでなく、スマフォなどのモバイル機器にも操作が快適になります。
- ステータス
- CSSではそのエレメントの状態（ホバー、フォーカス、アクティブ、デフォルトなど）をターゲットにスタイルを設定できます。これらのステータスを使い、エレメントがクリック可能であるのか、記入することができるのか、をユーザーに伝える手助けになります。
- サブミットボタン
- サブミットボタンは、ユーザーが入力を完了してフォームを終わらす最後のステップです。もちろん、このボタンは目に見えるべきで、適切な文言を使用してください。「Submit」ではユーザーに伝わりません、ログインフォームであれば「サインイン」「ログイン」、コメントのフォームであれば「コメントを登録」など、ユーザーにどのようなアクションが行われるかを伝えてください。
- HTML5のinput要素と属性
- HTML5ではフォームのinput要素に新たなtypeや属性が加わりました。これはユーザーにも制作者にも非常に有用です。
HTML5で加わったフォーム関連と各ブラウザの対応状況
HTML5のinput要素の新しいtypeとブラウザの対応状況
HTML5のinput要素新しい属性とブラウザの対応状況
HTML5のフォームの新しい要素とブラウザの対状況
「使いやすい」と「かっこいい」を両立したフォームの実装
実装のゴールは、CSSの可能性（特にCSS3）を示すこと、そしてIE8でもレンダリングされること、です。
実装には「box-model」を使用しています。
これは、「width」=「エレメントのwidth」+「padding」+「border」で、下記のスタイルシートで有効化しています。
CSS
*,
*:after,
*:before {
box-sizing: border-box;
}
以下、フォームのデモとそのポイントを紹介します。
ユーザー名とパスワードの欄にまたがる丸いサブミットボタンが特徴的なフォームです。各フィールドの入力時にはアイコンがハイライトします。
Twitterへのログインや「Show Password」でパスワードを表示状態にするなどオプション付きのフォームです。この実装にはjQueryを使用します。
CSS3のスタイルの美しさが堪能できるフォームです。光のエフェクト、繊細なグラデーション、入力時のハイライト、かっこいいタイポグラフィ、これらは全て画像無しのCSS3で実装されています。
このフォームの一番の特徴はラベル、またはアイコンが無いことです。上記でラベルやアイコンの重要性を説きましたが、ここではその代わりにプレースホルダテキストを使用しています。
プレースホルダ非サポートブラウザではラベルを表示します。
最後のデモは透明度の高いガラスのようなデザインで、ミニマルなフォームです。ラベルも使用していないため、非常にコンパクトです。面白い仕掛けとしては、サブミットボタンのホバー時にくるっと回転して矢印を表示させています。
sponsors
