HTML 101 Tubetorials

How to Create Web Forms With HTML

HTML 101: How to Create Web Pages With HTML — Episode 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:

You may also like

36 comments

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

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

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

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

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

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

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

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

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

  16. @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/

  17. Wooooooooohoooooo!!!

    I spent days trying to get my contact form to work properly, especially having read PDF tutorial which was a complete waste of my eye and brain usage… and for nothing.

    Then I tried googling with “create web form” (should’ve done that at the beginning)…

    Huuuuuuuuge thanks to tubetorial (gotta love that name) for solving a simple problem which PDF tutorials couldn’t even put right.

    You guys made my day… and gave my braincells a break 😉

  19. Hello,
    This is a very effective tutorial. And it definitely leaves me desiring more. Could you write a tutorial on CSS, too? I would like to learn to be able to code a basic website using css and html. If you’re not doing that, could you suggest a website that you know of?
    Jofssel

  21. I want to use the submit form or something else in my website as a comment, what I mean is to give the possibility to every one to leave a comment and submit it on my mail address. Thank you in advance …

  22. I think the video tutorial is very good, but i think as well a text version including all the code would make the tutorial reach its full potential.

  25. it is my first day to use your website.It is A+++++++++++++ and so help full but i need more help.I creat aform and i would like to know how to make full name field bigger in size,How i can make more attractive ?How can i link the comments field to my email to read the comments?thanks alot for all you do ..you are the greatest bless your heart

  26. I bought html webtemplate from ebay and i dont know how to use them to creat a lovely page.Could you direct me with that?thanks alot for your help

  28. Episode 7 is awesome. This tutorial helped me a lot. I usually use http://www.jotform.com to get source code for any form elements I want to create. That’ll will save you some time. But understanding what you are doing is always better!

  30. hi

    i have created a similar contact form…. where once the visiter clicks on the submit button, i should get the details on my email.

    could u please help me out with the html tags ?

    please

  32. Thank you! That was an awesome script. I took it and modified it for a client. His site is carolinacustomkitchen.com and your modified script is on his Quote page.

  34. hello! i want to creat my owner site web , i need help , and i’m seeking a personne how i can exchange experience by msn or skype and seekingschools in usa or uk for make formation
    Thank you !

  35. Dear Sir

    I am a
    newly customer of small business webhosting.

    I have
    already created my web form PHP on my web site as below, But problem is
    that I
    am not receiving Feedback form DATA why? Please solve my problem as soon
    as
    possible by mail.

    My Feedback Form HTML is

    Feedback Form

    Feedback
    Form

    Please
    fill up below form

    E-mail:

    Message:

    <?php

    }

    My PHP is (file name: feedback.php)

    My thankyou.html
    is

    Thank you

    We are
    Obligation with you

    Because you take us your valuable feedback to us

    Please
    continue with us

    Clik here for go to
    home

    My Error Page HTML is

    Error

    Error

    Oops, it appears you forgot to enter either
    your

    email address or your message. Please press the
    BACK

    button in your browser and try again.

Leave a Reply

Your email address will not be published. Required fields are marked *