Understanding Form Helpers

Bruno Almeida

● Form tag● Form to an object● Select● Customize fields● Nested forms

Let’s begin

Form tag

http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html

form_tag

<%= form_tag do %>

Form contents

<% end %>

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

<input name="utf8" type="hidden" value="&#x2713;" />

<input type="hidden" name="authenticity_token" value="

jzi1o/1Wl8yTZ2e1Z3QE99BFYI5uouuaFa/HdyyOJP9knHGBMpiGjuNlDP

VhctUX2/qQsFUxCaChV7JSgm0Mnw==" />

Form contents

</form>

label_tag, text_field_tag, submit_tag

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

<input name="utf8" type="hidden" value="&#x2713;" />

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

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

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

</form>

Others input helpers

<%= password_field_tag(:password) %>

<%= hidden_field_tag(:parent_id, "5") %>

<%= number_field(:product, :price, in:

1.0..20.0, step: 0.5) %>

<input type="password" name="password" id="password" />

<input type="hidden" name="parent_id" id="parent_id"

value="5" />

<input step="0.5" min="1.0" max="20.0" type="number"

name="product[price]" id="product_price" />

search_field, telephone_field, date_field, datetime_field, datetime_local_field, month_field, week_field, url_field, email_field, color_field, time_field, range_field

Form to an object

http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html

Setting up a form to an object# routes

resources :developers

# controller

def new

@developer = Developer.new

end

# view

<%= form_for @developer do |f| %>

<%= f.text_field :name %><br>

<%= f.text_area :resume %><br>

<%= f.submit %>

<% end %>

<form class="new_developer" id="new_developer" action="/developers"

accept-charset="UTF-8" method="post">

<!-- autenticity_token and utf8 -->

<input type="text" name="developer[name]" id="developer_name" /><br>

<textarea name="developer[resume]" id="developer_resume">

</textarea><br>

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

</form>

Label

<%= f.label :name %><br>

<%= f.text_field :name %>

<label for="developer_name">Name</label><br>

<input type="text" name="developer[name]" id="developer_name" />

Error messages

# model

class Developer < ActiveRecord::Base

validates_presence_of :name

end

# view

<% if @developer.errors.any? %>

<ul>

<% @developer.errors.full_messages.each do |msg| %>

<li><%= msg %></li>

<% end %>

</ul>

<% end %>

<ul>

<li>Name can't be blank</li>

</ul>

Select

http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html

Select with array

<%= f.select(:gender, { M: 1, F: 2 },

{ include_blank: 'Choice' }) %>

<select name="developer[gender]" id="developer_gender">

<option value="">Choice</option>

<option selected="selected" value="1">M</option>

<option value="2">F</option>

</select>

<select name="developer[gender]" id="developer_gender">

<option selected="selected" value="1">M</option>

<option value="2">F</option>

</select>

<%= f.select(:gender, M: 1, F: 2) %>

Select with collection

<%= f.collection_select(:indication_id,

Developer.all, :id, :name,

{ prompt: 'None' }) %>

<select name="developer[indication_id]" id="

developer_indication_id">

<option value="">None</option>

<option value="1">Linus</option>

<option value="2">Bruno</option>

</select>

<select name="developer[indication_id]" id="

developer_indication_id">

<option value="1">Linus</option>

<option value="2">Bruno</option>

</select>

<%= f.collection_select(:indication_id,

Developer.all, :id, :name) %>

Customize fields

Select

<%= f.select(

:gender,

{ M: 1, F: 2 },

{ include_blank: 'Choice' },

{

class: 'css-class',

data: { id: 'gender', optional: true }

}

) %>

<select class="css-class" data-id="gender" data-

optional="true" name="developer[gender]" id="

developer_gender">

Nested forms

http://guides.rubyonrails.org/form_helpers.html#nested-forms

Configure model and controller

# controller

class DevelopersController < ApplicationController

def new

@developer = Developer.new

@developer.addresses.build

end

def developer_params

params.require(:developer).permit(:name, :resume, :

gender,

addresses_attributes: [:id, :name, :street])

end

end

# models

class Address < ActiveRecord::Base

belongs_to :developer

end

class Developer < ActiveRecord::Base

has_many :addresses

accepts_nested_attributes_for :addresses

end

Add nested form to view…

<%= form_for @developer do |f| %>

...

<%= f.fields_for :addresses do |addresses_form| %>

<%= addresses_form.text_field :name %>

<%= addresses_form.text_field :street %>

<% end %>

...

<% end %>

… renders

<input type="text" value="" name="developer[addresses_attributes][0][name]" id="

developer_addresses_attributes_0_name" />

<input type="text" value="" name="developer[addresses_attributes][0][street]" id="

developer_addresses_attributes_0_street" />

<input type="hidden" value="1" name="developer[addresses_attributes][0][id]" id="

developer_addresses_attributes_0_id" />

That's all folks

Bruno Almeidahttps://github.com/wwwbrunohttps://facebook.com/wwwbrunohttps://twitter.com/@wwwbrunohttp://www.slideshare.net/wwwbruno

Any questions?