Mail form notes

1 October 2002

We left a few things undone at the end of class Monday. They are:

1. Use tabindex to cause your text input fields to tab properly.
2. Add a name attribute to the TEXTAREA element. (The name is up to you, but it must be unique on the page.)
3. Take away the table border (if you haven’t already).
4. Use CSS to style the thanks.html page.
5. Use a META tag on thanks.html to redirect users to your home page.

Using tabindex

The number of the attribute tabindex="num" determines the order in which the user will be able to tab between form controls. (The default order is left to right, top to bottom.) You may use tabindex with any INPUT, SELECT, or TEXTAREA elements.

Give Textarea a name

By now you should have received emails from your mail form. Notice how the name=value pairs are organized. For example, I received this:

1_name:  Rob
2_address:  rcollins@earthlink.net
computer:  pc
email_to:  rcollins@earthlink.net
end_display:  https://www.angelfire.com/al4/rob0/thanks.html
highschool:  1
known:  yes

Notice what’s missing? The e-mail message itself! Because we forgot to give the TEXTAREA element a name attribute, the textarea was ignored when the form was submitted. Add a name and the problem is solved.

Remove the table border

We used a layout table to control placement of the form elements. We made the borders visible to make it easy to see how the table was structured. To hide the table, just remove the border="1" attribute from TABLE.

Use CSS to style the ‘thanks’ page

We covered some new CSS properties in class:

background-attachment: This property takes one of two values: scroll and fixed. If you choose fixed the page content can be scrolled while the background image remains stationary.

background-color: Takes a color value.

background-image: Takes the URL of the image file you wish to use. Here’s how you format it: background-image: url(images/myfile.jpg);

background: This “shorthand” property allows you to combine values for background-attachment, background-color, and background-image. For example: body { background: #ccffcc url(backgrnd.gif) fixed; } The order of the values is unimportant.

line-height: This property can be used with font-size to control the leading or amount of space between lines. Line-height should always be at least a little greater than font-size.

font: Another “shorthand” property, and a very useful one. It combines values for font-style, font-weight, font-variant (i.e., small-caps), font-size, line-height, and font-family. This example uses a font-size of 1em and line-height of 150%:

body {
  font: normal bold 1em/150% "Trebuchet MS",Verdana,sans-serif;
}

Properties may be omitted. If line-height is omitted, then the font-size appears without a slash. It is best to put the font-size and font-family values last.