Action View Form Helpers - 1, Season 2

Action View Form Helpers - 1

Ror lab. season 2- the 13th round -

December 29th, 2012

Hyoseong Choi

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, ...

form_tag

<%= form_tag do %> Form contents<% end %>

<form accept-charset="UTF-8" action="/home/index" method="post"> <div style="margin:0;padding:0"> <input name="utf8" type="hidden" value="✓" /> <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" /> </div> Form contents</form>

Basic Form

app/views/home/index.html.erb

current action

to prevent CSRF

form_tag

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">'

Multiple Hashes

Helpers

• text_field_tag

• text_area_tag

• check_box_tag

• radio_button_tag

• password_field_tag

• hidden_field_tag

• search_field_tag

• telephone_field_tag

• url_field_tag

• email_field_tag

Generating Form Elements

HTML5 controls

Modernizryepnope

polyfiller

http://en.wikipedia.org/wiki/Polyfillhttps://github.com/russfrisch/modernizr-rails

http://modernizr.com/docs/

http://www.modernizr.com/







http://yepnopejs.com/

http://yepnopejs.com/

http://en.wikipedia.org/wiki/Polyfill

http://en.wikipedia.org/wiki/Polyfill

https://github.com/russfrisch/modernizr-rails

https://github.com/russfrisch/modernizr-rails



http://html5readiness.com



Opera v12.11

Safari v6.0.2

Chrome v23.0.1271.97

Firefox v17.0.1

HTML 5 “Form 2.0”

Rails 3 HTML5 Input Types

search_field search

telephone_field tel

url_field url

email_field email

number_field number

range_field range

Form Element Helpers

Agile Web Development with Rails 4th edition


http://pragprog.com/book/rails4/agile-web-development-with-rails

http://pragprog.com/book/rails4/agile-web-development-with-rails

Opera v12.11

Safari v6.0.2

Chrome v23.0.1271.97

Firefox v17.0.1


Search Form

<%= form_tag("/search", :method => "get") do %> <%= label_tag(:q, "Search for:") %> <%= text_field_tag(:q) %> <%= submit_tag("Search") %><% end %>

for bookmark

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

Form Elements Helpers

<%= 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>

Checkboxes


<%= 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>

Radio Buttons




Others

Model Object Helpers

• No _tag

• check_box_tag

• radio_button_tag

• text_area_tag

• password_field_tag

• hidden_field_tag

for Model Object

<%= text_field(:person, :name) %>

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

@person -> name : “Henry”

for an instance variable

for a method name(attr.)

Binding a Form to an Object

def new @article = Article.newend

<%= 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_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>

params[:article]

params[:article][:title]

params[:article][:body]

in the controller,

fields_for

•name•age•sex

Person

•address•telephone

fields_for

•name•age•sex

Person

•address•telephone

Contact

has_oneor

has_many

belong_to

using nested attributes

fields_for

class Person < ActiveRecord::Base has_one :contact, :dependent => :destroyend

class Contact < ActiveRecord::Base belongs_to :personend

using accepts_nested_attributes_for

http://www.youtube.com/watch?v=VtcXIAWqJIs

http://www.youtube.com/watch?v=VtcXIAWqJIs

Using Resources

## Creating a new article# long-style:form_for(@article, :url => articles_path)# short-style (record identification gets used):form_for(@article)

resources :articles in config/routes.rb

## Editing an existing article# long-style:form_for(@article, :url => article_path(@article), :html => { :method => "put" })# short-style:form_for(@article)

Using Namespaces

namespace :admin do resources :posts, :commentsend

form_for [:admin, @post]

in routes.rb

in _form.html.erb

app/controllers/admin/posts_controller.rbapp/controllers/admin/comments_controller.rbapp/views/admin/posts/new.html.erbapp/views/admin/posts/edit.html.erb

admin_post_path(@post) on update

HTTP Verbs

• GET

• POST

• PUT

• DELETE?

for all browsers

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="✓" /> <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" /> </div> ...

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>...') %>

options_for_select

<%= options_for_select([['Lisbon', 1], ['Madrid', 2], ...]) %> output: <option value="1">Lisbon</option><option value="2">Madrid</option>...

1st argument => a nested array

<%= select_tag(:city_id, options_for_select(...)) %>

options_for_select

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

2nd argument => ‘selected’

select for ORM# controller:@person = Person.new(:city_id => 2)

# view:<%= select(:person, :city_id, [['Lisbon', 1], ['Madrid', 2], ...]) %>

pre-selected by Rails

# select on a form builder<%= f.select(:city_id, ...) %>

form

bui

lder

select from collection

<% cities_array = City.all.map { |city| [city.name, city.id] } %><%= options_for_select(cities_array) %>

options_from_collection

(City.all, :id, :name)

in short form,

collection_select

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

collection_

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

f.

or

ROR Lab.

감사합니다.��

Action View Form Helpers - 1, Season 2

Documents

Transcript of Action View Form Helpers - 1, Season 2