Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We have the /pages/new path routed to the PagesController's new method. In that method, we've set up a new Page object in the @page instance variable. Now, we need to set up an ERB view template that creates a form based on that Page object.
The form_for method takes a model object, and generates an HTML form for it.
# This will embed the form HTML in the output.
# Here, a form will be generated for the object
# in @page.
<%= form_for(@page) do |f| %>
<div class="field">
# This will output a label for the "title" field.
<%= f.label :title %>
# This will output a text field used to set the
# title attribute of the Page object.
<%= f.text_field :title %>
</div>
<div class="field">
# This will output a label for the "body" field.
<%= f.label :body %>
# This will output a larger text field used to set the
# body attribute of the Page object.
<%= f.text_area :body %>
</div>
<div>
# Outputs a button used to submit the form.
<%= f.submit %>
</div>
<% end %>
You can read more about form_for in the official Rails documentation.
Want to learn more about HTML forms? Check out our course on the topic.
We have the slash pages slash new path
routed to the pages controller's new
0:00
method in that method we've set up a new
page object in the page instance variable.
0:04
Now we need to set up an ERB view template
that creates a form based on that page
0:10
object some knowledge of HTML forms
will be helpful at this point.
0:15
If you haven't worked with forms before,
be sure to check out the teachers notes.
0:19
Since our action is on the pages
controller our view template needs to be
0:23
in the app views pages directory.
0:27
And since the action is named new
we should name our template file
0:31
new.html.erb.
0:35
Again, make sure it's all lowercase and
watch out for typos.
0:38
We'll start with an output embedding
tag with a call to the form for
0:42
method form for takes an argument which is
the object will be creating a form for.
0:46
The method also takes a block
everything within the block
0:51
becomes part of the form HTML.
0:54
The finished HTML gets returned
from the form for method.
0:58
That's why we're using
an output embedding tag.
1:02
We want to embed the form
HTML in the page.
1:04
Form for passes an object
representing the form to the block.
1:07
Which we store in the F parameter.
1:11
As usual we need a regular embedding
tag down here on a separate line
1:13
with the end keyword to end the block.
1:17
Within the form we create an HTML div
element with the CSS class of field
1:20
to hold each form field.
1:25
So div class equals field.
1:27
And then close the div tag.
1:30
We won't review using CSS in
rails until later course.
1:35
But this just applies an existing style
that formats things a bit more neatly.
1:39
First, we're going to add a field for
the page's title attribute.
1:43
Within the div,
we'll add an output embedding tag
1:46
with a call to the text field
method on the form object.
1:50
So, f.text_field.
1:53
We'll pass it the ruby symbol title so
1:55
that it's treated as a field for
the title.
1:59
Let's save this and
2:01
reload the slash pages slash new path in
our browser to see what we've done so far.
2:02
There's our text field.
2:07
If we open our browsers developer
tools we can see the resulting HTML.
2:09
It's an input element with a type of
text nested within a form element.
2:14
Our users won't be able to tell what this
box in the middle of the page is supposed
2:19
to do though.
2:23
Let's add a label to the field so
they know to hinder a title.
2:24
Just before the embed tag
with the text field call.
2:27
We'll add another embed tag with
a call to the label method.
2:30
So we'll take the form object and
call the label method on it.
2:36
Label needs to receive the same
symbol as the text field so
2:40
that it's treated as a label for
that field.
2:44
So the text field has a symbol of title
and will use the same for the label.
2:46
If we reload our browser.
2:53
We'll see the title label
before the text field.
2:55
This is an actual HTML label
element linked to the title field.
2:58
So if we click on the label, the cursor
will focus on the matching field.
3:02
Let's go back and
add the remaining form fields, and
3:08
then a button to submit the form.
3:10
For the body attribute,
we'll copy the code for
3:12
the title field, But
change the symbols to body.
3:14
We'll also change the text field method
call to text area to give the user
3:24
a little more room to type in.
3:28
For the slug attribute we'll just
copy the title code again and
3:30
change the symbols to slug.
3:34
If we save our work and
3:40
reload the browser we'll see three
fields each with a matching label.
3:41
Now we need a button that
lets users submit the form.
3:48
We'll create another div
to hold the button, but
3:51
we won't worry about applying
a CSS class to this one.
3:54
To output the button HTML,
3:58
we'll add an output tag with
a call to the forms submit method.
4:00
There's no parameters or
anything to add for the submit method.
4:07
If we reload the page will see all of
our form fields and the submit button.
4:11
Right now we have to manually type in the
slash page's new path to get to this form.
4:16
Let's fix that really quick.
4:21
First, let's set up a new page path helper
method to make linking to the form easier
4:23
In routes that RB at the end of
the slash pages slash new row add as.
4:27
New Page.
4:34
Be sure to save that then in
app views pages indexhtml.
4:37
or be in the index of all pages.
4:42
We use an output ERB tag,
4:46
with a call to link to,
to generate a link to create a new post.
4:48
We'll set the link text to new page.
4:52
And call new page path
to get the link path.
4:57
Save that.
5:02
And now if we visit
the index of all pages, And
5:03
click the new page link will
be taken to the new page form.
5:07
Let's try fill in the form out now.
5:12
We'll give it create a new
page with the title of My Bio.
5:14
I'm a Treehouse teacher.
5:19
And we'll give it a slug just by Bio,
but when we submit the form,
5:25
we'll see an error.
5:29
No route matches POST/pages.
5:31
This brings us to the second major
part of setting up our form,
5:34
adding a controller action to
handle the form submission.
5:37
We'll start on that next.
5:40
You need to sign up for Treehouse in order to download course files.
Sign up