ラベルをつける

vertical-alignによる配置

「読者からメッセージを」で作ったフォームです。


「◆ひとこと」と「送信」「やり直し」の位置がなかなか上記の様にならないで困ったのではないですか。tableを使わなくてもこの配置はできます。

textarea{
  vertical-align:middle;
}
input{
  vertical-align:bottom;
}

画像と文字の位置関係に使う手法ですが、小画像と文字の位置関係に解説があります。

labelタグ

上に例は前回と少し変えて<label>タグを使いました。

<form method="post" action="http://www.st.seiai.ed.jp/cgi-bin/cgimail">
<p>
<label for="namae">◆あなたのお名前:</label>
<input type="text" id="namae" name="YourName" size="20" maxlength="80" /><br />
<label for="hitokoto">◆ひとこと:</label>
<textarea rows="8" cols="40" id="hitokoto" name="message"></textarea>
<input type="submit" value="送信" />
<input type="reset" value="やり直し" />
</p>
</form>

labelはinputタグの説明になっている文字列を囲みます。

labelにはfor、inputにはidという属性をおいて同じ文字列を指定することで対応を示します。

こうすることのメリットは2つあります。

  1. ◆あなたのお名前:や、◆ひとこと:の部分をクリックすることで、対応する欄にカーソルが移動する。
  2. 視覚障害のあるユーザーに情報をあたえることができる。(画面上の視覚的な位置以外にfor-idの関係で対応を知らせる)

ウェブページ(Sep.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/