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