Lesson 07: Forms

In this lesson you will learn about each of the units within this course.
This lesson should take you approximately 90 minutes.

Introduction | Form Controls | Accessibility | Checking Form Results | Activity Summary

Introduction

Forms allow you to gather information from your web site visitors.  If you have ever signed a guest book, ordered something or filled out any information online, you have used a form.  Some of School Adz customers may want you to create a simple form for them.

There are two parts to a form:

• The first part is the form you put on your web page using the HTML you will learn in this lesson
• The second part is the script or program on your web server that processes the information and does something with it.

Forms gather information and then can do a variety of things with this information.

• Send the information to an email address.
• Send the information to a database.
• Allow the user to print the form.
• Post the information to a web page (like a guest book).

The <form> Element

The opening form tag is important because it directs the information gathered from the form.  There are two main attributes in this tag.

• method=" Here you can put either get or post". 
  • Post allows you to send secure data to the server and has no character limit. We will be using post.
  • Get allows viewers to book mark the results of a form. For example, a list of search results from a search engine.
• action="Here you put where the form will be posted.  This is usually a URL to the program on your server" 
  We will use "mshs_form.php" 

Don't forget to close the your form tag at the bottom with a </form> tag! Forms can contain block level elements such as headings and list but should never include another form element.

Activity: Add an opening and closing form tag to your form.html page.

top

Form Controls

Web forms use a variety of controls to allow viewers to enter information. Most of these controls use the <input> element.

Form controls include:

• Text Entry Controls
  • Single line
  • Password
  • Multi-line
• Pull-down or scrolling menus
• Radio and checkbox buttons
• File selection
• Hidden controls
• Submit and reset buttons

The Name Attribute
All of these controls require a name attribute. This attribute identifies what information is being gathered. These names are coded into the program on the server so they have to be very specific.
Example: Hours: <input type="text" name="hours"> This input might send the following information back to the server: hours=9:00%to%5:00%pm

top

Text

• Single Line <input type="text" /> This is one of the most useful and simple form controls. The following attributes can be added to this control.
  • name Of course this is a required attribute most form controls
  • value specifies the default text that appears in the field when the form loads
  • size allows you to change the width of the field (the default is 20 characters wide)
  • maxlength allows you to set a maximum length
• Password <input type="password" /> This is just like the single line text field but it substitutes the asterisk instead of characters to hide your password as you enter it. It is not encrypted so don't consider it secure. You can apply the same attributes to this control as the single line.
• Multi-line <textarea> ... </textarea> This will create a scrollable, multi-line text area that users can enter more than one line of text. The text area is not a empty element so you can put text between the open and closing elements. This text will be displayed in the text area when the form loads.
  • name Of course this is a required attribute most form controls
  • row specifies the number of lines the text area will display. Scrollbars will be provided if the user types more rows than you specify.
  • cols specifies the width of the text area in characters just like size did for the single line

Text Control Tutorial

Activity: You will need to use all three of these controls to replace much of the text in parenthesis on our form. Pay close attention to the control type, required attributes and name values.

top

Submit and Reset Buttons

These are the only controls that don't require a name value because they do not return any information to the server.

• Submit <input type="submit" /> The submit button send the data from the form to the program on the server.
• Reset <input type="reset" /> The reset button clears the data in the form and returns it to the way is was when it first loaded.

You can change the text on either of these buttons by using the value attribute.
Example: <input type="reset" value="Clear Form" /> will give you a button that with the text Clear Form on it.

Submit and Reset Control Tutorial

Activity: Add a submit and reset button to the bottom of the form.

Radio and Checkbox Buttons

• Radio Buttons <input type="radio" /> This button is used when you want to give the user choices but they can only pick one! An example might be a yes or no question. The key is to make sure that the radio buttons have the same name but change the value .
  Example: Gender <input type="radio"name="gender" value="male" /> Male <input type="radio"name="gender" value="female" /> Female
• Checkbox Buttons <input type="checkbox" /> This button is used when you want to give the user choices and they can pick more than one. Checkboxes can have the same or different names but you should change the value.

Radio and Checkbox Control Tutorial

Activity: Add radio and checkbox buttons to the form where appropriate. Pay close attention to the control type and name values.

top

Menus

Menus are a more compact way to present the viewer with a bunch of choices. The <select> element opens and closes around a bunch of <options> elements. The option elements open and close around your options. Make sure to close the option element after each option and close the selection after the last option.

• Pulldown <select name="states">The default menu only shows one option until you click on the pull-down arrow and only allows you to select one option.
• Scrolling<select name="states" size="5"> By adding the size attribute you can create a scrolling list.
• Multiple <select name="states" size="5" multiple="multiple"> By both size and multiple you can create a scrolling list that allows the viewer to select more than one option.

Menu Control Tutorial

Activity: Add a pulldown menu for the following states in the customer information section.

States: Washington, Oregon, Idaho, California, Arizona, Alaska

File Selection

You can use the file selection control to allow your users to upload files to your server. You must use the POST method in your form tag and you must specify the encoding type of the form as multi-part/form-data. We will not be using this control on our form.

Example: <input type="file" enctype="multipart/form-data" name="photo" />

top

Hidden Controls

Hidden <input type="hidden" /> controls allow you to send information to the program on the server that doesn't come from the user. For example you might want to specify a web page that the user is directed to after they submit the form. These controls are set by the program on the server so we will have to wait until our Business Advisor has created our server side program.

<input type="hidden" name="subject" value="Joe's Test Form Data" />

Activity Part 1: Coming soon.

Activity Part 2: Create a web page to thank your viewer for filling out the form and allowing them to explore the rest of your site. Include the company logo at the top of the page, "Thank you" in a heading 1 and heading div. "Thank you for completing our request form." in a paragraph and content div. The navigation div and links we have created for getting around our page and of course the horizontal rule at the bottom. Make sure to place this "mshs_thanks.html" page in your forms folder.

top

Accessibility

• Label elements are used to match the text we see on the page with the form field in the code.
  Example: <label> Hours <input type="text" name="hours" /> </label>
• Field sets & Legends allow you to organize your form into logical groups using the <fieldset> and then give them a caption using the <legend> element.

Activity: We will simply surround our text and form control with an open and close <label> tag. In our form we can use a fieldset and legend for the contact information and one for the business information.

Accessibility Tutorial

top

Checking Your Form Results

I have set up a Gmail email account to check the results of your form. Just go to Google and click on "Gmail".

Username: schoolform@gmail.com

Password: U3L7form

PHP Files

We will be using php to handle our form data. You will need to download these files to your "forms" folder and edit one of them. Then upload all of them to your forms folder on the ftp server.

Activity: The "mshs_form.php" file is the only file you need to open and edit. There are two things to do here.

1. Make sure that the spelling of your thank you page file name matches the php file (see tutorial)
2. Change the subject line to include your name. (see tutorial)

PHP Tutorial

Activity Summary:

1. Add an opening and closing form tag to your form.html page.
2. You will need to use all three of these controls to replace much of the text in parenthesis on our form. Pay close attention to the control type, required attributes and name values.
3. Add a submit and reset button to the bottom of the form.
4. Add radio and checkbox buttons to the form where appropriate. Pay close attention to the control type and name values.
5. Add a pulldown menu for the following states in the customer information section.
6. Hidden controls
7. Create a web page to thank your viewer for filling out the form and allowing them to explore the rest of your site. Include the company logo at the top of the page, "Thank you" in a heading 1 and heading div. "Thank you for completing our request form." in a paragraph and content div. The navigation div and links we have created for getting around our page and of course the horizontal rule at the bottom. Make sure to place this "mshs_thanks.html" page in your forms folder.
8. We will simply surround our text and form control with an open and close <label> tag. In our form we can use a fieldset and legend for the contact information and one for the business information.
9. The "mshs_form.php" file is the only file you need to open and edit. There are two things to do here.
   1. Make sure that the spelling of your thank you page file name matches the php file (see tutorial)
   2. Change the subject line to include your name. (see tutorial)

Turn It In: When you feel like the page is just the way you want, upload the web pages (form.html & mshs_thanks.html) and the php files to your server folder.  Test it to make sure that it is working properly using the Gmail account. Then forward the email from the Gmail account to your project manager. Make sure to also include the URL of your forms page for evaluation.  *Make sure the URL starts with "http".

Grading Rubric

Tag	Point Possible
Form	2
Hidden	2
Single line text	2
Password	2
Multi-line line text	2
Pull-down menu	2
Radio buttons	2
Checkbox buttons	2
Submit & Reset	2
Labels	2
Fieldset and Legend	4
Thank you page	6
Total	30

top