SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!
の解説になります!

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • HTMLについて学びたい方へ
  • 今回はfieldset(グループ化)について解説しております。

今回は、fieldset(フォーム入力欄のグループ化)について詳しく解説していきます。
fieldsetでは、「フォーム入力欄のグループ化」として表示されます。

fieldsetで作成すると、フォーム入力欄のグループ化として表示されます。

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

fieldsetについて

fieldsetについて

fieldsetを指定すると、フォーム入力欄のグループ化として表示されます。
fieldsetでまとめたグループは、legendによって見出しを指定することができます。

legendは、見出しになり、fieldsetは、ボーダー線の役割になります。
書き方は以下のようになります。

legend、fieldsetの役割を図で解説

fieldsetについて

お好きな
カラー選択してください。



<form method="post">
 <div>
  <fieldset>
   <legend>お好きなカラー選択してください。</legend>
   <label><input type="radio" name="color" value="red">赤色</label>
   <label><input type="radio" name="color" value="green">緑色</label>
   <label><input type="radio" name="color" value="blue">青色</label>
  </fieldset>
 </div>
</form>

ポイント!
fieldsetを使うことで、ページを見やすくすることができます。
また、見出し、ボーダー線はCSSでの装飾が可能になります。

CSSでfieldset、legendを整える

CSSでfieldset、legendを整える

今回はCSSでfieldsetlegendを整えていきます。
書き方は以下のようになります

/*--ボーダー線--*/
fieldset {}

/*--見出し--*/
legend {}

CSSでfieldset、legendを整える

お好きな
カラー選択してください。



<form method="post">
 <div>
  <fieldset>
   <legend>お好きなカラー選択してください。</legend>
   <label><input type="radio" name="color" value="red">赤色</label>
   <label><input type="radio" name="color" value="green">緑色</label>
   <label><input type="radio" name="color" value="blue">青色</label>
  </fieldset>
 </div>
</form>
/*--ボーダー線--*/
fieldset {
	padding: 20px; /*--内側の余白--*/
	border: solid 2px #cccccc; /*--ボーダー線の色--*/
	box-sizing: border-box;
}

/*--見出し--*/
legend {
	padding: 8px 20px; /*--内側の余白--*/
	background-color: #cccccc; /*--背景色--*/
}

今回は、「背景色」、「ボーダー色」、「内側の余白」を変更しております。

関連記事

type=”text”【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
textarea【HTML】textareaの使い方、複数行のテキスト入力欄を作成しよう!
select【HTML】selectの使い方、プルダウンメニューを作成しよう!
output【HTML】outputの使い方、計算結果を表示させよう!

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

POINT
  • fieldsetは、フォーム入力欄のグループ化として表示されます。
  • legendは、見出しになります。
  • fieldsetは、ボーダー線の役割になります。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top