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
- Create a new folder called Basic Forms
- Copy the Skeleton from the class website and paste it into a new Notepad file.
- Save the file as index.html. Make sure this file is saved in your Basic Forms folder.
- 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.
- The element in the first row is an input box. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input
- 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
- 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
- The element in the fourth row is a dropdown box. Find an example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2
- The element in the fifth row is a multiple selection box. Find an example here: http://www.developerfusion.co.uk/show/3828/6/
- The element in the sixth row is a text area. Find an example here: http://www.w3schools.com/html/showit.asp?filename=tryhtml_textarea
- 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
- You may download the Web Forms PowerPoint presentation from the class website. This will should you specifically how to add each element to your website.
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 |
