cman.jpWEBページ作成
広告
<fieldset> 「入力部品のグループ化」[読み方：フィールドセット]
<fieldset>タグは、入力部品をグループ化し外枠（線）を付けることで、ページを見やすくすることが出来ます。
<legend>を指定することで枠に題名を表示できます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<fieldset> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ リストされた要素 自動大文字継承要素 フォーム関連要素 パブバブルコンテンツ | フローコンテンツを子要素にもてる場所 | フローコンテンツ <legend> | 不可 |
<fieldset>の属性
【構文】
<fieldset>～入力部品のグループ化～</fieldset>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| disabled | 無効とする ※HTML5で追加 | 「disabled」 |
| form="form名" | 所属するフォームの名前 ※HTML5で追加 | 「form01」などフォーム名 |
| name="名前" | fieldsetの名前 ※HTML5で追加 | 「inarea1」などfieldsetの名前 |
| 廃止された属性 |
|
|
| グローバル属性 |
| |
| イベント属性 |
| |
<fieldset>のサンプル
<fieldset>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<br>
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<br>
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<fieldset>のスタイルシートサンプル
<head>
<style type="text/css">
<!--
#css-s1 fieldset{
padding: 15px;
background-color: #ffffcc;
border: solid 1px #0000ff;
line-height: 2.5;
}
#css-s1 legend{
color: #0000ff;
}
-->
</style>
<div id="css-s1">
<fieldset>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<br>
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
</div>
<style type="text/css">
<!--
#css-s1 fieldset{
padding: 15px;
background-color: #ffffcc;
border: solid 1px #0000ff;
line-height: 2.5;
}
#css-s1 legend{
color: #0000ff;
}
-->
</style>
<div id="css-s1">
<fieldset>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
<br>
<fieldset>
<legend>ご登録内容を入力してください</legend>
お名前：<input type="text" name="spamleName" size="20"><br>
ご住所：<input type="text" name="spamleName" size="30">
</fieldset>
</div>
留意事項
ページTOP広告