0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Bootstrapを使ってフォームを作成していたらSyntaxErrorになった

Posted at

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

⇩⇩⇩日本語版

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

スクリーンショット 2021-07-02 18.52.36(2).png

###前提

  • 既にBootstrapを導入している事。

  • 下の画像のようなフォームを作りたいのでコードをコピー

スクリーンショット 2021-07-02 18.57.35(2).png

.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>

スクリーンショット 2021-07-02 19.36.24(2).png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?