どうも7noteです。inputとlabelの位置関係から、紐づける方法について。

フォームを作成する時にちょっとオシャレなボタンにしようと思いinputに装飾を入れたい時、inputとlabelの関係性を知っているとスムーズなコーディングができます。

inputとlabelの位置関係から紐づける方法は大きく2種類あるのでそれぞれ見ていきます。

labelタグの`中`にinputがある場合

<label><inputtype="radio"name="">選択項目<label>

この場合自動的に、ラジオボタンの「◎」の部分をクリックするだけでなく、文字の部分やlabel要素の中をクリックすることで、inputにチェックを付けることができるようになります。

<inputtype="radio"name=""id="hogehoge"><labelfor="hogehoge">選択する<label>

この場合、例のようにinputにidを指定し、labelにfor=""と書きinputに指定したidと同じものを指定します。

これをすることにより、inputが遠く離れた場所にあったとしても紐づけることができlabel要素をクリックすることでinputにチェックを付けることができます。

この方法を使うことで、inputのチェックがついているかどうかを判定する:checkedを使いlabelタグや他の要素の装飾を変更する方法があります。
それについてはまた明日投稿予定なのでよかったら見てください。

inputしかつかった事がなく、label要素を初めて知った時は感激でした。input要素だけだと特にラジオボタンやチェックボックスがクリックやタップしにくい事があるので、検索フォームや問い合わせフォームを作るときはlabelを入れておきたいところです。