1. Ror lab. season 2
- the 13th round -
Action View
Form Helpers - 1
December 29th, 2012
Hyoseong Choi

2. form_tag
• Two arguments
1. path for action : absolutely 1st argument
2. options hash
• HTTP method
: post(default), get, put, delete
• HTML options : class, style, ...

3. form_tag
Basic Form
<%= form_tag do %>
Form contents
<% end %>
app/views/home/index.html.erb
current action
<form accept-charset="UTF-8" action="/home/index" method="post">
<div style="margin:0;padding:0">
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="authenticity_token" type="hidden"
value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
</div>
Form contents to prevent
</form> CSRF

4. form_tag
Multiple Hashes
form_tag(:controller => "people", :action =>
"search", :method => "get", :class => "nifty_form")
# => '<form accept-charset="UTF-8" action="/people/
search?method=get&class=nifty_form" method="post">'
form_tag({:controller => "people", :action =>
"search"}, :method => "get", :class => "nifty_form")
# => '<form accept-charset="UTF-8" action="/people/
search" method="get" class="nifty_form">'

5. Helpers
Generating Form Elements
• text_field_tag
• text_area_tag http://modernizr.com/docs/
• check_box_tag Modernizr
• radio_button_tag yepnope
• password_field_tag
• hidden_field_tag polyfiller
• search_field_tag
• telephone_field_tag HTML5 controls
• url_field_tag
• email_field_tag
http://en.wikipedia.org/wiki/Polyfill
https://github.com/russfrisch/modernizr-rails

6. http://html5readiness.com

7. HTML 5 “Form 2.0”
Firefox v17.0.1 Safari v6.0.2
Chrome v23.0.1271.97 Opera v12.11

8. HTML 5 “Form 2.0”
Form Element Helpers
Rails 3 HTML5 Input Types
search_field search
telephone_field tel
url_field url
email_field email
number_field number
range_field range
Agile Web Development with Rails 4th edition

9. HTML 5 “Form 2.0”
Firefox v17.0.1 Safari v6.0.2
Chrome v23.0.1271.97 Opera v12.11

10. Search Form
for bookmark
<%= form_tag("/search", :method => "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("Search") %>
<% end %>
<form accept-charset="UTF-8" action="/search"
method="get">
<label for="q">Search for:</label>
<input id="q" name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>

11. Form Elements Helpers
Checkboxes
<%= 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>

12. Form Elements Helpers
Radio Buttons
<%= 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>

13. Form Elements Helpers
Others
<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>
<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>

14. Model Object
Helpers
• check_box_tag
• radio_button_tag
• No _tag • text_area_tag
• password_field_tag
• hidden_field_tag

15. for Model Object
@person -> name : “Henry”
<%= text_field(:person, :name) %>
for an instance for a method
variable name(attr.)
<input id="person_name" name="person[name]"
type="text" value="Henry"/>

16. Binding a Form to
an Object
def new
@article = Article.new
end
<%= 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 %>

17. <%= 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 %>
<form accept-charset="UTF-8" action="/articles/
create" method="post" class="nifty_form">
<input id="article_title" name="article[title]"
size="30" type="text" />
<textarea id="article_body" name="article[body]"
cols="60" rows="12"></textarea>
<input name="commit" type="submit" value="Create" /
>
</form>

18. in the controller,
params[:article]
params[:article][:title]
params[:article][:body]

19. fields_for
Person
•name
•age
•sex
•address
•telephone

20. fields_for
has_one
or
Person Contact
has_many
•name •address
•age •telephone
•sex
belong_to
using nested attributes

21. fields_for
class Person < ActiveRecord::Base
has_one :contact, :dependent => :destroy
end
class Contact < ActiveRecord::Base
belongs_to :person
end
using accepts_nested_attributes_for

22. Using Resources
resources :articles in config/routes.rb
## Creating a new article
# long-style:
form_for(@article, :url => articles_path)
# short-style (record identification gets used):
form_for(@article)
## Editing an existing article
# long-style:
form_for(@article, :url =>
article_path(@article), :html => { :method =>
"put" })
# short-style:
form_for(@article)

23. Using Namespaces
namespace :admin do
resources :posts, :comments
end
in routes.rb
form_for [:admin, @post]
in _form.html.erb
admin_post_path(@post) on update
app/controllers/admin/posts_controller.rb
app/controllers/admin/comments_controller.rb
app/views/admin/posts/new.html.erb
app/views/admin/posts/edit.html.erb

24. HTTP Verbs
• GET
for all browsers
• POST
• PUT ?
• DELETE

25. PUT & DELETE
• A hidden input : _method
form_tag(search_path, :method => "put")
<form accept-charset="UTF-8" action="/search"
method="post">
<div style="margin:0;padding:0">
<input name="_method" type="hidden" value="put" />
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="authenticity_token" type="hidden"
value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
</div>
...

26. select_tag
<select name="city_id" id="city_id">
<option value="1">Lisbon</option>
<option value="2">Madrid</option>
...
<option value="12">Berlin</option>
</select>
<%= select_tag(:city_id, '<option value="1">Lisbon</
option>...') %>

27. options_for_select
<%= options_for_select([['Lisbon', 1], ['Madrid',
2], ...]) %>
1st argument => a nested array
output:
<option value="1">Lisbon</option>
<option value="2">Madrid</option>
...
<%= select_tag(:city_id, options_for_select(...)) %>

28. options_for_select
<%= options_for_select([['Lisbon', 1], ['Madrid',
2], ...], 2) %>
output: 2nd argument => ‘selected’
<option value="1">Lisbon</option>
<option value="2" selected="selected">Madrid</option>

29. select for ORM
# controller:
@person = Person.new(:city_id => 2)
# view:
<%= select(:person, :city_id, [['Lisbon', 1],
['Madrid', 2], ...]) %>
form builder
pre-selected by Rails
# select on a form builder
<%= f.select(:city_id, ...) %>

30. select from
collection
<% cities_array = City.all.map { |city| [city.name,
city.id] } %>
<%= options_for_select(cities_array) %>
in short form,
options_from_collection
(City.all, :id, :name)

31. collection_select
collection_
<%= collection_select
(:person, :city_id, City.all, :id, :name) %>
or
f.
<%= f.collection_select
(:city_id, City.all, :id, :name) %>

32. 감사합니다.

33.
ROR Lab.