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.


Read Lecture sent by email (also posted in Canvas)
Read in Text Book: Chapter 9: Forms

By Due Date:

Create one HTML page using Brackets. Save into your folder - Ex6. Use some of the techniques we have already covered including using CSS for colors, fonts, adding 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

  • Read the lecture on BlackBoard or email
  • Read Chapter 9 [pages 147-174] in the book
  • Review the Demo pages
  • Watch the Videos as needed

  • Create a project folder named "Ex6"
  • Create One HTML page
  • Use all the different kinds of form input types in one form.
  • Make up your own creative content.
  • Add a background image and other 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

Evaluation

This exercise is worth 20 points.

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


Due Date

Text Reference

Online Demos