CSS 送信ボタン画像化や自動入力、選択時ハイライトを実装してフォームの使いやすさを向上させる方法

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。今回は【CSS 送信ボタン画像化や自動入力、選択時ハイライトを実装してフォームの使いやすさを向上させる方法】です。自動入力は一部ブラウザのみ対応ですがAmazon等では日常的に目にする機能ですので、可能な限り実装してみても良いかもしれませんね。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

基本編

5. サブミットボタン（送信ボタン）にカーソル指定

送信ボタンをマウスオーバーした際に手のアイコンを表示させます。ハンドにポインターが切り替わる事で「クリックできる」ことを明示します。

指定無し 指定有り

HTML


<input type="submit" value="送信" class="btn">

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

.btn{cursor: pointer;}

　

6. サブミットボタンを画像にする

デフォルトのボタンのままですと少し目立たないかと思います。ここではボタンをもう少し目立たせ、押せる事を明示します。

通常 画像

HTML


<input type="submit" value="送信" class="btn">

CSS

.btn{
	cursor: pointer;
	height: 58px;
	width: 138px;
	background: url(images/submitbtn.png);
	border: none;
	text-indent: -99999px;
}

　

7. :focusを使って入力中をサジェスト

テキストフォーム等、入力選択中に背景の色を変更します。現在入力中のフォームを示し、入力可能であることも同時に知らせます。

未指定 指定済み（フォーム選択）

HTML


<input type="text" value="1234">

CSS

input:focus {background:#ccffcc;}

　

8. 自動入力や入力補助を活用する


　
Chromeを使用している際に一つの項目を埋めた瞬間に他の項目が入力されたり、他ブラウザでも入力項目を記憶しておく事で入力欄のダブルクリックで候補が出てくる場合があります。

設定無し 設定有り

HTML


<input id="Email" name="mail" value="">

Chromeでは自動入力を実装するためのautocomplete属性というものがあります。実装方法も至ってシンプルでx-autocompletetype=”email”等、各フォーム内容にあわせた値を追加記述するだけです。自動入力や入力補助はブラウザや個人の設定に左右されますので絶対的な効果が得られたり、必ず実装できるTipsではありません。各x-autocompletetype値の設定やautocompleteの概要等、詳しくはGoogle ウェブマスター向けブログをご参照ください。

autocomplete無し autocomplete有り
姓：
名：
国：
都道府県：
市区町村：
住所１：
住所２：
郵便番号：
姓：
名：
国：
都道府県：
市区町村：
住所１：
住所２：
郵便番号：

HTML


<form method="post">
	姓　　　：<input type="text" name="sname" x-autocompletetype="surname">
	名　　　：<input type="text" name="gname" x-autocompletetype="given-name">
	国　　　：<input type="text" name="country" x-autocompletetype="country">
	都道府県：<input type="text" name="state" x-autocompletetype="state">
	市区町村：<input type="text" name="city" x-autocompletetype="city">
	住所１　：<input type="text" name="addr1-1" x-autocompletetype="address-line1">
	住所２　：<input type="text" name="addr1-2" x-autocompletetype="address-line2">
	郵便番号：<input type="text" name="postal" x-autocompletetype="postal-code">
<input type="submit">
</form>

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