HTML/CSS
FIELDSETタグとLEGENDタグについて
えだ
更新日:2021/08/05
今日はシンプルにHTMLタグの話です。
FIELDSETおよびLEGENDタグというのがあるのですが、みなさん利用さてているでしょうか。
フォームの構成部品をグルーピング定義するのに使うものです。
タグの使い方
1 2 3 4 5 |
<fieldset> <legend>あなたの情報</legend> <div>なまえ:<input type="text" ></div> <div>めーる:<input type="mail" ></div> </fieldset> |
┌─あなたの情報────┐
│ なまえ:【 】 │
│ めーる:【 】 │
└───────────┘
HTML4時代から存在しましたが、業務システム開発メインの僕はまず使ったことがありません。
LEGENDタグ内は検索エンジンにキーワードとして評価されるのでSEO対策に利用する程度の認識でした。
時代が変わってHTML5になると、FIELDSETにグローバル属性のdisabled、form、nameが追加されています。
このdisabledによってSUBMIT時のリクエストを制御できるようになったということです。
つまり今までは入力項目単位に制御していたのをFIELDSET単位で制御できるようになったのです!
なのでHTML5になってから僕はガンガン利用しています。
しかしながらココの他の人たちはこのことに見向きもしてくれません。
FIELDSETを使ってはいても、disabledはおろか、LEGENDすら付けずにCSSで独自実装している始末です。
確かにブラウザ依存で見た目に差異があるのですが、もう少し日の目を見てもよいタグかと思っています。