こんにちは。
今回はラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法！です。
ラベルを付けてテキストと連動させると、テキスト部分をクリックしてもラジオボタンが反応するようになりますので、UI的にこっちの方がいいですよね！
ラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法！
まずは通常のラジオボタンです。
テキストだと反応しますせん。
1 2 3 4 | <form action="xxx" method="post"> <input type="radio" name="text1" value="テキスト1" checked="checked">テキスト1 <input type="radio" name="text1" value="テキスト2">テキスト2 </form> |
続いてラベルを付けてテキストと連動させてみましょう。
まずは、ラジオボタンにそれぞれidを付けます。
テキスト部分をlabelで囲み、for属性の値をラジオボタンのidと同じにすると連動する事ができます。
1 2 3 4 | <form action="xxx" method="post"> <input type="radio" name="text2" value="テキスト3" checked="checked" id="radio1"><label for="radio1">テキスト3</label> <input type="radio" name="text2" value="テキスト4" id="radio2"><label for="radio2">テキスト4</label> </form> |
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
いかがでしたか。ちなみにチェックボックス等も同じやり方でできますよ！
以上でラジオボタンやチェックボックス等にラベルを付けてテキストと連動させる方法！でした。
