sinatra ラジオボタンを搭載 クリック範囲拡大

sinatra

• sinatraラジオボタン搭載

まず、ラジオボタンのくっつけ方

#ラジオボタンが表示されるファイル
<input type="radio" name="q1" value="ぐー">ぐー<br>
<input type="radio" name="q1" value="ちょき">ちょき<br>
<input type="radio" name="q1" value="ぱー">ぱー<br>

name,typeは前記事に説明有り。value="わたし"でvalueの値が送信される。（今回の場合わたしが送信される）
そして、

#mainのファイル
post '/confirm' do
  @q1 = params["q1"]
  if @q1 == "ぐー"
     @message = "ぐー"
     @ret = t.jan(@message)
  elsif @q1 == "ちょき"
     @message = "ちょき"
     @ret = t.jan(@message)
  elsif @q1 == "ぱー"
     @message = "ぱー"
     @ret = t.jan(@message)
  end
 erb :confirm
end

送信されたものを受け取る方法。
@q1 = params["q1"]
これで、@q1に格納される。
あとは、一緒

• クリック範囲拡大

ラジオボタンはクリックしづらいので、ボタン横の文字をクリックしても選択したことになるようなクリック範囲拡大の仕組み

<input type="radio" name="q1" id="g" value="ぐー"><label for="g">ぐー<br>

idという項目を追加して、適当に文字を指定。
その指定した文字と同じものをlabelで設定すれば完了
参考：2/3 使いやすいラジオボタンを作る方法 [ホームページ作成] All About