WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <fieldset>「入力部品のグループ化」

<fieldset> 「入力部品のグループ化」[読み方:フィールドセット]

<fieldset>タグは、入力部品をグループ化し外枠(線)を付けることで、ページを見やすくすることが出来ます。
<legend>を指定することで枠に題名を表示できます。

HTML規格HTML4.01HTML5
使用可否
広告

<fieldset> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフレージングコンテンツを子要素にもてる場所フローコンテンツ
<legend>
不可

<fieldset>の属性

【構文】
<fieldset>~入力部品のグループ化~</fieldset>
属性意味値のサンプルなど
disabled無効とする
※HTML5で追加
「disabled」
form="form名"所属するフォームの名前
※HTML5で追加
「form01」などフォーム名
name="名前"fieldsetの名前
※HTML5で追加
「inarea1」などfieldsetの名前
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<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>
お名前:
ご住所:

ご登録内容を入力してください お名前:
ご住所:
ページTOP

<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>
お名前:
ご住所:

ご登録内容を入力してください お名前:
ご住所:
ページTOP

留意事項

  • disabledformnameの各属性は、HTML5で追加されています。HTML4.01では動作しない場合がありますのでご注意ください。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン