Creating Forms - 10

Play Creating Forms - 10
Sign in to queue


This lesson demonstrates how to add a rudimentary level of interactivity to your web pages by allowing users to input information via forms. We'll look at over a dozen examples of common form elements allowing us to guide the user to input high-quality data.

Download the source code for Creating Forms





The Discussion

  • User profile image
    joe is not working.

  • User profile image
  • User profile image

    So far so good .... but now I'm wondering if I know enough to be dangerous ....

    Going to do some research on how the Razor view engine conforms to HTML5 standards ....

    Opening Pandora's box here or is there a good resource for me to understand this ??

  • User profile image

    I am a bit confused, so are you saying it is not practical to use this now? I checked some job ads for web development and they seem to ask for (X html). SO what should you be learning to get a startup or entry job? I plan to go through ASP next or should I go over the old ways xhtml or html also?

  • User profile image

    @BrianHartung: Nice find!  Thanks for the assist, my man.

    @Steve: So I'm certain Razor spits out valid HTML5.  If ever in doubt, use an HTML5 validator against the output of an MVC v3+ page to give yourself peace of mind.  Smiley

    @Bill: I'm guessing that in the near future, most companies will be looking for HTML5 skills almost exclusively (unless they must support an older application).  Even then, I would say this ... the differences between HTML5 forms and XHTML forms -- you can learn the differences in less than a day ... most IDEs like Visual Web Developer 2010 Express Edition or the upcoming Visual Studio Express 2012 for Web have built in validators for just about every version of HTML.  Try something ... if you see there are squiggly lines under something you've written in the code window, you can hover your mouse cursor over it and get some feedback on what you'll need to change to make it conform.  Hope that helps!

  • User profile image

    Hi Bob,

    you're telling us that one of the benefits of using action="POST" instead of action="GET" is that the form values are encrypted inconjunction with https. I guess this is not true as form values should also be encrypted with a GET request.

    https does not only encrypt the HTTP body, but the complete HTTP data stream as it sits inbetween TCP and HTTP. So this includes not only the HTTP body but also the HTTP header (very first line of the HTTP protocol) which contains the URL (with all the form parameters in case of a GET request) as well as all HTTP header fields.

    At least this is my understanding of the matter.

    Besides that: Thanks a lot for this great and delightful series. You're videos are fun to watch, very informative and well worth the time watching.

    Cheers, Chris

  • User profile image

    This will help me a lot.

  • User profile image

    @candritzky:  Hi Chris, after further investigation, I realize that you are absolutely correct.  For others who want to learn more, this Q&A will point you to several valuable links:

    ... Thank you!  Still so much to learn.  Smiley


  • User profile image

    I thought I knew the difference between get and post before, but now i'm totally confused. Bob, as far as what you were saying, I definitely heard something similar to that, but I know Candritzky is also correct. Now, I I have to go and research this again, because Candritzky just confused me with his explanation.  Maybe a follow up comment with the bottom line differences would do us some justice. Perplexed

  • User profile image

    @s3curityConsult: I hope this helps... Think of HTTP REQUESTS and RESPONSES as envelopes.  The REQUEST has two envelope types, GET and POST.  My **assumption** for like, the past 18 years (!!!) is that a HTTP GET shows the entire address, including the querystring parameters, the same way you see them in your web browser's location bar.

    Therefore, my assumption was that it was IMPOSSIBLE to encode these important querystring parameters (id, user, in this example) in SSL otherwise ... well, no one except the original web server would be able to read them!  The routers would be like, "this is encrypted, what the heck do you want me to do with this?!"

    However, this understanding was incorrect.  There's not a lot of great documentation about this, so I'm not going to beat myself up about this too much.  Apparently, the querystring parameters are sent in an optional message body of the HTTP GET REQUEST, and are encoded in SSL (when the web server is using SSL & HTTPS, obviously ... otherwise, all bets are off ... anyone between your web client and the web server would be able to read the HTTP GET REQUEST body.)


    ... explains that this should not be taken to mean that it is 100% secure and locked down, that the querystring data could potentially leak out in a few scenarios.

    Bottom line:

    (1) Everything on the web is insecure.

    (2) Try your best to make your application less insecure.

    (3) Use SSL when dealing with user data unless you have a good reason not to.

    (4) You probably should declare a privacy policy somewhere on your website that explains what you do and why.

    (5) Lawyer up.

    Devil Collect as little data as possible.

    ... that's my bearish, crotchety old man position on this.  :/

    Hope the technical explanation helped a little.

  • User profile image

    On a somewhat related note to my previous post ... I didn't realize that ( 6 ) would create Devil ... kind of creepy.

  • User profile image

    Hi Bob. I found these videos are very useful, but in #10, When you were talking about the default values for the text field and then mentioned about setting descriptions in the text field for instruction purpose, which need to be achieved by "a combination of javascript and JQuery". Actually with HTML5, you can use the a placeholder form attribute to get this done.

  • User profile image

    Hi Bob. First of all...greetings from Croatia! So... basically I would just like to point out (as LynnYang did on comment above) that you can put light gray description in text field using only HTML5 code.

    Using lesson 10 example, I did this:

    <textarea name="comments" cols="50" rows="5" maxlength="1000" placeholder="Write something..."></textarea>

    I would also like to point out that you are doing awesome job, thanks a lot. 


    "Srdačan pozdrav" something like best regards on Croatian...

  • User profile image


  • User profile image

    FYI: Lesson 10 @16:45 re: "multiple" attribute is not just for "showing" multiple choices all at once versus a drop-list, it also allows for "multiple selections (i.e. ctrl-click under IE). Not necessarily the correct purpose in this context.

    Q: Is there an approach to limit the selection just a single choice? Of a similar visual approach, but as single select?

  • User profile image

    @HerbM1YVR: that is a bit more complex of a scenario then we're covering on the video.  I suggest asking that question over at  I'm honestly thinking it would be radio buttons with some CSS.

  • User profile image

    <label for=comments"> has actually failed the validation in, and the error message is "The for attribute of the label element must refer to a form control" Not sure what that means.
    And you are also missing a closing </label> tag in the "after" code. Could you please validate your code, so that the source code we get from you is more accurate. Thank you

  • User profile image

    @David: Ok, good catch.  There are two corrections to be made here:

    Near the top, this:

    <p>  <label>Customer name: <input type="text" id="customerName" name="customerName" maxlength="10" ></p>

    ... should be this ...

    <p>  <label>Customer name: <input type="text" id="customerName" name="customerName" maxlength="10" ></label></p>

    ... note the closing label tag at the end.

    Next, near the bottom ...

    <p><label for="comments">Delivery Instructions:</label><textarea name="comments" cols="50" rows="5" maxlength="1000"></textarea></p>

    ... should be this ...

    <p><label for="comments">Delivery Instructions:</label><textarea id="comments" cols="50" rows="5" maxlength="1000"></textarea></p>


    Can you spot the difference?  

    There's nothing wrong with the label, the problem is with the textarea element.  It needs an id attribute, not a name attribute to match the label to the form control.

    See this:

    Specifically ...

    The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable element in the sameDocument as the label element.

  • User profile image

    Hey Bob.
    I love your videos, very helpful.

    Whenever I add the "multiple" attribute to the select tag, the "selected" attribute I add into whichever Option tag does not display in the web browsers. It does however, display fine when the "multiple" attribute is removed. Any ideas where I'm going wrong?


  • User profile image

    @Max:Sorry, I have no idea.  Maybe the browsers you're trying don't support it yet?


  • User profile image
    Kedar Lasane

    How to write HTML5 code in that old browser should also start supporting new HTML5 element? Is there any option to write universal HTML5 code that will works good on older as well as newer web browser?
    I am finding such code for my tech blog , comment me if you know solution

  • User profile image

    @Kedar Lasane: I don't have a great answer for you.  I would start by looking at Modernizr ( which includes a library called HTML5 Shiv (or is it, HTML Shim?  I forget ... two different libraries that try to tackle the same issues.)

    Frankly?  I punt.  If it's work for me, I'll go ahead and use experimental stuff.  If it's work for a client however, I would definitely not risk sales / sign ups / form submissions due to an older browser.  I would use flat old HTML 1.x from 1995 just to be safe.  Smiley

  • User profile image

    Thanks for getting back to me Bob.
    I was using Chromium and Firefox (I'm currently using Linux Ubuntu 12.04).
    I opened the same code on my girlfriends laptop using Google chrome and Firefox and it worked just fine.
    Possibly a browser issue.

    Cheers Bob.

  • User profile image

    Hi Bob,
    Could I ask you, why next lessons are no captions in video. They help me to understand, because I'm not a native speaker.

    Thank you for your answer.


  • User profile image

    @cmaja: We are getting captions added to videos as quickly as we can (this series didn't originally have any), and we haven't done all the lessons yet. Great to hear you find them helpful though and we'll keep going as quickly as we can!

  • User profile image

    @Duncanma:That's great, thank you very much.

  • User profile image

    Opening thread...

  • User profile image
    Funny is how the HTML5 W3 example in your video is using

    but if you look now on their site it's using
    . That's probably because

    isn't the correct semantic. That's what I was thinking about when the course was about semantics. on a cloud business app, a lot of the page is about input where stuff like

    isn't IMHO actually semantically correct.

Add Your 2 Cents