HTML5における＜fieldset＞タグの使い方

フォームの部品をグループ化しておくことで、整理したり管理しやすくなる要素に、<fieldset>と<legend>というものがあります。一緒に使うことで大変便利な要素です。今回はHTML5における<legend>タグの使い方をご紹介します。

HTML5における<legend>タグの使い方

<legend>タグは、フォームの部品をまとめたグループにキャプションをつけることができるタグです。使い方は、フォームの部品をまとめてグループ化する<fieldset>〜</fieldset>内の一番初めに、<legend>キャプション</legend>を設置して使用します。

以下がサンプルコードです。

では、要素を囲む罫線が表示されますが、<legend>はその罫線の上に乗る形でキャプションを表示させることができます。<legend>は、１つの<fieldset>内で１つまでしか使用することができません。

<legend>のtextなどのスタイルはCSSで指定することで、デザインすることができます。<legend>で使用できる属性はグローバル属性です。他の要素やCSSを使って同じことをしようとすると、大変面倒で適しているとは言えないので、簡単な用法としてこちらの方法を是非覚えておいて活用してください。