フォームタグの正しいマークアップとCSS
フォームのテンプレートを作成する際に正しいHTMLのマークアップをしましょうってことで、『How to create perfect form mark up and style it with CSS』というのを見つけたので自分用に覚書。
よく忘れられがちなのが、<fieldset>というタグで無料配布されているCGIやサーバー側で提供しているフォーム、Wordpressなんかでももともとのテンプレートの中に<fieldset>タグを見かけることはほとんどなかったりする。なので、そのままカスタマイズして忘れてしまうタグのひとつがこの<fieldset>タグと<lavel>タグ。
<fieldset>の役割としてはフォームの入力項目をグループ化するためのタグで抜けていてもとくに構文のエラーが出るわけでもないので、結構無視されがち。タグの勉強をしだした頃はしっかり<fieldset>を書くようにしてたけど、エラーになるわけじゃなしで抜けていても気にならなくなってたんやけど、、、
フォームの入力項目をグループ化することで、Tabキーなどでグループ間を簡単に移動できるという利点があるということからユーザビリティの点からも正しいマークアップ方法は覚えて実践するほうがいいよね。
<lavel>の方はフォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素。 これによりチェックボックスやラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになるので、やはりユーザビリティ的にチェックしてしっかりマークアップしたいタグのひとつ。
では正しくマークアップされたHTMLコードとは･･･
<form action="" method="post">
<fieldset>
<legend>Vertical Form</legend>
<div class="field">
<label for="field1">Text Input</label>
<input type="text" class="text"
id="field1" name="field1" />
</div> <div class="field">
<label for="field2">Password Input</label>
<input type="password" class="password"
id="field2" name="field2" />
</div> <div class="field">
<label for="field3">Select</label>
<select id="field3">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<fieldset>
<legend>Radio set</legend>
<ul class="fields">
<li>
<label><input type="radio" class="radio"
name="field4" /> A radio button 1</label>
</li>
<li>
<label><input type="radio" class="radio"
name="field4" /> A radio button 2</label>
</li>
<li>
<label><input type="radio" class="radio"
name="field4" /> A radio button 3</label>
</li>
</ul>
</fieldset>
<div class="field">
<label for="field6">File Input</label>
<input type="file" class="file" id="field6"
name="field6" />
</div>
<div class="field">
<label for="field7">Textarea</label>
<textarea cols="60" rows="6" id="field7"
name="field7"></textarea>
</div>
<div class="buttons">
<input type="submit" class="button"
value="Submit" />
<input type="reset" class="button"
value="Reset" />
</div>
</fieldset>
</form> ひとつ基本のテンプレートを作っておくと使いまわしのときに便利。
ありがたいことに同サイトで基本になるCSSもどどーんと紹介してくれてます。
/* First, some basic resets, body styles, etc. */
html, body, div, span, fieldset, form, label, legend
{border: 0; margin: 0; outline: 0; padding: 0;
background: transparent; vertical-align: baseline;}
body {background: #fff; color: #000;
font: .75em/1.5em Helvetica, Arial, "Liberation Sans",
"Bitstream Vera Sans", sans-serif;}
/* Here's our form stuff */
fieldset {clear: both;}
legend {padding: 0 0 1.286em; font-size: 1.167em;
font-weight: 700;}
fieldset fieldset legend
{padding: 0 0 1.5em; font-size: 1em;}
* html legend {margin-left: -7px;} /* ie6 */
*+html legend {margin-left: -7px;} /* ie7 */
form .field, form .buttons
{clear: both; margin: 0 0 1.5em;}
form .field label {display: block;}
form ul.fields {margin: 0 0 1.5em; padding: 0;}
form ul.fields li {list-style-type: none; margin: 0;}
form ul.inline li, form ul.inline label {display: inline;}
form ul.inline li {padding: 0 .75em 0 0;}
input.radio, input.checkbox
{margin: 3px; vertical-align: bottom;}
label, button, input.submit, input.image
{cursor: pointer;}
* html input.radio, * html input.checkbox
{margin: 0; vertical-align: middle;} /* ie6 */
*+html input.radio, *+html input.checkbox
{margin: 0; vertical-align: middle;} /* ie7 */
textarea {overflow: auto;}
input.text, input.password, textarea, select
{margin: 0; font: 1em/1.3 Helvetica, Arial,
"Liberation Sans", "Bitstream Vera Sans", sans-serif;
vertical-align: bottom;}
input.text, input.password, textarea
{border: 1px solid #444; padding: 2px;}
/* horizontal layout */
form.horizontal .field {padding-left: 150px;}
form.horizontal .field label
{display: inline; float: left;
width: 140px; margin-left: -150px;}ブラウザで見るとこんな感じ。あとはCSSでサイトに合うデザインを入れるだけ。
正しくマークアップされたフォーム
ユーザビリティを実践する上で、デザイン部分での役割ってとても大きいけど、それ以前にHTMLをきちんとマークアップすることができれば、シンプルでなおかつ本当にユーザビリティの高いフォームを作ることができるので、タグ屋さんは覚えておくといいですよね。
Leave a Reply