【html】inputとlabelの違い

<input>と<label>。

聞いたことはあっても、違いとか使い方は分かりにくいですよね。

ということで、この記事では2つについてまとめています。

さいごには、あまり関係なさそうなクリックとチェックの違いについても触れております。

html/css初心者の人はこちらもどうぞ↓↓

【html/css初心者】仕事へ就く前にサーバーを経験すべき理由

htm/cssを勉強中の方へ。この記事では、サイト制作を始めた人がサーバーを借りてファイルをアップする経験を早く積んだ方がいい理由を解説していきます。

yoncoichi.com

input

とりあえず<input>と書いてみましょう。

タイプはcheckboxとします。

<input type="checkbox">

□が出てきたので、クリックしてみてください。

チェックマークが付き、もう１回やるとそれが外れます。

これは、いわゆる「ON-OFF機能」。

切り替えみたいな感じです。

checkboxは、ON-OFF機能

例えば、こういうのはどうでしょう。

<input type="checkbox" id="nav01">
<label for="nav01">テキスト</label>

input:checked + label {
  color: red;
}

くわしいことはさておき、この指定はチェックしたら「テキスト」が赤になり、もう1回押すと黒に戻るというものです。

消えていたテキストを出現させる

それでは、下にあるチェックボックスをクリックしてみてください。

<input type="checkbox" id="nav02">
<label for="nav02">テキスト</label>

label {
  display: none;
}
input:checked + label {
  display: inline;
}

はじめ消えていた文字が出てきて、またクリックすると見えなくなります。

ハンバーガーをタッチしたらナビメニューが出てくるのは、こんな理屈だったりします。

声を大にして言うつもりはありませんが、<input>は「ON-OFF機能」だよってのだけ覚えててください。

次は、もう何気に出てきてた<label>について。

label

まず<input>を書き、その横に「チェックボックス」と続けます。

<input type="checkbox">チェックボックス

※チェックボックスをクリックしてみてください。

「□チェックボックス」と出てきますが、クリックしてチェックできるのは□の中でだけです。

「チェックボックス」の文字をクリックしても、チェックはつきません。

今度は<label>を使って、<input>と並んで芋文字を囲みます。

<label><input type="checkbox">ラベル</label>

※「ラベル」の文字をクリックしてみてください。

<label>を使うと、「ラベル」の文字をクリックしてもチェックマークがつくようになります。

inputのidとlabelのforで関連づける

今度は、<input>は<label>に囲われてません。

<input type="checkbox" id="check">
<label for="check">ラベル</label>

<input>のidと<label>のforがcheckになっていて、それで関連づけられます。

さらに、labelを2つ以上にすることも可能です。

<input type="checkbox" id="check">
<label for="check">ラベル</label>
<label for="check">ラベル2</label>

「ラベル2」をクリックしても、チェックボックスにチェックが入ります。

inputを非表示にしても、ボックスにチェックは入る

今までの流れからすると極端な話、<label>があれば□が非表示になっても問題ないわけです。

実際、ハンバーガーメニューを作る時、<input>はdisplay: noneになっています。

そして、<label>の中で3本線を作っています。

<input type="checkbox" id="hamburger">
<label for="hamburger"><span></span></label>

input {
  display: none;
}
/* 3本線の作り方は、検証でご確認ください */

この3本線をクリックしたら、ナビメニューが出たり引っ込んだりする仕組みになります。

で、その裏では非表示なっている□にチェックがついたり外れたりしているわけです。

ということで、急にハンバーガーメニューの話になってしまいました。

なんかすみません。

それはそうと、これまでみてきた中で、クリックやチェックということばが出てきたと思います。

「どっちがどうなんだろう」「いや一緒でしょ」

と、考えれば考えるほど分からなくなるかもしれません。

なので、ちょいとこれについても触れちゃいます。

小話的な感じでどうぞ。

クリックとチェック

クリックはマウス操作によるもので、<a>タグを押したりするのがそうです。

別タブを開く時もそうですし、ググる時に検索窓を入力できる状態にするのにも、クリックしています。

あとはなんでしょうか。

検索結果に出てきたサイトやブログの中から選択しようとする時とかもですね。

またスマホだと、指で押すのをタップ操作と言いますが、これはクリックと同じだと思います。

そう考えると、マウスのクリックはパソコン主流時代のことばとなるかもしれません。

それでは、これはどうでしょうか。

チェックボックスにチェックを入れてみてください。

クリックしませんでしたか？

そして、チェックマークも入ったと思います。

いわゆるこれが、チェックした状態ですね。

じゃあ、今度は□につけたチェックマークをもう1回マウス操作してみてください。

この時もクリックしますよね。

ただし、チェックマークは外れたと思います。

2つの違い

ちょっと分からなくなってきた方が、いらっしゃるかもしれません。

ここでサクッとお伝えしておくと、チェックは<input>のチェックボックスでおもに使われることばです。

□にチェックマークをつけるのがチェック。

これ以外で、このことばはあまり使いません。

で、このチェックを入れるためにする操作がクリックです。

クリックはパソコンやスマホ操作全般に用いられるものなので、□にチェックするのもそのうちの1つになるわけです。

ちなみにちょっと上にあった は、<input>の属性にcheckedと書けば、さいしょっからチェックマークがついた状態になります。

そして、クリックしたらチェックは外れます。

<input type="checkbox" checked>

こういうふうに書きます。

と、まあ分かってしまえば、「なんだそんなことか」って感じの話かもしれません。

そんな中、ひとりでもモヤモヤが晴れたって人がいたら、これ幸いです。

一応、2つの違いをまとめておきます。

• クリック ← パソコンやスマホの操作全般に使われる
• チェック ← チェックボックスにチェックマークを入れること

参考サイト

ここまで紹介した「inputとlabel」は、HTML Living Standardをもとに解説しました。

HTML Living Standardとは、htmlのルールブックみたいなものでその最新版です。

1つ前はHTML5となります。

• 4.10.5.1.15 チェックボックスの状態「4.10.5 inputの状態」HTML Living Standard
• 4.10.4 label要素「4.10 フォーム」HTML Living Standard
• <input>：入力欄(フォーム入力要素) MDN Web Docs
• <label>：入力欄ラベル要素 MDN Web Docs

すべて翻訳ありです。

むずかしめに書かれてあるので、ホント参考程度にどうぞ。

まとめ

というわけで、終わりです。

ハンバーガーメニューの記事はこちら。
【html/css】ハンバーガーメニューを０から作る｜コピペなし