今回は【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はfieldset(グループ化)について解説しております。
今回は、fieldset
(フォーム入力欄のグループ化)について詳しく解説していきます。
fieldsetでは、「フォーム入力欄のグループ化」として表示されます。
fieldset
で作成すると、フォーム入力欄のグループ化として表示されます。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
fieldsetについて
fieldset
を指定すると、フォーム入力欄のグループ化として表示されます。
fieldset
でまとめたグループは、legend
によって見出しを指定することができます。
legend
は、見出しになり、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
を整えていきます。
書き方は以下のようになります
/*--ボーダー線--*/
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; /*--背景色--*/
}
今回は、「背景色」、「ボーダー色」、「内側の余白」を変更しております。
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
fieldset
は、フォーム入力欄のグループ化として表示されます。 -
legend
は、見出しになります。 -
fieldset
は、ボーダー線の役割になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク

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