fieldsetタグとは?|フォーム部品をグループ化する

fieldsetタグとは?|フォーム部品をグループ化する
博士
これまでさまざまなフォーム部品の作り方を解説してきたが、今回はそれらの部品をグループ化する方法を解説するぞ。
リンゴ
フォーム部品ってグループ化できるんですね!
一体どうなるんだろう?
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<fieldset>タグとは

 

<fieldset>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / セクショニング・ルート / フォーム関連要素(リスト化可能要素、再関連付け可能要素、送信可能要素、リセット可能要素) / パルパブル・コンテンツ
利用場所 フロー・コンテンツが期待される場所
内容 1個のlegend要素(任意)に続き、フロー・コンテンツ


 
 
<fieldset>タグは、フォームを構成するさまざまな部品をグループ化する際に使用します。
 
 
博士
一般的なブラウザでは、グループ化された部品がボーダーで囲まれて表示されるぞ。
 
 
フォーム部品のグループにキャプション(タイトルや説明)を付ける場合は、fieldset要素内の一番最初にlegend要素で指定します。
 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

name属性

部品グループの名前を指定します。
name属性で指定した名前は、スクリプトから参照する際に使用されます。

 
 

スポンサーリンク

使用例

 
 

表示例

お客様情報



 
 

まとめ

フォームの部品をグループ化する際は、<fieldset>タグを使用します。
 
 

博士
好きな部品を組み合わせて、オリジナルのグループを作ってみよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








fieldsetタグとは?|フォーム部品をグループ化する