This course will be retired on June 1, 2025.
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've set up a route where browsers can request an HTML form to create a new wiki page. Now we just need to go into our `new.erb` template and set up that form. We'll code a simplified version of the form first, then go back and improve on it.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've set up a route where browsers can
request an HTML form to create a new
0:00
wiki page.
0:04
Now we just need to go into our
new.erb template and set up that form.
0:05
Let's get rid of this placeholder text.
0:11
Now we code a simplified version of
the form first and then go back and
0:13
improve on it.
0:16
We'll start with the form element which
wraps all other elements within the form.
0:18
Now we need a form input for
the Wiki pages title.
0:23
This will be a text field.
0:26
So it will create an input element and
will set its type to text.
0:29
And we'll set the name attribute to title.
0:34
The input name becomes the name
of a parameter to hold the input
0:39
contents which will be
passed back to our app.
0:42
The user will need a button to
click to submit the form, too.
0:45
So add another input element and
0:49
set its type to submit, and
that will create a button for us.
0:51
Since we're just editing
the erb template file and
0:57
not a Ruby code,
we don't have to restart the app.
0:59
We can just reload our browser preview and
we'll see our simplified form.
1:02
We can fill in the text field and click
Submit and the form will be submitted.
1:06
Nothing actually happens with the data
right now though, we'll fix that shortly.
1:10
This is a complete HTML form, but it's so
simple that it's not very useful.
1:15
There's only one form field,
and it's not labeled,
1:19
so users can't tell
what they should enter.
1:22
It will also be hard to apply CSS styling
to make the form look pretty later.
1:24
So let's go back and
add some code to improve on this.
1:28
We'll start by adding a heading at the top
of the page that indicates what this
1:32
form does.
1:35
It's a form to a new page.
1:37
We're going to want to apply
CSS styles to the form later.
1:41
So we'll put it inside
the document division or
1:44
div element to make styling easier later.
1:46
We'll set up our form within
the div as before we need to
1:50
form elements wrap all the other
components of the form.
1:53
A field set element groups
several form components together.
1:55
In this case we're going to use it to
group a label in a text field together.
2:01
A label element tells users
what a form input does,
2:05
this is going to be a label for the title
feel so we're going to set the for
2:08
attribute to title.
2:12
If the for attribute matches
the ID attribute of a form input,
2:17
that input will be activated when
the user clicks on that label.
2:21
And the label element content will be
the text that's displayed to the user.
2:24
So lets set that to title.
2:28
Now let's add an import for
the Wiki page title just like before.
2:30
Will set the type attribute to text and
again the name answer B
2:34
will be the name of the parameter
used when the form is submitted.
2:39
So we'll set that to title.
2:42
The ID attribute needs to match the for
attribute in the preceding label.
2:48
So we'll set that also to title.
2:53
The values of the name and ID attributes
don't have to be identical, but
2:56
we've opted to make them identical here.
3:01
The next thing we need on the form
is the larger text field for
3:04
the Wiki page content.
3:06
We'll place it within another field
set element to tie the field and
3:08
its label together.
3:12
Now let's add a label for the field,
the field's ID is going to be content so
3:15
that's what will set the for attribute to.
3:20
And as before the text of the element
itself is what will be displayed to
3:23
the user and so will set that to content.
3:28
Now we'll add the content field itself,
3:30
there is going to be more text in the page
content than there is in the title so
3:33
we use the text area elements
instead of a text input.
3:36
A text area has rows and columns
attributes that specify how tall and
3:40
how wide it should be.
3:45
So will set it to ten rows and 50 columns,
3:46
just like the input element,
3:51
text area has a name attribute.
3:55
That will be used as the name of
the parameter when the form is submitted.
4:00
So we'll set that content.
4:03
And we'll set the ID attribute to content
as well so that it matches the labels for
4:05
attribute.
4:10
As before will need a button
to submit the form so
4:12
we'll add another input element
with the type of submit.
4:14
Lastly, we'd like a link back to the
welcome page if users decide they'd rather
4:21
not spent the form,
we'll add an anchor element
4:24
With its href attribute,
set to the root path.
4:29
We'll give it text of back to index.
4:35
Be sure to save that when you're done.
4:39
And now let's refresh our preview window,
and check out the updated form.
4:40
We can enter a title
in the title field and
4:45
lots of page content in the content field.
4:48
Notice that we can also
click on the labels and
4:51
have the cursor move
to the matching field.
4:54
And when we click on the Submit button
the browser sends a request submitting
5:00
the form data.
5:04
But we're not set up to handle
that submission right now
5:06
which means our form data
is simply disappearing.
5:08
Those form parameters are also being added
to the browser URL which looks awkward.
5:11
We'll handle that next.
5:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up