How to Create Web Forms With HTML

HTML 101: How to Create Web Pages With HTMLEpisode Seven

In order to allow your website visitors to communicate with you, you need to learn how to create simple forms in HTML. Luckily, we’re on the job and can show you what you need to know when coding web forms.

In this video you’ll learn how to create these HTML form elements:

  • Text boxes
  • Password fields
  • Check boxes
  • Radio buttons
  • Drop-down selection menus
  • Text area boxes; and
  • Submit and reset buttons

Flash video: 9:15 in duration

Supercharge your blog’s earnings with

Episode Links:

Share this page or bookmark it now!

17 Comments ↓

  • James said:

    Where does the inputted information go once the user clicks ‘Submit’ and how do you retrive that data?

  • Shane said:

    The not so helpful answer is, “it varies.” Some form data is part of a multi-page form process, and if you ever buy something online and look at the location bar on the 2nd page of the ordering process, you will see question marks with text afterwards. That is form data that was passed from the first page of the order form.

    Forms, I’ve personally set up ,actually go through a verification process using javascript functions before they were sent. If the form was filled out properly, the data would get set to a program in my website’s cgi directory that would email me the results (formatted the way I wanted to by me tinkering with a txt file prior), and redirect the user to a thankyou page.

    If your internet service provider is worth their weight in salt, they should walk you through the whole process while holding your hand, so to speak. If they don’t, ask them to do so.

    I hope that helped. Just keep at it and you will master the backend stuff before you know it.
    Regards
    Shane

  • MultiZ said:

    Thanks for showing us these multiple tutorials that help out webmasters.

  • Shane said:

    MultiZ, you are most welcome. It’s the thanks like yours that keeps us going and making more Tubetorials. Have you watched all the HTML Tubetorials? Which one was your fav? How did you find them?

    If you can’t tell, I’m just curious. :)
    Keep watchin’, we’ll keep creatin’
    Shane

  • Bob said:

    Hey Great tubetorial. Where is the and tag tutorial?

  • Shane said:

    Hello Bob. Glad you liked the Tubetorial. What do you mean by “the and tag”? Get back to me.

    Regards
    Shane

  • Benjamin Jones said:

    Awesome stuff man, this is a really great website, very informative and helpful. I do appreciate it! Keep up the great work

  • Shane said:

    Thanks Ben. We’re glad you like the site, and you’re most welcome. Have you done all the exercises and viewed all the episodes? Let us know.

    Regards
    Shane

  • TJ Cobra said:

    I love this site! Very useful, and gave me the kick I need in the butt to start learning some HTML. :)

  • Shane said:

    TJ, That’s what we’re here for, my friend; kickin’ butt and getting people motivated to do better online.

    Please do all of the steps in all of the html lessons, starting from lesson 1, and let me know how you did.

    Regards
    Shane

  • Shane said:

    p.s. Nice tunes TJ.

  • HTML 101: How to Create Web Pages With HTML | Tubetorial said:

    […] How to Create Web Forms in HTML […]

  • Steve said:

    I realize that form buttons is a wide area of functionality, but what about crafting webinars for specific functions?

    I am looking for a way to have the form save to a local drive of my choosing. I cannot find any resources on it and am unsure if it can be done.

  • Shane said:

    Hello Steve. That would be a good idea in the future. Hopefully we would be able to do something like that. IN the past if I ever had an advanced coding issue I couldn’t figure out I went to http://www.irt.org. This site is fantastic and can help out with advanced coding issues.

    REgards
    Shane

  • rob said:

    Thank you for these wonderful tutorials.

    I have been doing each of the HTML lessons and have hit a snag. For some reason I cannot code checkboxes and radio buttons to work. Here is the code I entered, below:

    Hobbies:
    sports
    politics
    art

    Age:
    Under 20
    Over 20 Under 40
    41 and up

    I checked it over several times, but all I get is the info inside a textbox. You help is greatly appreciated.

    P.S. Where are the CSS tutorials? I can’t wait :-)

  • Paul said:

    i want the infomation to besent to my email when ever the send button on my website is clicked.

  • Raj said:

    @Paul: I haven’t viewed the older videos made before I took over as editor, but having written forms that “send to email”, I can answer partly. It depends on what you are using to “drive” the form. That is, the script used in the “action” field of the

    tag. If you use an ASP, Perl/CGI, PHP, etc., script, then you can hard code the script to send to your email address. If you are using a form “service” hosted somewhere else, then they usually let you configure the form with your email.

    I’ll look into the series and see if may be it was left incomplete. If so, I’ll try to finish up. In the meantime, check out form services such as http://wufoo.com/

PSD to HTML, PSD to XHTML Service by PSD2HTML.com. You Design - We XHTML / CSS. Pro Workflow