ラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法!

2015/04/29

radio-checkbox-label

こんにちは。
今回はラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法!です。

ラベルを付けてテキストと連動させると、テキスト部分をクリックしてもラジオボタンが反応するようになりますので、UI的にこっちの方がいいですよね!

ラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法!

まずは通常のラジオボタンです。
テキストだと反応しますせん。

テキスト1
テキスト2

 

続いてラベルを付けてテキストと連動させてみましょう。
まずは、ラジオボタンにそれぞれidを付けます。
テキスト部分をlabelで囲み、for属性の値をラジオボタンのidと同じにすると連動する事ができます。



 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

いかがでしたか。ちなみにチェックボックス等も同じやり方でできますよ!
以上でラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法!でした。

topへ戻る