人気ブログランキング
人気ブログランキング
HTML&CSS PR

HTMLの基本「labelタグ」について

labeltagの使い方
記事内に商品プロモーションを含む場合があります

Djangoでアプリ開発するときに多用するであろうlabelタグについて学んでおきます。

そもそも<label>ってなに?と思う人は、

よくホームページで見るテキスト入力の枠やボタンを、設置する際に使うタグであると考えてもらえれば分かると思います。

labelタグを使う目的

<input><textarea>のタグを使ってユーザからの入力を行うタグに説明を加えるためのタグです。その他に、入力しやすさが向上する等のメリットがあります。

その為、labelの使う際は、<input>や<textarea>のユーザー入力タグとどのように紐付けるかを考えてコーディングする必要があります。

<input>や<textarea>を使う時は、極力labelタグを使う様にした方が良さそうです。

labelタグの使い方

2通りの使い方があります。

<label>と</label>の間に<input>や<textarea>を入れる方法

【使用例】

<label>

 <input
  type="text"
  id="name"
  name="name"
  value="記入欄"(記載している文字列)
  required(入力項目が入力必須)
  minlength="4"(最小文字数)
  maxlength="8"(最大文字数)
  size="10">
</label>

【実際の表示】

<label>と</label>の間に<input>が入っている場合は、<label>がこのinputタグに紐付いている事になりますので、これは理解しやすいと思います。

【補足】

inputタグのtype=“#”の#の部分を変更すれば、その他機能が得られるので補足しておきます。

【リセットボタンの作成】

type="reset"

【送信ボタンの作成】

type="submit"

<label>と</label>の間ではなく、その外に<input>や<textarea>を配置する方法

labelの後にfor=“#”を追加し、label for=“#”とinput id=“#”の#を同じ文字列にする事で紐付けができます。

【使用例】

<label for="ここを同じにする">
  ここをクリック!
</label>
<div>
  <input type="checkbox"   
      id="ここを同じにする">
</div>

【実際の表示】

関係ない文章が間に入っても「ここをクリック」押しても反応する。

【使用例2】

質問:どちらに行きたい?
<div>
  <label for="ここを同じにする1">
   【山に行く?】
  </label>
  <label for="ここを同じにする2">
   【海に行く?】
  </label>
</div>

<div>※「山に行く?」や「海に行く?」押しても反応するのを確認してください。</div>
<div>
  <input type="checkbox"   
      id="ここを同じにする1">山
</div>
<div>
  <input type="checkbox"   
      id="ここを同じにする2">海
</div>

【実際の表示】

質問:どちらに行きたい?
※「山に行く?」や「海に行く?」押しても反応するのを確認してください。

「ここを同じにする」の箇所を同じ文字列にすると、そのlabelと inputが紐付けされます。

以下の「ここをクリック」を押してチェックボックスにチェックが入るか確認してみてください。

この使い方のメリットは、2つを離してコーディング出来る為、例えば説明文と入力欄が離れている場合に、その説明文をタッチしたら入力欄にフォーカスする事ができます。

ABOUT ME
den
完全独学でWEBデザインを無謀にも挑戦している中年男。 工場勤務の会社員で3児の父。 チャレンジを忘れず、妻に怒られても心はおれず。 有益な情報を発信し、これを見ている人の為になればと思っています。
関連記事一覧