はじめに

Bootstrapを導入して投稿フォームを作ってみようと思いました。

⇩⇩⇩日本語版

しかし、構文エラーになってしまいました。
結論、Bootstrapの記述方法が間違えてました。
解決策をアウトプットしていきます。

前提

既にBootstrapを導入している事。
下の画像のようなフォームを作りたいのでコードをコピー

.html

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

エラーが起きた原因

この記述をrailsでも使えるように記述し直さなければなりません。

<div class="form-group">
  <%= f.label :faclity_name,"施設名" %><br />
  <%= f.text_field :faclity_name, class="form-control" id="formGroupExampleInput" placeholder="Example input"%>
</div>

railsのヘルパーメソッドであるform_withで記述した情報を送信するようにこのように記述しました。

間違えていた考え

このフォームを使うためには

タグ内のclass名、id名を変えてはいけないと思っていました。

 <%= f.text_field :faclity_name, class="form-control" id="formGroupExampleInput" placeholder="Example input"%>

この<div>で囲った中にフォームを記述をすればpreview通りに使う事ができます。

<div class="form-group">
  フォームの処理
</div>

もう一つの間違えはhtml.erb内の記述の仕方です。
class名やid名を:ではなく=で記述していました。

訂正すると

<%= f.text_field :faclity_name, class: "form-control" id: "formGroupExampleInput" placeholder: "Example input"%>

最終的に下記の記述でフォームを出す事ができました。

div class="form-group">
  <%= f.label :faclity_name, "施設名" %><br />
  <%= f.text_field :faclity_name, class: "form-control", placeholder: "〇〇遊園地" %>
 </div>