#はじめに
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>