bootstrapのformをrubyの形にするにはどうすればいいのでしょうか？

前提・実現したいこと

現在bootstrapを用いて自己紹介入力フォームを作っているのですが、rubyで書いたフォームにbootstrapを反映させたいのですがうまくいきません。

bootstrapのexampleに乗っていたものをベースにhtmlで書いたもの↓

これをf.labelとか使うform_withなどに変えたい
理由：bootstrapはDBとやり取りせず、見た目だけ作っているから。ちゃんとDBに格納するようにしたい。(そもそもboostrapがDBとやり取りしないと言う考え方がまちがっていたらご指摘ください。初学者なので勘違いしているかもしれません。)

<form>
  <div class="form-row">
  <% @users.each do |user| %>
    <div class="form-group col-md-6">
      <label for="inputEmail4">Name</label>
      <input type="name" class="form-control" id="inputEmail4" placeholder="Name" value="<%=user.name %>">
    </div>
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email" value="<%=user.email %>">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password" >
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Photo</label>
    <input type="file"  class="form-control" id="inputAddress" placeholder="1234 Main St" value="<%=user.image %>">
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
<% end %>

試したこと

rubyで書いたフォームのclass名をbootstrapのものにしたりしましたが、フォームの枠が二重になったりとうまくいきませんでした。
２つのパターンを試しました。divをboostrapのクラスでした場合フォームの枠が二重になってしまいました。

<%= form_with model: User.first do |form| %>
<div class="form-group col-md-2">
  <%= form.text_field :title %>
  </div>
<% end %>

<%= form_with model: User.first do |form| %>

  <%= form.text_field :title class="form-control"%>
 
<% end %>

補足情報（FW/ツールのバージョンなど）

scaffoldとgem'devise'を使っています。

routes
1Rails.application.routes.draw do
2  devise_for :users
3  resources :pages
4  root "pages#index"
5  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
6  get "/intro" => "pages#intro"
7end

rhiroe

2019/11/22 00:28

試した(実際に書いてみた)ファイルを提示してください

行動規範の内容に同意します

回答1件

ベストアンサー

フォームの枠が二重になったりとうまくいきませんでした。

<%= form_with model: User.first do |form| %>

<div class="form-group col-md-2"> <%= form.text_field :title %> </div> <% end %> > <%= form_with model: User.first do |form| %> > <%= form.text_field :title class="form-control"%> > <% end %> > ```

これは単にフォームを2回生成しているだけなのですが、それに気づいていないといことでいいでしょうか...。

Bootstrapはあくまで見た目を整えるだけのものなのでフォームを生成したりすることはできません。
フォームを実際に生成するのはHTMLのみであり、Rubyで書いた場合であってもそれはRubyのコードでHTMLを出力するだけなので、HTMLをそのまま書くのとなんの変わりもありません。

bootstrapで書いたもの

<form> <div class="form-row"> <% @users.each do |user| %> <div class="form-group col-md-6"> <label for="inputEmail4">Name</label> <input type="name" class="form-control" id="inputEmail4" placeholder="Name" value="<%=user.name %>"> </div> ... > ```

として挙げられているこちらのコードですが、これはHTMLにBootstrapで用意されているclassを持たせただけというのは理解できていますかね？「これ丸ごと全部Bootstrap！」というわけではないですよ。

正直、何をどこまで理解できているかわからないのでどこから説明すればいいかな...という状況です。

投稿2019/11/22 01:35

rhiroe

総合スコア2349