このページについて
このページではHTMLで使えるfieldsetとlegendの使い方を解説しています。
fieldsetタグ
fieldsetはformタグの中で使用し、そのフォームに関連する部品を1つのグループとして定義する時に使用します。
そしてデフォルトで、fieldsetで囲んだ部分の外側にボックスが描画されます。
legendタグ
legendはfieldsetで囲んだ(定義した)グループのキャプションを定義する機能を持っています。キャプションとは簡単に言えば「見出し」みたいなものです。つまりは「グループ化したフォームの見出しを書く」ためのタグとなります。
fieldsetタグとlegendタグの書き方
今回解説する2つのタグはformタグの中で使用します。そして書く順番としてはfieldset→legendの順番です。
こんな感じでフォームの中身をグループ化するためにまずfieldsetを使用し、その中でlegendを使用するという順番になります。
実際に上のコードをブラウザで実行してみるとこうなります。
それぞれソースコードと見比べてみるとどこがどうなっているかが分かり易いと思います。
フォームの見出しとなっているのが、legendです。そこから生えている線全てが、fieldsetとなります。
fieldsetタグで使える属性
fieldsetで使える属性は以下のものと、グローバル属性・イベント属性です。
| disabled | グループ化を無効にします。 |
|---|---|
| form | fieldsetがどこのformタグに属するのかを指定します(formのid) |
| name | fieldsetの名前をセットします。 |
disabled属性を使うと、fieldsetで囲んだform部品が全て無効化されます。入力できず、ボタンもクリック不可となります。JavaScriptでdisabledの状態を操作すればその辺りは簡単に操ることができます。
<form id="f1">
<fieldset id="fieldset1">
<legend>テスト用フォーム</legend>
<label>name:<input type="text"></label>
</fieldset>
</form>
<button type="button" onclick="chfs()">切り替え</button>
<script>
function chfs(){
let fs = document.getElementById('fieldset1').disabled;
if (fs==true) {
document.getElementById('fieldset1').disabled = false;
}else{
document.getElementById('fieldset1').disabled = true;
}
}
</script>こんな感じのフォーム・fieldset・関数があったとします。初期状態ではfieldsetにdisabledが付与されていないので、ユーザーは入力が可能となっています。逆にボタンを押すとJavaScriptで関数が処理され、disabledが付与されます。
実際にやってみると入力ができなくなるのがわかると思います。
legendタグで使える属性
legendはfieldsetとは異なり、固有の属性はありません。グローバル属性・イベント属性のどちらもサポートしています。
まとめ
fieldsetはformタグの部品を1つのグループとして定義する機能を持ち、legendはそのグループのキャプションを定義する機能を持っています。CSS不要でフォームに線が描画されたりと分かりやすくなるので、なるべくなら設定しておくとユーザーがわかりやすいフォームが出来上がるかもしれません。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。