フォームのinput要素でチェックボックスやラジオボタンはラベルタグと紐付けしておくと、ラベルをクリックしたときも対象のオンオフを切り替えすることができる。

紐つけ方はinputの方にid属性を付与して、labelの方にはforでそのidを指定してあげればOK

以下のような感じ。こうすれば「オプション1」という文字列をクリックしてもチェックが付く。

<input type="checkbox" id="order_option_1" />
<label for="order_option_1">オプション1</label>

これと同じことをrailsのform helperでもやりたいとき。

今までlabelだけは普通のlabelタグを使っていたけれど、以下のようにすればlabelもhelperで生成してinput要素と紐付けできることがわかった。

実はf.labelはvalue:というオプションがあって、そこに指定した値がforを生成するときに使用される。

= f.checkbox :order_option, 1
= f.label :order_option, 'オプション1', value: 1

checkboxとかradio_buttonがid要素を作るときにvalueを利用するのは気づいていたけれど、まさかlabelもそうだとは思わなかった。

これでhelperで全て書けるようになったので少しうれしい。

labelタグで書いてもとくに変わらないけれど気持ちの問題。

この記事の環境情報

  • Ruby on Rails 7.0.4
  • 唇が乾燥中