3
6

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.

form_withメソッドについて

Last updated at Posted at 2020-05-17

Railsでモデルと関連付けたフォームを作成する場合、form_withメソッドを使用すると便利です。

_form.html.erb
<%= form_with(model: モデルのインスタンス) do |form| %>
//省略
<% end %>

form_withとは、ビューヘルパーの一種です。
ビューヘルパーはRailsに用意された、HTMLを生成するためのメソッドです。
以下のようなHTMLは、

497CE109-C38B-4111-8DCE-68366FDAA1B1_4_5005_c.jpeg


<form action="/tasks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="qbu8RFLhyCuAElg1qr7MLYDEdiEINJdEe1JLQFLr7kyWPFiHCEZKszOrvwON33s9CqGz7njGpBasOzrpYkb8/w==">
  <div class="task_name">
    <label for="task_name">タスク名</label>
    <input type="text" name="task[task_name]">
  </div>
  <div class="task_content">
    <label for="task_content">内容</label>
    <input type="text" name="task[content]">
  </div>
//省略
  <input type="submit" name="commit" value="Create Blog" data-disable-with="Create Task">
</form>

ビューヘルパーを使用することで、以下のように記述できます。

_form.html.erb
<%= form_with(model: @task, local: true) do |form| %>
  <div class="task_name">
    <%= form.label :タスク名 %>
    <%= form.text_field :task_name %>
  </div>
  <div class="task_content">
    <%= form.label :内容 %>
    <%= form.text_field :content %>
  </div>
  <%= form.submit %>
<% end %>

form_withメソッドにはmodelオプションの引数として、モデルクラスのインスタンスを渡す必要があります。
form_withは、モデルのインスタンスを元に、「formを送信すると、どのようなリクエストを送るか」を決定します。

今回の例でいうと、
<%= form_with(model: Task.new) %>という記述により、
form_withはHTTPメソッドがPOSTで/tasksというURLを流すためのhtmlのフォームを自動で生成します。
このTask.newは、コントローラー内で@task = Task.newなどといったような形でインスタンス変数に入れられるので、form_withでは<%= form_with(model: @task) %>という使用方法が一般的です。
また、form_withメソッドは、デフォルトではhtmlではなくJavaScriptのリソースを取得しようとしてしまうので、
local: trueとすることで、HTML用のリクエストを発行するようにします。
formタグとして出力させるので、form_withメソッドは<%= %>で囲う必要があります。

フォームパーツ
form.labelは、HTMLのlabelタグを作成するメソッドです。
form.text_fieldは、
属性(type)をtextに指定した、HTMLのinputタグ(自由入力欄)を作成するメソッドです。
form.submitは、
属性(type)をsubmitに指定した、HTMLのinputタグ(送信ボタン)を作成するメソッドです。
それぞれdivタグで囲んでいるのは、改行するためです。divタグ、brタグで囲わないと横一列になります。

3
6
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
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?