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
Now that our project has been set up and we’ve reviewed the provided code, let’s spend some time getting familiar with our HTML form.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v1.5 -b getting-familiar-with-our-html-form
Additional Learning
If you’re unfamiliar with HTML forms or need a refresher, check out this Treehouse course.
For detailed documentation on the HTML <form>, <input>, <select>, <button>, and <label> elements, see these pages on the MDN (Mozilla Developer Network) website.
For more information about sending form data and the differences between GET and POST requests, see this page on the MDN (Mozilla Developer Network) website.
For more information on the Bootstrap form styles, see the official Bootstrap documentation.
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
[MUSIC]
0:00
Now that our project has been set up and
we've reviewed the provided code.
0:04
Let's turn our attention
to creating our first form.
0:09
I'm going to assume that you already
have some familiarity with HTML forms,
0:12
including working with form, Input,
select, button, and label elements.
0:17
If you haven't worked with HTML forms
before, or you need a refresher,
0:23
see the teachers notes for
links to resources that can help.
0:27
The view for our add entry page is
located in the views entries folder.
0:31
Here it is, the add.cs HTML file.
0:37
Let's collapse the Solution Explorer
window to give us more room for code.
0:41
At the top of the view is standard
boilerplate code to set the page title and
0:45
heading.
0:49
Here's our form element.
0:51
The method attribute is set to post
which causes the form values to be sent
0:52
in the request body as
part of a post request
0:57
since our form will be
changing data on the server.
1:00
We definitely want to use a post request.
1:03
Instead of a get request
which is our other option.
1:06
Remember that get requests are used
when we are getting data to display.
1:10
And posts are used when we are posting
data back to the server to make changes.
1:14
If you need to brush up on
the different types of HTTP requests
1:19
see the teacher's notes.
1:23
Notice that our form element
doesn't include an action attribute
1:25
which is used to indicate the URL
to process our form's data.
1:29
Since we aren't providing an action,
the form will post back to the same page.
1:33
The current URL will see why
this is important in just a bit.
1:38
Just inside of the form
element are two div elements
1:43
with the CSS classes row and col-md-6.
1:47
These bootstrap classes are used to create
1:51
layouts Bootstrap divides up the usable
content area into 12 columns.
1:55
So, the col-md-6 class says to
use six of those 12 columns.
2:00
A little further down, we can see
the div element for the second column.
2:06
Inside of the first column are five div
elements with the css class form group.
2:14
These are our form fields,
2:19
each field is made up of a label and
an input element.
2:22
The form-group, control-label and
2:28
form-control bootstrap CSS classes
are used to style form fields.
2:31
This for attribute tells
the browser that this label is for
2:36
the input element whose ID is date,
which happens to be on the next line.
2:39
The input elements type attribute
tells the browser what type
2:45
of control to display in
this case a text box.
2:49
The name attribute is well
it's the name of this field.
2:53
This value will be the name for the input
elements value in the request body
2:57
together the name and the value form
what we call a name value pair.
3:02
In just a bit we'll see how
the request bodies name value pairs
3:07
are used on the server when
processing a form post.
3:11
The first field in our form is the date
field followed by the activity,
3:14
duration, intensity and exclude fields.
3:20
For now, all of these fields
are constructed in a similar manner.
3:27
Though, as we gradually improve our form,
they'll diverge from each other,
3:31
sometimes significantly.
3:35
Scrolling down to the second column,
we see our notes field.
3:37
It's similar to the first five fields.
3:42
But instead of an input element,
it's using a text area element.
3:44
By using a text area element, we can allow
our users to enter multiple lines of text
3:48
instead of the single line of text that
an input element would normally allow.
3:54
The rows and calls attributes
specify the size of the text area.
3:58
And finally, here's our save and
cancel buttons.
4:03
The save button is using a button
element with a type attribute of submit.
4:08
That tells the browser that
the buttons containing
4:14
form should be submitted
when this button is clicked.
4:16
The cancel button is
constructed using a hyperlink.
4:19
Just like the edit and
delete buttons on the entry's list page.
4:23
Let's press F5 to run our web app and
test submitting our form.
4:27
I'll enter a value of 1/1/2016 for
4:31
the date field and click the Save button.
4:36
Hm, that's interesting.
4:41
That page we loaded in
the date field lost its value.
4:43
If we open Chrome's developer tools
by right clicking on the page and
4:46
selecting the Inspect menu item.
4:52
We can use the Network tab to
review the request for this page.
4:54
Looks like we need to
submit the form again or
5:00
we can press F5 to record
the reload of the page.
5:02
Here we go.
5:06
The first entry in the list of
request is the request for the page.
5:06
Click on that to see the full request and
response detail.
5:10
Here's the request URL and
the request method.
5:16
Which is post as we would expect.
5:21
If we scroll down a bit,
we can see the form data.
5:23
And here's our value of 1/1/2016 for
the date field name.
5:27
Now let's check out what's
happening on the server.
5:32
By setting a breakpoint inside of
our controller's AddAction method.
5:37
And reloading the page again.
5:45
Okay, we hit our breakpoint.
5:51
So we know that the form
is posting to the server.
5:53
That's good, but since we just ended
up back in our add action method
5:56
we're just returning the view without
processing the form post data.
6:00
We need to update our controller
to handle form posts.
6:04
For the entries/add path.
6:08
How do we do that?
6:10
Find out next.
6:12
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