33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

フォームのグルーピングについて

本日の教材動画はこちら 

 

今日はフォームのグルーピングについての勉強です!グルーピングには主に<fildset>と<legend>を組み合わせて使い、より便利に使うために<label>タグを使うことができます。

<fildset>タグ

複数の入力欄をまとめるのに使用する。タグで囲ったところは四角の枠線でまとめて表示されるようになる。使い方は<fildset></fildset>で、タグ内にまとめたい入力欄のタグを入力する。

<legend>タグ

上記の<fildset>タグでまとめた項目に説明をつけることができる。テーブルで言う表題のようなもの。使い方は<legend>〇〇</legend>で、〇〇にいれた言葉が説明(表題)として表示されるようになる。

<label>タグ

labelタグは必須ではないが、設定するとユーザーが便利にフォームや選択肢が使えるようになる。入力欄に id を設定し、id に対して label で for属性 で指定して使う。

 

使い方は<label for="〇〇">、入力欄のタグには<~~ id="〇〇">を入力する。〇〇の部分は必ず一致させる必要があり、また同一ページで同じidは1個しか使えない(複数個所に同じidをつけることはできない)前回勉強した label とは使い方が違うため注意。

 

ちなみに便利に使えるとはどういうことかというと、例えば入力フォームなら、通常フォーム内をクリックしないと文字入力に移らないが、指定したフォーム外の部分をクリックしても文字入力に移るようになる。ラジオボタンなら、チェックをつける箇所をクリックしなくても、文字名の所をクリックすればチェックが付くようになるのだ!便利!

 

今回勉強した内容

今回勉強した内容

 

出来上がったページ

出来上がったページ