rails 杂记 - erb 中的 form

1. form_tag

1) 基础 Form

<%= form_tag do %>

  Form contents

<% end %>

生成 html

<form accept-charset="UTF-8" action="/" method="post">

  <input name="utf8" type="hidden" value="✓" />

  <input name="authenticity_token" type="hidden" value="J7CBxfHalt49OSHp27hblqK20c9PgwJ108nDHX/8Cts=" />

  Form contents

</form>

2) 指定 url与 method

<%= form_tag("/search", method: "get") do %>

  <%= label_tag(:q, "Search for:") %>

  <%= text_field_tag(:q) %>

  <%= submit_tag("Search") %>

<% end %>

生成 html

<form accept-charset="UTF-8" action="/search" method="get">

  <input name="utf8" type="hidden" value="✓" />

  <label for="q">Search for:</label>

  <input id="q" name="q" type="text" />

  <input name="commit" type="submit" value="Search" />

</form>

3) 指定 controller 与 action

form_tag({controller: "people", action: "search"}, method: "get", class: "nifty_form")

# => '<form accept-charset="UTF-8" action="/people/search" method="get" class="nifty_form">'

4）几个 tag

check_box_tag

<%= check_box_tag(:pet_dog) %>

<%= label_tag(:pet_dog, "I own a dog") %>

<%= check_box_tag(:pet_cat) %>

<%= label_tag(:pet_cat, "I own a cat") %>

=>

<input id="pet_dog" name="pet_dog" type="checkbox" value="1" />

<label for="pet_dog">I own a dog</label>

<input id="pet_cat" name="pet_cat" type="checkbox" value="1" />

<label for="pet_cat">I own a cat</label>

radio_button_tag

<%= radio_button_tag(:age, "child") %>

<%= label_tag(:age_child, "I am younger than 21") %>

<%= radio_button_tag(:age, "adult") %>

<%= label_tag(:age_adult, "I'm over 21") %>

=>

<input id="age_child" name="age" type="radio" value="child" />

<label for="age_child">I am younger than 21</label>

<input id="age_adult" name="age" type="radio" value="adult" />

<label for="age_adult">I'm over 21</label>

2. form_for

1）如果设置了 resources :articles

## Creating a new article

# long-style:

form_for(@article, url: articles_path)

# same thing, short-style (record identification gets used):

form_for(@article)

## Editing an existing article

# long-style:

form_for(@article, url: article_path(@article), html: {method: "patch"})

# short-style:

form_for(@article)

2）手动设置 action

<%= form_for @person, url: {action: "create"} do |person_form| %>

  <%= person_form.text_field :name %>

  <%= fields_for @person.contact_detail do |contact_detail_form| %>

    <%= contact_detail_form.text_field :phone_number %>

  <% end %>

<% end %>

生成 html

<form accept-charset="UTF-8" action="/people" class="new_person" id="new_person" method="post">

  <input id="person_name" name="person[name]" type="text" />

  <input id="contact_detail_phone_number" name="contact_detail[phone_number]" type="text" />

</form>

3）手动设置 action 与 class

controller

def new

  @article = Article.new

end

app/views/articles/new.html.erb

<%= form_for @article, url: {action: "create"}, html: {class: "nifty_form"} do |f| %>

  <%= f.text_field :title %>

  <%= f.text_area :body, size: "60x12" %>

  <%= f.submit "Create" %>

<% end %>

生成 html

<form accept-charset="UTF-8" action="/articles" method="post" class="nifty_form">

  <input id="article_title" name="article[title]" type="text" />

  <textarea id="article_body" name="article[body]" cols="60" rows="12"></textarea>

  <input name="commit" type="submit" value="Create" />

</form>

4）限定命名空间

form_for [:admin, @article]

表格将提交到在 admin 空间下的 ArticlesController (比如对于 update 方法提交到 admin_article_path(@article) ).

3. form_with

参考：https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a

1）无 model

<%= form_with url: users_path do |form| %>

  <%= form.text_field :email %>

  <%= form.submit %>

<% end %>

2）有 model

<%= form_with model: @user do |form| %>

  <%= form.text_field :email %>

  <%= form.submit %>

<% end %>

3）取消自动 ids与 class，需要手动指定

<%= form_with model: @user do |form| %>

  <%= form.text_field :name %>

  <%= form.text_field :email, id: :email, class: :email %>

<% end %>

生成 html

<form action="/users" ...>

  ...

  <input type="text" name="user[name]" />

  <input id="email" class="email" type="text" name="user[email]" />  </form>

设定 label

<%= form_with model: @user do |form| %>

  <%= form.label :name %>

  <%= form.text_field :name, id: :user_name %>

<% end %>

注意 rails 5.2 自动生成 ids

4）form id 与 class 不再包裹在 {}中

之前

<%= form_for @user, html: { id: :custom_id, class: :custom_class } do |form| %>

<% end %>

现在

<%= form_with model: @user, id: :custom_id, class: :custom_class do |form| %>

<% end %>

5）form_field 适应 model属性

<%= form_with model: @user, local: true do |form| %>

  <%= form.text_field :email %>

  <%= form.check_box :send_welcome_email %>

  <%= form.submit %>

<% end %>

这样就会在 user作用域中添加该参数，如果不想这么做，建议使用 check_box_tag 代替 form.check_box

params[:user][:send_welcome_email]

6）form_with 默认使用 ajax 提交（默认设置 remote: true）

如果不需要 ajax远程提交，必须指定 local:true

<%= form_with model: @user, local: true %>

<% end %>

而不指定 local:true，会生成（优点是不刷新页面，缺点是无法显示 error信息）

<form action="/users" data-remote="true" method="post">

  ...

</form>

该类属性由 rails-ujs 处理， rails-ujs 的其他处理技巧，参见 https://m.patrikonrails.com/a-definitive-guide-to-railss-unobtrusive-javascript-adapter-ef13bd047fff。

如何对 ajax提交做响应参考文档 http://guides.rubyonrails.org/working_with_javascript_in_rails.html

如上！