MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 6: FORMS

In this exercise we will design one web page that uses a form to collect data.

Watch the Video Lectures for Exercise 6 on the video page of my website.
Read in Text Book: Chapter 9: Forms pages 147-174.

By Due Date:

Think of a theme to develop your Form about. It should be one that you can create a variety of questions for with some having single answers (for the radio buttons, the drop down and scrolling menu), others having options for multiple answers (check boxes), and a comment box. Plus the usual name and email fill in the blank.

Create one HTML document using Brackets. Save into your folder - Ex6. Use some of the techniques we have already covered including using CSS for colors, fonts, adding background images, placed images and more. Use all the different form elements, text boxes, radio buttons, check boxes, drop down & scrolling menus, comment boxes, send and reset boxes.

Make sure to include your OWN email address so I can fill out the form and send it to you.

Folder Name: Ex6

Page Name: index.html

The form lecture in the book contains some information that I do not use - fieldsets, legends, and links to create your form parts. You can add style to your forms. Forms are pretty simple and fun to create The biggest error I see happening frequently is people either opening and closing the form several times or not including their complete information within the form tags. So remember--

  1. One page required
  2. Only open the form tag once with all the necessary attributes.
  3. Have the address set to YOUR email address, so I can fill out the form and submit it to you.
  4. Use all the form elements -- on the exercise list and in the demos
  5. Close the form tag AFTER the submit and reset buttons
  6. Make your form interesting - add images, or a background image. Use CSS to style different parts. Be creative!

Post your questions online or email them to me

HTML Elements

The opening form element needs the following three attributes to make it work.

Close the form element at the very end of your form

  • <form> </form>
    • action="url"
    • method="post"
    • enctype="text/plain"

We will work with 5 types of INPUT tags. The first three each use the name [the topic of the question] and value [the answer value] attributes to show what answers were chosen on the form.

Use the next two types, submit & reset, to create your closing buttons.

The input tag does not use a closing tag

  • <input> No closing tag
    • type="text"
    • type="radio"
    • type="checkbox"
    • type="submit"
    • type="reset"
    • name="question topic"
    • value="answer"

Use the SELECT element to create dropdown or scrolling menus.

To create the dropdown menu, just use the name attribute. To create the scrolling menu, use both the name and size attributes.

The OPTION elements are nested between the opening and closing select tag to create the options to choose from

  • <select> </select>
    • name="question topic"
    • size="#"
    • <option> </option>
      • value="answer"

Use the TEXTAREA Element to create comment boxes. You must use the name attribute for the textarea box to work correctly.

Use the rows and cols attributes to set the initial size of your comment box

  • <textarea> </textarea>
    • rows="x"
    • cols="x"
    • id="x"
    • name="name"

Exercise Requirements

  • Watch the video lectures on my website
  • Read Chapter 9 [pages 147-174] in the book
  • Review the Demo pages

  • Create a project folder named "Ex6"
  • Create One HTML document
  • Use all the different kinds of form input types in one form.
  • Make up your own creative content. Pick a topic and have all the questions relate to that topic.
  • Add a background image. Add additional images as needed
  • Use CSS for styling
  • Use your real email address so the form comes to you when I grade it

Exercise Six Grading Rubric
Item/Points 2 3 4
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Some Above & Beyond


This exercise is worth 20 points.

Coding (4)
Functionality (4)
Meeting project requirements (4)
Your effort (4)
Creativity (4)