サイト内検索
...HTML・XHTMLタグ...
フォーム
入力項目のグループ化
- 入力項目のグループ化
- フォームの入力項目をグループ化をするには、fieldset要素を指定します。
- グループにタイトルをつけるには、legend要素を指定します。
- [使い方]
- <form method="post" action="sample.cgi">
- <fieldset>
- <legend>タイトル(サンプル)</legend>
- お名前：<input type="text" name="name" size="20">
- E-Mail：<input type="text" name="email" size="20">
- </fieldset>
- </form>
- [メモ・・・Ｗ３Ｃの検証サービス・・・]
- alignはHTML 4.01 Strict ・ XHTML1.0 Strictでは、推奨されていませんので、
- Validするには、スタイルシートを使用します。
- プロパティmarginを指定します。
- <legend style="margin-left: 150px;">
タイトルの位置の指定は、legend要素に align=""を付け加えて指定します。
| 属性 | 属性値 | 説明 |
|---|---|---|
| align= | "left" | 左揃えに表示します。 |
| "right" | 右揃えに表示します。 | |
| "top" | 上部に表示します。 | |
| "bottom" | 下部に表示します。 |
サンプル
[ｂｏｄｙの中]
<form method="post" action="sample.cgi"><fieldset>
<legend> ユーザー登録</legend>
ニックネーム:<input type="text" name="user" size="20">
パスワード:<input type="text" name="pass" size="20">
e-mail:<input type="text" name="email" size="50">
</fieldset>
<fieldset>
<legend align="center">登録内容</legend>
お名前:<input type="text" name="name" size="20">
<p>ご住所:<input type="text" name="address" size="50"></p>
電話番号:<input type="text" name="tel" size="20">
</fieldset>
<div class="sample-1">
<input type="submit" value="登録する">
</div>
<div class="sample-2">
<input type="reset" value="リセット">
</div>
</form>
[ブラウザ上]
