HTML

フォーム部品にラベルをつけてみよう

フォーム部品にラベルをつける方法を学んでいきます。

  • label
  • id
  • for
  • 入れ込む

label

・前回のplaceholderの他にも入力部品は何を入力するべきかを明示する方法があります。labelタグを使うことによって入力部品の直前に何を入力するべきかを書いておくことができます。

・書き方は2通りあってid属性で紐付ける方法とinputタグをlabelタグの中に入れる方法です。

・まずはid属性で紐付けてみます。

id

・まずフォーム部品がなんなのかを説明するためにラベルタグで端的に説明した文字を囲ってあげます。

・例えば今回の場合はユーザー名を書くためのフォーム部品を作りたいと思ったのでユーザー名という文字をlabelタグで囲います。これは開始タグと終了タグが必要なので<label>ユーザー名</label>と書いてあげるといいでしょう

・次にインプットタグを書いてあげます。今回属性はtype=“text”でいいでしょう。

・そうしたらlabelとinputを紐付けする必要があるのでinputタグの中にid属性を付けてあげる必要があります。名前は自由に決めれるのでid="name”とします。

for

・labelの方もidで名前をつけたinputタグを受け取る必要があるのでfor属性で先程の”name”を受け取ってあげます。for="name”と書いていけばいいでしょう。

入れ込む

・こちらのほうが簡単で単にlabelタグの中にinputタグを入れてしまえば紐付けされるという方法です。

・labelタグの中に書いた説明のあとにinputタグを書いていきその後にlabelタグの終了タグを書いていきます。

・ラベルを付ける利点としてはlabelにつけた文字をクリックしても入力可能な状態になるところです。また目が不自由なひとに対しても親切な作りになっているので覚えておきましょう。

-広告-

 

 






-HTML