# form_withについて完全に理解するイベント

## 環境
- Rails7系
- Ruby3.2.2

## 使用するリポジトリ
https://github.com/kenchasonakai/form_with_sample

## 今日使うアプリの環境構築
使用するリポジトリに記載してあるURLをクリックしてREADME通りに環境構築してみよう
デバッグツールが仕込んであるのでタスクの作成はまだ行わないでください

## form_withってなんだ
<details>
<summary>考えてみよう！</summary>
セキュリティの考慮もした上でHTMLのformを簡単に作ってくれるすごいやつ
</details>

## form_withの基本的な書き方を見てみよう

### モデルと紐づくform_with
- [ユーザー作成ページにアクセス](http://localhost:3001/users/new)

<h1>New User</h1>

<%= form_with model: @user do |f| %>
  <div class="mb-3">
    <%= f.label :email, class: 'form-label' %>
    <%= f.email_field :email, class: 'form-control' %>
  </div>
  <div class="mb-3">
    <%= f.label :password, class: 'form-label' %>
    <%= f.password_field :password, class: 'form-control' %>
  </div>
  <%= f.submit nil, class: 'btn btn-primary' %>
<% end %>

<div class="mt-3"><%= link_to 'Login?', login_path %></div>

実際の要素(モデルと紐づく)

<div class="mb-3">
  <label for="user_email">Email</label>
  <input type="email" name="user[email]" id="user_email">
</div>

### モデルと紐づかないform_with
- [ログインページにアクセス](http://localhost:3001/login)

<h1>Login</h1>

<%= form_with url: login_path do |f| %>
  <div class="mb-3">
    <%= f.label :email, class: 'form-label' %>
    <%= f.email_field :email, class: 'form-control' %>
  </div>
  <div class="mb-3">
    <%= f.label :password, class: 'form-label' %>
    <%= f.password_field :password, class: 'form-control' %>
  </div>
  <%= f.submit nil, class: 'btn btn-primary' %>
<% end %>

<div class="mt-3"><%= link_to 'Sign up?', new_user_path %></div>

実際の要素(モデルと紐づかない)

<div class="mb-3">
  <label for="email">Email</label>
  <input type="email" name="email" id="email">
</div>

実際の要素を見比べてみるとname属性やfor・id属性に違いがあるのがわかりますね

### formのlabelについて
formにはlabelとinputを紐づける機能があります
紐付けを行うとlabelをクリックすると対応するinputにフォーカスが向きます

- id 属性を `<input>` 要素に追加
- for 属性を `<label>` 要素に追加
- for の値は `<input>` 要素の id と同じする

form_withを使うと自然と紐付けが行われます

## paramsについて
formから送るデータはControllerでparamsという形で送られます
その際にユーザーが入力したもの意外にもさまざまなデータが送られています
実際に見て見ましょう
下記のコマンドをコンテナの外で実行してください

docker attach form_with_sample-web-1

次にタスク作成ページにアクセスして何か値を入力してCreate Taskボタンを押して見ましょう
その後ターミナルを確認して`params`と実行して見ましょう

From: /app/app/controllers/tasks_controller.rb:24 TasksController#task_params:

    22: def task_params
    23:   binding.pry
 => 24:   params.require(:task).permit(:title, :body)
    25: end

[1] pry(#<TasksController>)> params
=> #<ActionController::Parameters {"authenticity_token"=>"th85x7pYHxMsuVDPYHcGh23P5J6mNStUIYvLzfPkjj77I0wUpUTw6M2UBJtjq1tTOZoJhKtTUpKd_kswNQTg9g", "task"=>{"title"=>"aaa", "body"=>"body"}, "commit"=>"Create Task", "controller"=>"tasks", "action"=>"create"} permitted: false>