Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@yuuuko86326274

form_withのフォーム部品の属性

初めて記事を書きます。
スクール学習中にform_withについて学習した事をここに記録します。

  • 使用環境
    • Rails 6.0.0
    • Ruby 2.6.5

form_withとは

form_withメソッドとは、、、

フォームを実装するためのヘルパーメソッドです。

ヘルパーメソッドとは、、、

railsにおいて主にビューでHTMLタグを出現させたり、テキストを加工するためのメソッドの総称。
HTMLでも同様の機能を果たす事ができますが、ヘルパーメソッドを使う利点があります。
1.パスの指定やRubyの埋め込みなどの記述がシンプルになるため
2.セキュリティ上の問題を解消するため
ヘルパーメソッドで書けるのであれば優先的にそうしましょう。

form_withのフォーム部品

<h1>新規投稿ページ</h1>
<%= form_with url: "/posts", method: :post, local: true do |form| %>
  <%= form.text_field :content %>
  <%= form.submit '投稿する' %>
<% end %>

該当部分、、、
<%= form.text_field :content %>
<%= form.submit '投稿する' %>

form_withのフォーム部品の属性

上記該当部分に属性を追加する事ができる。
属性として指定できるのは
.1 name属性
.2 value属性
.3 id属性

     <%= f.text_area :tag_name, name:'item', value:@item.tags[0].tag_name, id:"tag-name" %>

.1 name属性
nameで定義されている文字列がHTTPリクエストで送信するパラメーターのkeyとなります。そしてフォーム欄に記入した文字列がvalueとして格納されて送信されます。パラメーターの中身が複数になってしまった時などにはここを指定する事で1つのパラメーターに揃える事ができます。

.2 value属性
初期値を指定できます。元々その値を入力しておく事ができます。

.3 id属性
JavaScliptで指定する。

そして、上記で紹介した属性を記述しなくても、実際にHTMLファイル内ではじめに紹介した属性指定なしのコードを記入するだけで、実は裏では自動でinput要素に置き換えられ、細かな設定をしてくれています。
それを確認するにはコードを打ってから、ブラウザの検証ツールを開いて確認してみてください。
ですので、あくまで指定しないといけない状況の場合指定すればいいと思います。
また、form_withの中身を見るには、createもしくはupdateアクション直下でbindin.pryを記入して中身を確認してください。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yuuuko86326274
2020年8月〜プログラミング学習、現在エンジニア転職活動中。 辛い事→ うまくいかず、苦しい事の方が多い。 想像以上に学習し続けないといけない。 楽しい事→ 創作している実感が常にある! 学習し続ければ、他と差をつける事が可能! ペルソナを考える事の楽しさ!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?