セマンティックで使いやすいフォームを制作するための習作
Post on:2009年9月4日
sponsors
ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。
20+ HTML Forms Best Practices for Beginners
下記は、その意訳です。
1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。
セマンティック
1. fieldsetを使用
ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> <fieldset> <span>Shipping Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> </textarea> |
2. legendを使用
各項目に明確な名前を与えないで、fieldset要素を使用することは意味がありません。上のコードにlegend要素を加えて改善します。
legend要素のブラウザ表示は、デフォルトでその範囲をボーダーで囲みます。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <fieldset> <legend>Billing Affress</legend> <span>Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> </textarea> |
3. inputにnameを使用
PHPなどのスクリプトにデータを渡したりする際は、input要素にname属性を使用します。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" name="billAddress" /> <span>City</span><input type="text" name="billCity" /> <span>Province</span><input type="text" name="billProvince" /> <span>Postal Code</span><input type="text" name="billPC" /> </fieldset> </textarea> |
4. labelを使用
更にコードを改善します。
入力項目にラベルを関連づけるために、label要素を使用します。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <fieldset> <legend>Billing Affress</legend> <label>Address</label><input type="text" name="billAddress" /> <label>City</label><input type="text" name="billCity" /> <label>Province</label><input type="text" name="billProvince" /> <label>Postal Code</label><input type="text" name="billPC" /> </fieldset> </textarea> |
5. labelにforを使用
label要素にfor属性を使用して、各入力項目にラベルを関連づけさせます。forとidの値は同一にします。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <fieldset> <legend>Billing Affress</legend> <label for="billAddress">Address</label><input type="text" id="billAddress" name="billAddress" /> <label for="billCity">City</label><input type="text" id="billCity" name="billCity" /> <label for="billProvince">Province</label><input type="text" id="billProvince" name="billProvince" /> <label for="billPC" >Postal Code</label><input type="text" for="billPC" name="billPC" /> </fieldset> </textarea> |
6. optgroupを使用
select要素に構造化された情報を配置する場合、optgroup要素を使用してグループ化します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<textarea name="code" class="html" cols="60" rows="5"> <select> <optgroup label="USA"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> </optgroup> <optgroup label="Canada"> <option>Alberta</option> <option>British Columbia</option> <option>Manitoba</option> </optgroup> </select> </textarea> |
7. 属性は正しく記述
checked属性、disabled属性の記述は、省略しないで正しく記述します。
正しい記述
|
1 2 3 4 |
<textarea name="code" class="html" cols="60" rows="5"> <label for="live">Living?</label> <input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" /> </textarea> |
手抜きの記述
|
1 2 3 4 |
<textarea name="code" class="html" cols="60" rows="5"> <label for="live">Living?</label> <input name="live" id="live" type="checkbox" checked disabled /> </textarea> |
8. submitの代わりにbuttonを
ボタンはsubmit要素を使用するのが一般的かもしれませんが、HTMLにはbutton要素もあります。button要素はsubmit要素より比較的簡単に装飾が行え、多くのフレキシビリティを提供します。
アクセシビリティ
9. tabindexを使用
フォームがキーボードでも容易に操作できるように、tabindex属性を使用します。キーボードの[Tab]キーを押すと数字の若い順にフォーカスが移動します。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <input type="text" tabindex="2" /> <input type="text" tabindex="1" /> <input type="text" tabindex="3" /> </textarea> |
10. accesskeyを使用
キーボード操作は[Tab]キー以外にも、ショートカットを設定して使用することもできます。accesskey属性を使用すると、[Alt]+[accesskey値]でフォーカスされます。[S]を検索にするなどは有用でしょう。
※ショートカットキーはユーザーに明示するのを忘れないでください。
|
1 2 3 4 |
<textarea name="code" class="html" cols="60" rows="5"> <label for="search"><span class="shortcut">S</span>earch</label> <input type="text" name="s" id="search" accesskey="s" /> </textarea> |
11. フォーカス時に背景色を変更
ユーザーが入力項目にフォーカスをあわせた際、入力項目の背景色を変更するのは素晴らしいテクニックです。下記の簡単なコードでそれができます（IE7以外の普通のブラウザで対応）。
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> input[type=text]:hover { background-color:#ffff66; border-color:#999999; } </textarea> |
12. スクリーンリーダーも考慮する
フォームをデザインする際は、スクリーンリーダーの利用者も対象にいれ制作してください。
単に見栄えのよいものにするのではなく、label属性などを適切に使用します。
ファンクショナリティ
13. enctypeの使用
ほとんどの場合、enctype属性を記述する必要はないでしょう。記述が無い場合は初期値の「application/x-www-form-urlencoded」が適用されます。
もし、ファイルをアップロードするフォームがある際は、下記のようにします。
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <form action="verify.php" method="get" enctype="multipart/form-data"> &tl;label for="avatar">Upload your Avatar : </label> <input type="file" name="avatar" id="avatar" /> </form> </textarea> |
14. GetとPostの使用
フォームのデータは二つの方法で送ることができます。method属性を使用して明示します。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <form action="you.php" method="get"> &tl;label for="fname">First Name</label> <input type="text" name="fname" id="fname" value="Bill" /> &tl;label for="lname">Last Name</label> <input type="text" name="lname" id="lname" value="Gates" /> </form> </textarea> |
Postを使用すると、データはHTTPのリクエストヘッダに送られます。それは一般的なユーザーには見えません。パスワードのような機密性の高いデータやファイルをアップロードする際は、Postを使用するようにします。
Getはデータベースなどからデータを取り出す際に使用します。
15. データの妥当性はクライアントとサーバーの両方で
ユーザーが入力したデータの妥当性のチェックは、サーバー側とクライアント側の両方で行うようにします。データが送信される前に、クライアント側のブラウザでチェックを行うということは、サーバー側でチェックするより一つ前に間違いを提示することができます。
しかし、セキュリティの面から同様にサーバー側で妥当性をチェックを確実にします。
16. エラーは分かりやすく
データの妥当性をチェックした際には、分かりやすいエラーメッセージを表示してください。何がエラーなのか、どうすればよいのかを明示し、メッセージの表示場所もその場所の近くにします。
17. AJAXの利用
何回もデータを送信して、「Thank you」や「確認のメールを送信しました」など複数のページを使用する際は、AJAXを使用して改良が可能か検討してみてください。ページのロードを少なくし、より快適なフォームになるでしょう。
18. JavaScript無しでも動作するように
これはアクセシビリティで述べるべきでした。
フォームにJavaScriptを使用する際は、JavaScript無しでも完全に動作することを確認してください。
デザイン
19. 一貫したデザイン
サイトのデザインを行う際、決してフォームのデザインを投げ出さないでください。
各ラベルを揃えて配置したり、全てのテキスト入力欄を同じ幅にしたりなど決して手を抜かないでください。また、適切なホワイトスペースを与えることも検討してください。
20. クロスブラウザ対応にはJavaScriptも検討
フォームで使用する各要素は、ブラウザごとにデザインが異なります。
IE6+, Fx2+, Safari2+でその互換性問題に取り組んだjQueryのプラグイン「jqTransform」があります。
21. インスパイア
フォームの制作に行き詰まったら、他のフォームを参照するとインスピレーションがわくかもしれません。
結論
22. HTML5を見据えたフォーム
HTML5ではフォームに関する素晴らしい特徴をもっています。対応したブラウザが浸透すれば、ダイナミックなフォームもより簡単に提供することができるでしょう。
sponsors
