横並びのフォームのマークアップ

Home
Archive
横並びのフォームのマークアップ

横並びのフォームのマークアップ

2007年09月19日
category:XHTML/CSS
Comment(0)
Trackback(0)

よくある横並びのフォームですが、どのようにマークアップするのがいいのか迷います。今まではよく定義リスト(dl)を使ってマークアップしていまたのですが、他にもいろいろなマークアップがありそうなので書き出して見ました。横並びのフォーム

labelをうまく使えば余計なタグを入れなくてすみます。今回はposition:absoluteで横並びを実現してます（tableを除く）が、floatを使う方法もあります。僕はもっぱらposition派。

リスト(ul,ol)

シンプルで、構造の意味的にもしっくりきます。最近よく使います。順序付きリスト(ol)か順序無しリスト(ul)にするかはケースバイケースです。

名前
Email

<ul id="formItems_1">
  <li><label for="commentAuthor_1">名前</label><input type="text" name="author" value="" id="commentAuthor_1" /></li>
  <li><label for="commentEmail_1">Email</label><input type="text" name="email" value="" id="commentEmail_1" /></li>
</ul>

ul#formItems_1 {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul#formItems_1 li {
  padding: 3px 0;
}

ul#formItems_1 li label {
  position: absolute;
}

ul#formItems_1 li input {
  margin-left: 5em;
}

定義リスト(dl)

よく見かけるマークアップです。以前は僕もこれを使うことが多かったです。~~このブログのコメントフォームもこの形になってます。~~以前はこのブログのコメントフォームもdlでしが、リニューアル時にulに変更しました。

名前
Email

<dl id="formItems_2">
  <dt><label for="commentAuthor_2">名前</label></dt>
  <dd><input type="text" name="author" value="" id="commentAuthor_2" /></dd>
  <dt><label for="commentEmail_2">Email</label></dt>
  <dd><input type="text" name="email" value="" id="commentEmail_2" /></dd>
</dl>

dl#formItems_2 {
  position: relative;
  margin: 0;
  padding: 0;
}

dl#formItems_2 dt {
  position: absolute;
  padding: 3px 0;
  margin: 0;
  width: 5em;
}

dl#formItems_2 dd {
  padding: 3px 0 3px 5em;
  margin: 0;
}

段落(p)

一番シンプルです。WWW WATCHさんのコメントフォームはこの形でした。

名前

<div id="formItems_3">
  <p><label for="commentAuthor_3">名前</label><input type="text" name="author" value="" id="commentAuthor_3" /></p>
  <p><label for="commentEmail_3">Email</label><input type="text" name="email" value="" id="commentEmail_3" /></p>
</div>

div#formItems_3 {
  position: relative;
}

div#formItems_3 p {
  padding: 3px 0;
  margin: 0;
}

div#formItems_3 p label {
  position: absolute;
}

div#formItems_3 p input {
  margin-left: 5em;
}

テーブル

意味的に間違ってないと思うので、tableでのマークアップも最近結構使います。

名前
Email

<table summary="応募フォーム" id="formItems_4">
  <tr>
    <th scope="row"><label for="commentAuthor_4">名前</label></th>
    <td><input type="text" name="author" value="" id="commentAuthor_4" /></td>
  </tr>
  <tr>
    <th scope="row"><label for="commentEmail_4">Email</label></th>
    <td><input type="text" name="email" value="" id="commentEmail_4" /></td>
  </tr>
</table>

table#formItems_4 th {
  background: #FFF;
  text-align: left;
  color: #000;
  font-weight: normal;
  width: 5em;
}

table#formItems_4 td,
table#formItems_4 th {
  padding: 5px 0;
  border: none;
}

他にもありそうだけど、とりあえず思いつくだけ並べてみました。フォーム一つでもこんなにマークアップの方法があって、人それぞれやり方が違うからマークアップは面白いです。

Prev Entry: imgにwidthとheightを指定しない理由
Next Entry: phpの$_FELIS変数についてのメモ

トラックバックURL

http://webtech-walker.com/archive/2007/09/19142740.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。