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

ASP.NET MVC Forms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Getting Familiar with Our HTML Form

6:13 with James Churchill

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up