Lesson 18 - Forms, Part 3

Images as Submit & Reset Buttons

Are you tired of forms? Surely not. They're so much fun!

For even more fun, you will turn your Submit and Reset buttons into images.

You will use the <button> tag to set up the image:

• Open the <button> tag with the following attributes:
  • type="submit"
  • value="submit"
  • name="submit"
• Then, put in the image:
  • img alt="Submit Button " border="1" src="fly.gif"
• Finally, close the </button> tag.

Here's what the code will look like:

The code for the Reset button will look the same, except that all the Submits will be changed to Reset:

And, here's what the buttons will look like on the page:

Some of your readers might not understand that the winged letter means to Submit, and the document on fire means to Reset. So, add labels to those buttons. The addition to the above code is in dark gray.

Notice that there are several line breaks <br> to keep the labels on short lines, and to keep the text on a separate line from the image.

Here's what the page looks like now:

Back to Top

Subdivided Drop-Down Menus

Here's another bit you can do with your forms. Remember those drop-down option lists you created in Lesson 17? You can extend those with more than one type of option.

For example, If you want to find out what type of forest students want to study, your list would include:

1. Hard woods:
   1. Mahogany
   2. Teak
   3. Tropical Cherry
2. Soft woods:
   1. Pine
   2. Fir

In addition to the Select button, you'll use a couple of optgroup sets.

Here's what it will look like on the webpage if you use Internet Explorer:

Most other browsers will present it as one long list with indents for each optgroup:

Back to Top

Password Boxes

The only difference between a password box and a text box is that whatever is typed into a password box is hidden by bullets or asterisks. The person sitting next to my reader in the library can't see what she's typing. But the information is NOT encrypted in any manner when it is sent to the server.

Now, when somebody answers your question, the typing will appear like this:

Back to Top

Final Project

You are now over half way through this course and closer to the final project, described in Lesson 22.

The following two items will be covered in the next lessons:

1. Include an address block at the bottom of each page.
2. Include metatags for content keywords and descriptions.

This is the end of Lesson 18. Please go to the next lesson.

Back to Top