「読者からメッセージを」で作ったフォームです。
「◆ひとこと」と「送信」「やり直し」の位置がなかなか上記の様にならないで困ったのではないですか。tableを使わなくてもこの配置はできます。
textarea{ vertical-align:middle; } input{ vertical-align:bottom; }
画像と文字の位置関係に使う手法ですが、小画像と文字の位置関係に解説があります。
上に例は前回と少し変えて<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つあります。