HTMLのinputとlabelを使用してidとforを紐付けしてみる

HTMLのlabelとinputをidとforで紐付けしてみようと思います。

inputに「id」labelには「for」を属性値として指定するのですが、特にHTMLでinputのtype属性の値を「radio」にしたラジオボタンとtype属性の値を「checkbox」にしたチェックボックスを作るときに活躍してくれるのがlabelタグです。

個人的にはラジオボタンをデザインするときに、もう少し理解しておこうと思ったのでHTMLからCSSを書くまであたりを記事にしておこうと思います。

1. まずはHTMLのinputとlabelを使用してみる
- 1.1. input typeの値を「radio」でラジオボタン作成
- 1.2. labelをつけるとinputはどうなるか使ってみる
2. inputにidをlabelにforを紐付けする使い方
- 2.1. inputにidを指定する目的は何か
- 2.2. labelにforを指定してidと関連させる
3. 紐付けしたlabelをCSSでデザイン
4. まとめ

まずはHTMLのinputとlabelを使用してみる

HTMLのinputとlabelをまずは使って基本的なラジオボタンを作成してみます。

HTMLで記述した状態だけの状態でidとforをぶち込んで進化させながら最終的にCSSでデザインしていこうと思います。

input typeの値を「radio」でラジオボタン作成

HTMLで書くとラジオボタンは以下のように表示されます。

⇐ラジオボタンです。

type属性の属性値に「radio」と指定してあげれば、ごくごく普通のラジオボタンになります。次は<input type=”radio”>にlabelをつけるとどうなるか確認です。

labelをつけるとinputはどうなるか使ってみる

labelをinputにつけるとどうなるか。

シンプルにlabelを使用した書き方が以下です。

<label>ラジオボタン<input type="radio"></label>

<input type=”radio”>をlabelで囲むことで表示には変化はありませんが、labelがinputに対して変化するのはボタンにチェックを入れるときに変化が出ます。

labelでinputを囲む前はテキストをクリックしてもチェックを入れることができませんでした。

ですがlabelで囲んだ場合は「ラジオボタン」のテキストをクリックしてもボックスにチェックが入るようになるのです。

labelを使うことによってチェックができる範囲が広がるということですね。クリック範囲が広がるためユーザーが使いやすくなる利点があるのです。

inputにidをlabelにforを紐付けする使い方

HTMLのinputには「id」をlabelには「for」の値を使うことができます。この場合はlabelでinput要素を囲んだ書き方を進化させた使い方です。

idとforを値に指定する使い方でもlabelでinput要素を囲んだときと同じく紐付けはできます。ボックス自体にヒットするのではなく関連するテキストをクリックしてチェックすることができます。

inputにidを指定する目的は何か

idをforと紐付けして関連させる目的は何があるのか、ちょい気になります。

id属性で与えられたidは、データ処理をJavaScriptやPHPなどで行う上で使われることがあります。そしてリンクのアンカーに使ったり、CSSの適用に使ったりと使用目的は複数あります。

CSSのことで言えばHTMLで<div id=”hoge”></div>を#hoge {}と使いますが、このときのidと同じ目的でも使えます。

input要素にはidを指定してlabelのforと関連させるとCSSでデザインする幅が広がるということを目的としたイメージが私には強いです。

labelにforを指定してidと関連させる

CSSでデザインする幅が広がるなら使いたい。labelに値forを指定してidと関連させる場合はHTMLをどう記述すればいいかになってきますが下記のような記述をします。

<input type="radio" id="radio1">
<label for="radio1">ラジオ1</label>

HTMLでinput要素のidの値を決めて指定してあげます。

そしてラベルになるlabelタグにfor属性を記述してforの値にinputのidの値と同じ値を指定します。

紐付けして関連させるにはidとforは同じ値にしてあげることが重要なのですね。

<input type="radio" id="radio1">
 <label for="radio1">ラジオ1</label>
<input type="radio" id="radio2">
 <label for="radio2">ラジオ2</label>
<input type="radio" id="radio3">
 <label for="radio3">ラジオ3</label>

またラジオボタンは複数にして使うことがありinput type=”radio”が自然と増えます。その場合は一つのinput type=”radio”に対して一つずつのlabelにしますが、idとforも一つに対して一つずつid名で値が被らないように紐付けて関連させます。

紐付けしたlabelをCSSでデザイン

個人的に今回のlabelについてはCSSでデザインするときがよくわからなくて記事にしておきたかったのです。

例としてinput要素でラジオボタンを作成してラジオボタンにlabelで紐付けしてからラジオボタンをデザインするCSSのコツを理解できたらなと思い、ここからは記事を書きながらデザインしていく流れで書いています。めちゃくちゃ時間かかりました…

CSSでデザインするラジオボタンのHTML

<div class="radios">
  <input type="radio" name="radiotes" class="radio-input" id="radio1">
  <label for="radio1">ラジオ1</label>
  <input type="radio" name="radiotes" class="radio-input" id="radio2">
  <label for="radio2">ラジオ2</label>
  <input type="radio" name="radiotes" class="radio-input" id="radio3">
  <label for="radio3">ラジオ3</label>
</div>

HTMLを上記のように記述。

ラジオを3つ作ることにして、3つのradioのidを「radio1」「radio2」「radio3」にしてinput要素一つずつにlabelをつけます。

そしてlabelにはfor属性を使い値を指定します。inputのidと紐づけるのでid名をforにも記述します。これでラベルのテキスト「ラベル1〜3」をクリックしてもそれぞれの関連付けされたラジオボックスにチェックが入ります。

もともとのラジオボタンはCSSで消す

もともとのinput type=”radio”で作成したラジオボタンを消します。消しておかないと後から作成するCSSのラジオボタンと2つ存在することになるからです。

.radio-input {
display: none;
}

HTMLでinputに「radio-input」というクラス属性をつけてるのでクラスでdisplay:noneにしてラジオボタンを消します。

クラス属性をつけない場合は以下の書き方でも大丈夫です。

input[type="radio"] {
display: none;
}

上記の場合はinput type=”radio”だけにスタイルがあたるように属性名と属性値で指定した属性セレクタです。この書き方でもいけました。

inputとlabelを隣接セレクタで位置調整

次にinputとlanelにCSSの隣接セレクタを使ってラベルの位置調整をします。

.radio-input + label {
  margin-right: 20px;
  position: relative;
  padding:10px 10px 10px 30px;
  background-color: #e6e6e6;
  color: #8594eb;
  border-radius: 5px;
}

HTMLでクラス属性にしたradio-inputのlabelに対してスタイルを指定できるように隣接(兄弟)セレクタにしてCSSを書きます。

後にposition:relativeをかますのでlabelには「relative」になってもらいます。

「label::before」で擬似ラジオボタン作成

次は消し去った本来のラジオボタンの代わりに擬似ラジオボタンを作ります。

labelに擬似要素「before」を使いました。

.radio-input + label::before {
  content: "";
  display: block;
  position: absolute;
  top: 9px;
  left: 5px;
  width: 15px;
  height: 15px;
  border: 2px solid #8594eb;
  border-radius: 50%;
}

::beforeでラベルの手前にラジオボタンを表示させます。

そしてlabelにはrelativeをかましてるのでlabelの左上を基準にして親要素にした擬似ラジオボタンにabsoluteにしてtopとleftで位置調整してます。

あとは背景色をつけて枠線をつけて〜のラジオボタン自体を丸くし〜のとごにょごにょしてます。

チェックしてからのデザインをする「::checkd」

そしたらお次はチェックが入ったらラベルの色が変わるようにしておきました。

.radio-input:checked + label {
  color: #4547ee;
}

checkdを指定するとラベルがクリックされるとlabelのテキストが色を変えてくれます。

このときも隣接セレクタを使用してます。

「label::after」でチェックマークのデザイン

最後にチェックが入ったときのチェックマークを表示するデザインです。

.radio-input:checked + label::after {
  content: "";
  display: block;
  position: absolute;
  top:13px;
  left: 9px;
  width: 10px;
  height: 10px;
  background: #4547ee;
  border-radius: 50%;
}

チェックマークにもinputに:checkdでチェックが入ってからのスタイルをあてられるようにしてからlabelに擬似要素afterも指定したセレクタにします。

チェックマークは基本位置はabsoluteにしてるのでleftとtopで擬似ボタン丸枠の中に目を細めながら調整していきます。最近目がかすむものでして。

これでHTMLでinputとlabelにidとforを紐付けしてからcssでデザインしたラジオボタンにしてみるのは完成です。