セマンティックで使いやすいフォームを制作するための習作

ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。

20+ HTML Forms Best Practices for Beginners

下記は、その意訳です。
1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。

• セマンティック
• アクセシビリティ
• ファンクショナリティ
• デザイン
• 結論

セマンティック

1. fieldsetを使用

ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。

<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>

2. legendを使用

各項目に明確な名前を与えないで、fieldset要素を使用することは意味がありません。上のコードにlegend要素を加えて改善します。
legend要素のブラウザ表示は、デフォルトでその範囲をボーダーで囲みます。

<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>

3. inputにnameを使用

PHPなどのスクリプトにデータを渡したりする際は、input要素にname属性を使用します。

<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>

4. labelを使用

更にコードを改善します。
入力項目にラベルを関連づけるために、label要素を使用します。

<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>

5. labelにforを使用

label要素にfor属性を使用して、各入力項目にラベルを関連づけさせます。forとidの値は同一にします。

<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>

6. optgroupを使用

select要素に構造化された情報を配置する場合、optgroup要素を使用してグループ化します。

<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>

7. 属性は正しく記述

checked属性、disabled属性の記述は、省略しないで正しく記述します。

正しい記述

<label for="live">Living?</label>
<input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" />

手抜きの記述

<label for="live">Living?</label>
<input name="live" id="live" type="checkbox" checked disabled />

8. submitの代わりにbuttonを

ボタンはsubmit要素を使用するのが一般的かもしれませんが、HTMLにはbutton要素もあります。button要素はsubmit要素より比較的簡単に装飾が行え、多くのフレキシビリティを提供します。

参考：

Rediscovering the Button Element

Input vs. Button

アクセシビリティ

9. tabindexを使用

フォームがキーボードでも容易に操作できるように、tabindex属性を使用します。キーボードの[Tab]キーを押すと数字の若い順にフォーカスが移動します。

<input type="text" tabindex="2" />
<input type="text" tabindex="1" />
<input type="text" tabindex="3" />

10. accesskeyを使用

キーボード操作は[Tab]キー以外にも、ショートカットを設定して使用することもできます。accesskey属性を使用すると、[Alt]+[accesskey値]でフォーカスされます。[S]を検索にするなどは有用でしょう。
※ショートカットキーはユーザーに明示するのを忘れないでください。

<label for="search"><span class="shortcut">S</span>earch</label>
<input type="text" name="s" id="search" accesskey="s" />

11. フォーカス時に背景色を変更

ユーザーが入力項目にフォーカスをあわせた際、入力項目の背景色を変更するのは素晴らしいテクニックです。下記の簡単なコードでそれができます（IE7以外の普通のブラウザで対応）。

input[type=text]:hover {
    	background-color:#ffff66;
    	border-color:#999999;
}

12. スクリーンリーダーも考慮する

フォームをデザインする際は、スクリーンリーダーの利用者も対象にいれ制作してください。
単に見栄えのよいものにするのではなく、label属性などを適切に使用します。

ファンクショナリティ

13. enctypeの使用

ほとんどの場合、enctype属性を記述する必要はないでしょう。記述が無い場合は初期値の「application/x-www-form-urlencoded」が適用されます。
もし、ファイルをアップロードするフォームがある際は、下記のようにします。

<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>

14. GetとPostの使用

フォームのデータは二つの方法で送ることができます。method属性を使用して明示します。

<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>

Postを使用すると、データはHTTPのリクエストヘッダに送られます。それは一般的なユーザーには見えません。パスワードのような機密性の高いデータやファイルをアップロードする際は、Postを使用するようにします。
Getはデータベースなどからデータを取り出す際に使用します。

15. データの妥当性はクライアントとサーバーの両方で

ユーザーが入力したデータの妥当性のチェックは、サーバー側とクライアント側の両方で行うようにします。データが送信される前に、クライアント側のブラウザでチェックを行うということは、サーバー側でチェックするより一つ前に間違いを提示することができます。
しかし、セキュリティの面から同様にサーバー側で妥当性をチェックを確実にします。

16. エラーは分かりやすく

データの妥当性をチェックした際には、分かりやすいエラーメッセージを表示してください。何がエラーなのか、どうすればよいのかを明示し、メッセージの表示場所もその場所の近くにします。

17. AJAXの利用

何回もデータを送信して、「Thank you」や「確認のメールを送信しました」など複数のページを使用する際は、AJAXを使用して改良が可能か検討してみてください。ページのロードを少なくし、より快適なフォームになるでしょう。

18. JavaScript無しでも動作するように

これはアクセシビリティで述べるべきでした。
フォームにJavaScriptを使用する際は、JavaScript無しでも完全に動作することを確認してください。

デザイン

19. 一貫したデザイン

サイトのデザインを行う際、決してフォームのデザインを投げ出さないでください。
各ラベルを揃えて配置したり、全てのテキスト入力欄を同じ幅にしたりなど決して手を抜かないでください。また、適切なホワイトスペースを与えることも検討してください。

20. クロスブラウザ対応にはJavaScriptも検討

フォームで使用する各要素は、ブラウザごとにデザインが異なります。
IE6+, Fx2+, Safari2+でその互換性問題に取り組んだjQueryのプラグイン「jqTransform」があります。

21. インスパイア

フォームの制作に行き詰まったら、他のフォームを参照するとインスピレーションがわくかもしれません。

参考：

Web Form Design: Modern Solutions and Creative Ideas

Blog Comment Forms

結論

22. HTML5を見据えたフォーム

HTML5ではフォームに関する素晴らしい特徴をもっています。対応したブラウザが浸透すれば、ダイナミックなフォームもより簡単に提供することができるでしょう。

Post on:2009年9月4日