Getting HTML Right Part 8 - Forms |
|
Forms on a website form a crucial link between site owner and visiting public. They can be used simply to
gather names and email addresses and also for more complicated order taking. They look difficult but they are not.
We 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] 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.
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="
This e-mail address is being protected from spambots. You need JavaScript enabled to view it
"
NAME="subject" VALUE="Newsletter"
NAME="required" VALUE="fullname,email"
NAME="confirmation" VALUE="thanks.html"
NAME="ref" VALUE="code"
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] 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" 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] 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.
Please look at Example 4. Here's the HTML. [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] 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: This e-mail address is being protected from spambots. You need JavaScript enabled to view it " 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. Good luck. Mike Hayes There are several other "Getting HTML Right" articles. |