Basic Forms

Note: the following material is from an older, outdated version of the web design curriculum pack. Please read about the revised and updated version of our Introduction to Web Design Curriculum.

Objectives

At the end of this lesson, you will be able to:

  • Create basic web forms to allow users to give information to a web server
  • Differentiate between the HTTP GET and HTTP POST commands
  • List the standard form elements which allow users to enter data
  • Explain where and why web forms are used

Instructions

  1. Create a new folder called Basic Forms
  2. Copy the Skeleton from the class website and paste it into a new Notepad file.
  3. Save the file as index.html. Make sure this file is saved in your Basic Forms folder.
  4. Add a <form> </form> inside the <body> section of your website. The table should go entirely inside this <form> </form> element. Use the following tags to create the form on your website:
<form action="index.html" method="get">
</form>

You will create a table with 6 rows and two columns. The labels will go in the left column, and the form elements will go in the right column. Note: You should not use borders on your table.

XHTML Form

  1. The element in the first row is an input box. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input
  2. The element in the second row is a group of radio buttons. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio
  3. The element in the third row is a group of checkboxes. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_checkbox
  4. The element in the fourth row is a dropdown box. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2
  5. The element in the fifth row is a multiple selection box. Find an example here: http://www.developerfusion.co.uk/show/3828/6/
  6. The element in the sixth row is a text area. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_textarea
  7. Add a submit button to the form. This can go completely outside of the table (just place it right after the </table> tag). Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

Rubric

Component Possible Points Score
The form contains a syntactically correct text input 2
The form contains a syntactically correct group of radio buttons 2
The form contains a syntactically correct group of checkboxes 2
The form contains a syntactically correct dropdown box 2
The form contains a syntactically correct multiple selection box 2
The form contains a syntactically correct text area 2
The form contains a syntactically correct submit button 2
The form’s action and method are configured properly 2
The project was submitted on time (20% off for each day late)
Total Score 16

For full projects and source code, download the updated version of our Introduction to Web Design Curriculum.