HTMLスキル - 第4章 Lesson6

<fieldset>タグでフォームをグループに分ける方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<fieldset>タグを使って、複数のフォームをカテゴリー化して、グループに分ける事ができます。
ここでは、グループ化するためのタグの記述方法を解説していきます。



この動画で学べること

・<fieldset>タグを使ったグループ化の方法
・<fieldset>タグでグループにキャプションを入れる方法



<fieldset>タグを使ってフォームをグループ化する方法

フォームをグループ化してわかりやすくしましょう。
フォームの入力の項目が増えればわかりづらくなっていくので、関連する項目をグループにしてわかりやすくしましょう。
今回は、「お名前」と「メールアドレス」の部分を基本情報、「本文」をお問い合せ内容のグループにしていきます。
グループ化するときには、<fieldset>タグを使います。
では、実際にやってみましょう。
基本情報の部分になる「お名前」と「メールアドレス」を<fieldset>タグで囲みます。



 <fieldset>
<label for="name">お名前:</label>
<input id="name" type="text" name="お名前">
<label for="mail">メールアドレス:</label>
<input id="mail" type="text" name="メールアドレス">
</fieldset><span></span>



保存してブラウザで見てみましょう。
グループされた部分に薄い線が入って、基本情報がグループ化されたことがわかります。
同じように、お問い合せ内容の部分もやっていきましょう。



 <fieldset>
<label for="para">本文:</label>
<textarea id="para" name="本文" placeholder="お問い合わせ内容など、自由にお書き下さい。"></textarea>
</fieldset>




<legend>タグでグループにキャプションを入れよう

次に、グループのキャプションをつけていきましょう。
ここで使うのは<legend>タグです。
<fieldset>タグのすぐ後に、このように書きます。


<fieldset>
<legend>基本情報</legend>
<label for="name">お名前:</label>
<input id="name" type="text" name="お名前">
<label for="mail">メールアドレス:</label>
<input id="mail" type="text" name="メールアドレス">
</fieldset>



保存してブラウザで見てみましょう。
基本情報という見出しが入れば大丈夫です。
お問い合せ内容の部分も同じようにやってみましょう。