Getting HTML Right Part 8 - Forms
Categories: HTMLWe all know about forms. We see them all over the place. Forms are the method used to collect information. If you want people to, for example, subscribe to your newsletter then a form is what you need. This article does not cover CGI scripts. If you want information just Google ‘mail scripts’ and you’ll find lots of free ones with instructions.
We’re going to look at the [FORM] and [INPUT] tags with some of their attributes.
Further we’ll look at the [SELECT], [OPTION] and [TEXTAREA] tag with its ROWS attribute.
Here’s a simple form.
Please click the “Examples” link below to see the illustrations.
Here’s the HTML. You’ll notice that the form has been placed in a table to proportion and organize it neatly. But we’re going to pay attention to the form itself.
[TABLE]
[FORM ACTION=”http://www.your-domain.com/cgi-bin/formmail.cgi” METHOD=”post”]
[TABLE WIDTH=”300″ BORDER=”3″ CELLSPACING=”5″ BG BORDER]
[TR]
[TD WIDTH=”50%”]Your Name:[/TD]
[TD WIDTH=”50%”][INPUT TYPE=”text” NAME=”fullname” MAXLENGTH=”25″][/TD]
[/TR]
[TR]
[TD WIDTH=”50%”]Your E-Mail:[/td]
[TD WIDTH=”50%”][INPUT TYPE=”text” NAME=”email” MAXLENGTH=”25″][/TD]
[/TR]
[TR]
[TH WIDTH=”50%”]
[INPUT TYPE=”submit” VALUE=”Subscribe Now!”][/TD]
[TH WIDTH=”50%”]
[INPUT TYPE=”reset” VALUE=”Clear form”][/TD]
[/TR]
[INPUT TYPE=”hidden” NAME=”recipient” VALUE=”you@your-domain.com”]
[INPUT TYPE=”hidden” NAME=”subject” VALUE=”Newsletter”]
[INPUT TYPE=”hidden” NAME=”required” VALUE=”fullname,email”]
[INPUT TYPE=”hidden” NAME=”confirmation” VALUE=”thanks.html”]
[INPUT TYPE=”hidden” NAME=”ref” VALUE=”code”]
[/FORM ]
[/TABLE]
We start with the [FORM] tag which encloses our form. I’ll be handling the ACTION and METHOD attributes at the end.
Next the [INPUT] tag and its NAME and MAXLENGTH attributes.
[INPUT] is easy; here we input data in one form or other. The TYPE indicates what sort of input we’re dealing with, in this case plain text. The data of the NAME attribute is the title or description we give that data element; in the first line “fullname” and the second “email”. Both fields have been given a MAXLENGTH of “25″but different values for SIZE. MAXLENGTH is the maximum number of characters which may be entered; SIZE is the physical size of the field that you see. For the rest of the forms in this section I have just used the former attribute.
The TYPE sorts “submit” and “reset” generate our buttons at the bottom of the form allowing people to submit or clear the form if they change their minds. The VALUE attribute, which we see for the first time, lets us define the text we want on the buttons.
The TYPE “hidden” is an interesting one. It lets us define certain parameters for our form that won’t be visible to the reader but give parameters through to the web-side script.
Let’s look at the different VALUE’s we’ve used here as “hidden” elements.
NAME=”recipient” VALUE=”you@your-domain.com”
This informs your server-side script where the form information must be sent to. Don’t worry about scripts now, I’ll be touching on them later with the ACTION and METHOD attributes.
NAME=”subject” VALUE=”Newsletter”
When you receive the form information the email subject will be, in this case, “Newsletter”
NAME=”required” VALUE=”fullname,email”
This informs your system that the named fields are compulsory, if either isn’t filled in then the person is rerouted to “whoops.htm” (see below)
NAME=”confirmation” VALUE=”thanks.html”
This is where your visitor is taken after successfully submitting the form
NAME=”ref” VALUE=”code”
Lets you have the form send an extra piece of information for, for example, marketing purposes.
Last but not least, I included a CSS instruction in this form to color the two buttons. That’s the STYLE attribute. Let’s you freshen up your form.
Right, such a lot of information just for a simple form with only two fields but they’re the majority of things to be considered with a form. Let’s look at a couple of other sorts of [INPUT] possibilities now.
Please look at example 2.
Here’s the HTML. I’ve just shown the “checkbox” coding.
[TR]
[TH COLSPAN=”2″]Please check the newsletters you’d like.[/TD]
[/TR]
[TR]
[TH]Hayes’ Homilies[/TH]
[TH][INPUT TYPE=”checkbox” NAME=”choice” VALUE=”Hayes Homilies” CHECKED][/TH]
[/TR]
[TR]
[TH]Web Search[/TH]
[TH][INPUT TYPE=”checkbox” NAME=”choice” VALUE=”Web Search “][/TH]
[/TR]
[TR]
[TH]HTML Tips [/TH]
[TH][INPUT TYPE=”checkbox” NAME=”choice” VALUE=”HTML Tips “][/TH]
[/TR]
The form lets our subscribers choose more than one newsletter. Let’s take a closer look at this new element.
TYPE=”checkbox” NAME=”choice” VALUE=”Hayes Homilies” CHECKED
The TYPE is clear; it’s a “checkbox”, a box which one can check or not. The NAME is the same for all input elements as it is one choice element with multiple answers possible. What you would see in your email with the form information would be some thing like:
“choice=Hayes Homilies”
“choice=Websearch”
“choice=Elvis Monthly ”
Of course when the person had checked these three. A word about the attribute CHECKED. This allows you to pre-check one of the choices in the hope that the subscriber won’t uncheck it. A bit of hard selling.
What when you want to give them only one choice.
Please look at Example 3.
Here’s the HTML. Again I just show the “radio” coding.
[TR]
[TH COLSPAN=”2″]Please check the newsletter you’d like.[/TD]
[/TR]
[TR]
[TH]Hayes’ Homilies[/TH]
[TH][INPUT TYPE=”radio” NAME=”choice” VALUE=”Hayes Homilies” CHECKED][/TH]
[/TR]
[TR]
[TH]Web Search[/TH]
[TH][INPUT TYPE=”radio” NAME=”choice” VALUE=”Web Search “][/TH]
[/TR]
[TR]
[TH]HTML Tips [/TH]
[TH][INPUT TYPE=”radio” NAME=”choice” VALUE=”HTML Tips “][/TH]
[/TR]
This form lets our subscribers choose only one newsletter. The only difference between this coding and the “checkbox” form is that the TYPE data is now “radio” which only allows one choice.
The [SELECT] and [OPTION] tags.
These allow you to put your selection list in a mini-window, if needed, with a scroll bar.
Please look at Example 4.
Here’s the HTML.
[TR]
[TH COLSPAN=”2″]Please check the newsletter you’d like.[/TD]
[/TR]
[TR]
[TH COLSPAN=”2″][SELECT NAME=”choice”]
[OPTION SELECTED /]Hayes’ Homilies
[OPTION /]Web Search
[OPTION /]HTML Tips
[OPTION /]Hayes’ Hints
[OPTION /]Web Business
[OPTION /]HTML Advanced
[/SELECT][/TH]
[/TR]
It should be obvious that your selection list must be enclosed by the [SELECT] and [/SELECT] tags and that each selection possibility preceded by the [OPTION] tag. With this method your subscriber can only select one newsletter. And by using the SELECTED attribute, yet again, we’re trying to help them make up their mind.
You see that the SIZE attribute is set to “4″. This is to demonstrate the scroll bar. Had I defined “6″ then the scroll bar would not be present and you would see all choices in the window.
Last but not least.
Sometimes you’d like your subscribers to tell you what they thought of your website and that’s where the [TEXTAREA] tag comes in.
Please look at Example 5.
Here’s the HTML.
[TR]
[TH COLSPAN=”2″]Please comment on my website.[/TD]
[/TR]
[TR]
[TH COLSPAN=”2″] [TEXTAREA ROWS=”5″ NAME=”choice”]
[/TEXTAREA ][/TH]
[/TR]
It couldn’t be simpler. And the [ROWS] attribute indicates how many rows are visible, not the type-in limit. If your subscriber types in more that the scroll bar appears, try it.
Now we’re going to look at the [FORM] tag with its, ACTION and METHOD attributes. I’m going to start with the METHOD attribute. We usually use the “post” option, this results in the contents of the form being emailed to, in this case, me. The other option, “get” results in the form’s contents being added to a URL in order to, for example, do a search via a search engine. So for us it’s the “post” option.
We can fill METHOD in, in two ways; the first way sends the form’s contents to a script somewhere in order to be unravelled, the second just emails the raw data to our given email address.
Let’s look at that first one.
FORM ACTION=”http://www.your-domain.com/cgi-bin/formmail.cgi” METHOD=”post”
Via this definition the contents of our form will first be sent to the CGI script formmail.cgi in the [B]cgi-bin[/B] in our website www.your-domain.com where it will be ‘unravelled’ and sent to us in a readable form. See example 6.
FORM ACTION=”mailto:you@your-domain.com” METHOD=”post”
And this is what the email we receive looks like. See example 7.
The difference is quite clear. With this one it’s up to you to do the unravelling, as you can see, the fields are separated by the “&” character and characters, like “/” and “;”, are translated into hexadecimal codes.
