Home Logo
Show Full Menu
Hide Full Menu

Creating our first form

Created: 13/10/10 Views: 2737 myFave Image

In this tutorial we will create our first form for our web page.
From the previous form tutorials you would have learnt what is involved to create a HTML form, so now we are going to take what we have learnt and put it into practice to create a full form.
The form we are going to create will also submit and process data which is something you can learn from the php tutorials.

The input areas we are going to use are;

Here is our coding for the example form
  1. <form action="" method="post" name="exampleForm">
  2. Firstname: <input name="first" type="text" size="30" maxlength="40">
  3. <br>
  4. Lastname: <input name="last" type="text" size="30" maxlength="50">
  5. <br>
  6. Email: <input name="email" type="text" size="30" maxlength="50">
  7. <br>
  8. <br>
  9. Gender: <select name="gender">
  10. <option value="female">Female</option>
  11. <option value="male">Male</option>
  12. </select>
  13. <br>
  14. <br>
  15. Which of these do you own?
  16. <br>
  17. <input name="owned[]" type="checkbox" value="Car">Car
  18. <br>
  19. <input name="owned[]" type="checkbox" value="Mobile Phone">Mobile Phone
  20. <br>
  21. <input name="owned[]" type="checkbox" value="Watch">Watch
  22. <br>
  23. <input name="owned[]" type="checkbox" value="TV">TV
  24. <br>
  25. <input name="owned[]" type="checkbox" value="Game Console">Game Console
  26. <br>
  27. <br>
  28. Which age group are you in?
  29. <br>
  30. <input name="age" type="radio" value="Below 50" checked>Below 50
  31. <br>
  32. <input name="age" type="radio" value="Above 50">Above 50
  33. <br>
  34. <br>
  35. A little about yourself;
  36. <br>
  37. <textarea name="about" cols="70" rows="6"></textarea>
  38. <br>
  39. <br>
  40. Your account password: <input type="password" name="thePassword" value=""/>
  41. <br>
  42. <br>
  43. <input name="submitForm" type="submit" value="Send">
  44. <input name="resetForm" type="reset" value="Reset">
  45. </form>

Here is how our the example looks
Bare in mind that this form has not been styled so it does look dull, however this tutorial is to show you examples of what the input areas can be used for. Fill it out and click 'send' and see what happens!


    Which of these do you own?
    Mobile Phone
    Game Console

    Which age group are you in?
    Below 50
    Above 50

    A little about yourself;

    Your account password:

back to: The Basics of HTML

There are no comments