HTMLスキル - 第4章 Lesson5

<label>タグでフォームにラベルを付ける方法

   

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

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

<label>タグを使って、フォームにラベルを付ける方法について解説しています。
適切なラベルを設定する事で、ユーザビリティも向上するのでおすすめです。



この動画で学べること

・<label>タグの使い方



フォームにラベルを入れてみよう

前回作ったフォームにラベルを入力していきましょう。
ラベルとは、入力する部分のタイトルになる部分です
この、<input>タグの前の「お名前」に当たる部分です。



お名前:<input id="name" type="text" name="お名前">



では、「お名前」の部分を<label>タグで囲っみましょう。
そして、どの<input>タグのラベルなのかを紐付けするために、<input>タグにid名をつけ、<label>タグのforの部分にid名を入れます。



 <label for="name">お名前:</label>
<input id="name" type="text" name="お名前">



お名前の部分ができたら、メールアドレスと本文にも<label>タグとid名を入れていきましょう。



 <label for="mail">メールアドレス:</label>
<input id="mail" type="text" name="メールアドレス">
<label for="para">本文:</label>
<textarea id="para" name="本文" placeholder="お問い合わせ内容など、自由にお書き下さい。"></textarea>



保存してブラウザで見てみましょう。
ラベルの部分にカーソルを当てたときに、テキストボックスが入力できる状態になれば完成です。