Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Creating Forms - 10

Download

Right click “Save as…”

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

Tag:

Follow the Discussion

  • joejoe

    particletree.com is not working.

  • @Joe: WebArchive to the rescue:

    http://web.archive.org/web/20100811001848/particletree.com/features/rediscovering-the-button-element/ 

  • SteveSteve

    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 ??

  • BillBill

    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?

  • @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!

  • 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

  • This will help me a lot.

  • @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:

    http://stackoverflow.com/questions/2629222/are-querystring-parameters-secure-in-https-http-ssl

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

     

  • 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

  • @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.

    http://www.whatever.com/?id=123&user=bob

    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.)

    EVEN THOUGH THE QUERYSTRING PARAMETERS ARE ENCODED IN SSL, the article:

    http://blog.httpwatch.com/2009/02/20/how-secure-are-query-strings-over-https/

    ... 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.

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

  • LynnYangLynnYang

    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.

  • 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...

  • Unlocking

  • 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?

  • Clint RutkasClint I'm a "developer"

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

  • DavidDavid

    <label for=comments"> has actually failed the validation in validator.nu, 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

  • @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:

    http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element

    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.

  • MaxMax

    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?

    Cheers.

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

     

  • Kedar LasaneKedar 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 http://www.thetechdigit.com , comment me if you know solution

  • @Kedar Lasane: I don't have a great answer for you.  I would start by looking at Modernizr (http://modernizr.com/) 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

  • MaxMax

    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.

  • 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.

    Regards,
    Marek

  • Duncan MackenzieDuncanma "yeah that's awful close, but that's not why I'm so hard done by"

    @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!

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

  • Greg Duncangduncan411 It's amazing what a professional photographer can do...

    Opening thread...

Remove this comment

Remove this thread

close

Comment on the Post

Already have a Channel 9 account? Please sign in