Action View Form Helpers を最初の章だけ見てみる話

# 概要
Ruby on Rails Guides にある [Action View Form Helpers](https://guides.rubyonrails.org/form_helpers.html) の最初の章を参考に，どんなフォーム要素が作れるのかざっと見てみる．

# 詳細
## 準備
`rails new` コマンドでアプリケーションの型を作成．

```
>rails new FormHelpers
```

できたフォルダ `FormHelpers` 内に移動し，ローカルサーバーを立ち上げておく．

```
>cd FormHelpers
>rails s
```

次に，コントローラー `forms` を作成．

```
>rails g controller forms
```

ルートの設定 `FormHelpers\config\routes.rb` を次のように書き換える．

```ruby:routes.rb
Rails.application.routes.draw do
  resources :forms
end
```

最後に `FormHelpers\app\views\forms\index.html.erb` を作成する．中身はとりあえず何でもよい．作成後 http://localhost:3000/forms にアクセスし，作成した `index.html.erb` 通りの表示が出れば問題ない．

## 基本的なフォームを扱ってみる
先ほど作成した `index.html.erb` に次を書き，表示させてみる．

```erb:index.html.erb
<%= form_with do %>
  Form contents
<% end %>
```

画面には Form contents とだけ表示されるが，ページのソースを確認してみると次のようなコードが含まれている．

```html
<form action="/forms" accept-charset="UTF-8" data-remote="true" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<input type="hidden" name="authenticity_token" value="2ihgwjee1cwciHXHtf+KQz4ZIK0y81YTakht5horTkYkSYJQZZ4QQSpuQ14Gs+LuUHREqRCPwBY8Kv+ZtTVX2Q==" />
    Form contents
</form>
```

この中にある `authenticity_token` という名の input タグが重要で，Rails のセキュリティ機能を果たすものらしい．なお，`authenticity_token` 内の `value` はページを開くたびに毎回変わる．

### よくある検索フォーム
検索フォームには

- GET メソッド付きのフォーム要素：`form_with`
- 入力欄のラベル：`label_tag`
- 入力欄：`text_field_tag`
- 検索ボタン：`submit_tag`

といった要素がある．`index.html.erb` を次のように書き換え，表示させてみる．

```erb:index.html.erb
<%= form_with(url: "/search", method: "get") do %>
  <%= label_tag(:q, "次を検索:") %>
  <%= text_field_tag(:q) %>
  <%= submit_tag("検索") %>
<% end %>
```

画面には「次を検索:」の後に入力欄および検索ボタンが現れる．このページのソースのフォーム部分は次のようになっている．

```html
<form action="/search" accept-charset="UTF-8" data-remote="true" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
    <label for="q">次を検索:</label>
    <input type="text" name="q" id="q" />
    <input type="submit" name="commit" value="検索" data-disable-with="検索" />
</form>
```

### フォーム要素を生成するヘルパーたち
チェックボックスやテキスト欄，ラジオボタンのようなフォーム要素を生成するのがヘルパーである．ヘルパーは `text_field_tag` や `check_box_tag` のような `_tag` で終わる名前を持ち，`<input>` 要素を1つ生成する．各ヘルパーには名前を付けることができ，例えばフォーム内に `<%= text_field_tag(:query) %>` があれば，このテキスト欄に入力されたデータは `params[:query]` で取得できる．

#### チェックボックス
`index.html.erb` を次のように書き換え，表示させてみる．

```erb:index.html.erb
<%= check_box_tag(:pet_dog) %>
<%= label_tag(:pet_dog, "犬を飼っている") %>
<%= check_box_tag(:pet_cat) %>
<%= label_tag(:pet_cat, "猫を飼っている") %>
```

画面には「犬を飼っている」「猫を飼っている」という2つのチェックボックスが現れる．その部分のソースは次のようになっている．

```html
<input type="checkbox" name="pet_dog" id="pet_dog" value="1" />
<label for="pet_dog">犬を飼っている</label>
<input type="checkbox" name="pet_cat" id="pet_cat" value="1" />
<label for="pet_cat">猫を飼っている</label>
```

#### ラジオボタン
`index.html.erb` を次のように書き換え，表示させてみる．

```erb:index.html.erb
<%= radio_button_tag(:type, "kinoko") %>
<%= label_tag(:type_kinoko, "きのこ派") %>
<%= radio_button_tag(:type, "takenoko") %>
<%= label_tag(:type_takenoko, "たけのこ派") %>
```

画面には「きのこ派」「たけのこ派」という2つのラジオボタンが現れる．その部分のソースは次のようになっている．

```html
<input type="radio" name="type" id="type_kinoko" value="kinoko" />
<label for="type_kinoko">きのこ派</label>
<input type="radio" name="type" id="type_takenoko" value="takenoko" />
<label for="type_takenoko">たけのこ派</label>
```

2つのラジオボタンにはともに `type` という名前が与えられている．すなわち，`params[:type]` で取得される値は `"kinoko"` か `"takenoko"` のどちらか一方になる．

### その他のヘルパー
その他，次のようなヘルパーが用意されている．`index.html.erb` を書き換えて表示させてみる．

```erb:index.html.erb
<%= text_area_tag(:message, "ここに入力してください", size: "24x6") %>
<br>
<%= label_tag(:password, "パスワード:") %>
<%= password_field_tag(:password) %>
<br>
<%= hidden_field_tag(:checked, "未確認") %> <%# チェックボックスが空のときはparams[:checked]が"未確認"となる %>
<%= check_box_tag(:checked) %>
<%= label_tag(:checked, "確認しました") %>
<br>
<%= search_field(:user, :name) %>
<br>
<%= telephone_field(:user, :phone) %>
<br>
<%= date_field(:user, :born_on) %>
<br>
<%= datetime_local_field(:user, :graduation_day) %>
<br>
<%= month_field(:user, :birthday_month) %>
<br>
<%= week_field(:user, :birthday_week) %>
<br>
<%= url_field(:user, :homepage) %> <%# URLでないと注意喚起される %>
<br>
<%= email_field(:user, :address) %> <%# メルアドでないと注意喚起される %>
<br>
<%= color_field(:user, :favorite_color) %>
<br>
<%= time_field(:task, :started_at) %>
<br>
<%= number_field(:product, :price, in: 1.0..20.0, step: 0.5) %>
<br>
<%= range_field(:product, :discount, in: 1..100) %>
```

画面にはたくさんの入力欄が現れるので，どんなもんか触ってみる．ソースは次のようになっている．

```html
<textarea name="message" id="message" cols="24" rows="6">
ここに入力してください</textarea>
<br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" />
<br>
<input type="hidden" name="checked" id="checked" value="未確認" /> 
<input type="checkbox" name="checked" id="checked" value="1" />
<label for="checked">確認しました</label>
<br>
<input type="search" name="user[name]" id="user_name" />
<br>
<input type="tel" name="user[phone]" id="user_phone" />
<br>
<input type="date" name="user[born_on]" id="user_born_on" />
<br>
<input type="datetime-local" name="user[graduation_day]" id="user_graduation_day" />
<br>
<input type="month" name="user[birthday_month]" id="user_birthday_month" />
<br>
<input type="week" name="user[birthday_week]" id="user_birthday_week" />
<br>
<input type="url" name="user[homepage]" id="user_homepage" /> 
<br>
<input type="email" name="user[address]" id="user_address" /> 
<br>
<input value="#000000" type="color" name="user[favorite_color]" id="user_favorite_color" />
<br>
<input type="time" name="task[started_at]" id="task_started_at" />
<br>
<input step="0.5" min="1.0" max="20.0" type="number" name="product[price]" id="product_price" />
<br>
<input min="1" max="100" type="range" name="product[discount]" id="product_discount" />
```

# 参考
- [Action View Form Helpers — Ruby on Rails Guides](https://guides.rubyonrails.org/form_helpers.html)