【Rails】form_forにbootstrapを適用し綺麗にしつつ、ラベルと入力欄を横並びにするには

記事内にPRが含まれる場合があります

2018年3月13日2024年9月22日

URLをコピーしました！

Railsの調べ物をしていてうまく出来たのでメモとして残しています。

以下のようなnewとeditのフォーム部分でBootstrapを使って見た目を綺麗にしていきます。

  <%= form_for(@task) do |f| %>
    <%= f.label :age, '年齢' %>
    <%= f.select :age,["20代", "30代", "40代", "50代", "60代" ] %>
  <%= f.submit '登録' %>

  <% end %>

formのselectにbootstrapを適用して綺麗にする

まずclassでcontrol-labelを適用するダケで綺麗になるけど、以下の文だと何故かselectの方がうまく適用されない。

<%= f.label :age, '年齢', class:'control-label' %>
<%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], class: 'form-control' %>

で、APIリファレンスを読んだりしてもわからなくて。WEB上をあちこち調べまくってselectメソッドの3個目の引数に{}を入れると何故かうまくいきました。

<%= f.label :age, '年齢', class:'control-label' %>
<%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], {}, class: 'form-control' %>

これはこういうものだと覚えておかないと。

form_for内ののラベルと入力欄を横並びにする

（１）
そのためにはform_forを、<div class=”form-horizontal” role=”form”>～</div>で囲ってあげる

つまりこんな感じ。

<div class="form-horizontal" role="form">
 <%= form_for(@person) do |f| %>
  ～～
 <% end %>
</div>

（２）
さらにラベルと入力欄を<div class=”form-group”>～</div>で囲う。これで1行になる。

そして横並びにするには、ラベルと入力欄にグリッドを適用するので、ラベルは<div class=”col-xs-2″></div>で囲ってあげて2マス分確保、入力欄は<div class=”col-xs-10″></div>で囲って10マス分確保してあげる。（横幅いっぱいになっちゃうけど）

  <div class="form-group">
      <div class="col-xs-2">
        <%= f.label :age, '年齢', class:'control-label' %>
      </div>
      <div class="col-xs-10">
        <%= f.select :age, ["20代", "30代", "40代", "50代", "60代" ], {}, class: 'form-control' %>
      </div>
  </div>

（３）１と２を合わせた完成形

<div class="form-horizontal" role="form">
  <%= form_for(@person) do |f| %>
    <div class="form-group">
     <div class="col-xs-2">
    	<%= f.label :age, '年齢', class:'control-label' %>
     </div>
     <div class="col-xs-10">
	<%= f.select :age,["20代", "30代", "40代", "50代", "60代" ], {},   class: 'form-control' %>
     </div>
    </div>
  <%= f.submit '登録' %>
  <% end %>
</div>

参考にさせていただいたサイト
https://sites.google.com/site/rubyonrailsapps/view_tips/railsnoformwobootstrapde-shi-zhuangsurutoki
Bootstrapとフォームタグの使い方いろいろ
https://qiita.com/zaburo/items/8983993d173c51cb3827
https://qiita.com/uedatakeshi/items/ef8682956f956040bfce