どうも7noteです。inputとlabelの位置関係から、紐づける方法について。
フォームを作成する時にちょっとオシャレなボタンにしようと思いinputに装飾を入れたい時、inputとlabelの関係性を知っているとスムーズなコーディングができます。
inputとlabelの位置関係から紐づける方法は大きく2種類あるのでそれぞれ見ていきます。
labelタグの中
にinputがある場合
<label><input type="radio" name="">選択項目<label>
この場合自動的に、ラジオボタンの「◎」の部分をクリックするだけでなく、文字の部分やlabel要素の中をクリックすることで、input
にチェックを付けることができるようになります。
![uchi.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fb073413c-b734-a964-9d40-0ca06402dd89.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c3bcec2eb8942c5a94d8d51a134104b1)
labelタグの外
にinputがある場合
<input type="radio" name="" id="hogehoge"> <label for="hogehoge">選択する<label>
この場合、例のようにinput
にidを指定し、label
にfor=””と書きinputに指定したidと同じものを指定します。
![soto.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F40fe1940-07fe-8e12-af3a-af1ba430fad1.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2dfa33ace7e729e4aa08e548fc95bdbc)
これをすることにより、inputが遠く離れた場所にあったとしても紐づけることができlabel要素をクリックすることでinputにチェックを付けることができます。
まとめ
この方法を使うことで、inputのチェックがついているかどうかを判定する:checked
を使いlabelタグや他の要素の装飾を変更する方法があります。
それについてはまた明日投稿予定なのでよかったら見てください。
inputしかつかった事がなく、label要素を初めて知った時は感激でした。input要素だけだと特にラジオボタンやチェックボックスがクリックやタップしにくい事があるので、検索フォームや問い合わせフォームを作るときはlabelを入れておきたいところです。