Web Design - Forms and Meta Tags

Forms

Forms are used to transfer information from a web page to either a database or to send an e-mail to someone. Forms are an excellent way to get feedback about your web site, take customer orders, or get information from your site's visitors. Most forms rely on CGI scripts. CGI stands for Common Gateway Interface and a script is just another name for a program. CGI allows programs to be run on a server. Rather than just transmitting data, a CGI script causes the server to process information, then send data to the web browser. A form processing script will take the information that is entered into a form, process it, and either add the data to a database or send it to you in the form of an e-mail. There are many form processing scripts available for download, however, the server hosting your site has to be configured to allow cgi scripts to run. Contact your web host to determine if CGI scripting is allowed. If it is, you only need to upload the script to the proper location on the server (usually a directory called cgi or cgi-bin). You may also need to change permissions on the file (allows the server to run the file). If scripting is not allowed, there are public hosts which will process your forms for you. There is also a simple alternative to scripting described at the bottom of this page.

Typically, a form processing script will e-mail the information from the form to you, or whoever you want. But, first the script needs the information to process. There are two ways that information from a form can be send to the script: GET and POST. Get will add the information to the end of a URL which is requested from the server. The script gets the information that was entered in the form from the URL which is requested, it then processes that data and sends the e-mail. POST sends a separate data file to the server script, which takes the information, processes it, and sends it in an e-mail. A form can contain the following:

check boxes
radio buttons
list boxes

To add a form to your webpage, begin with the FORM tag. FORM has several required attributes. FORM must also be closed after all the form elements are defined.

The METHOD attribute is either "get" or "post". Post is much more common than get. See above, for info on GET and POST. The value of the ACTION attribute is the URL of the form processing script. Scripts usually end with the extensions of .exe, .cgi, or .pl.

Each element within a form is assigned a unique name to identify it. For instance, a text box in which a visitor enters their name would probably be called "name". To enter a text box element, use the INPUT tag between the FORM tags.

<INPUT TYPE="text" NAME="firstname">
would display

TYPE tells the browser what type of an input to display (a text box) and NAME uniquely identifies this form element for processing. Each form element will always contain a NAME attribute.

You can add the following optional attributes to alter the text box -
SIZE="n", where n is the number of characters the text box will contain.
MAXLENGTH="n", where n is the maximum length of the text in the box, in characters. Can't be more than 255.
VALUE="initial value", where initial value is what you want to initially display in the box.

You can also change the TYPE attribute's value to "password" to get a password box. A password box does not encrypt the information; the only additional protection it gives is that others can't read what is being entered into the box. The INPUT tag is not closed.

To insert a bigger text area, use the TEXTAREA tag. You can add the COLS, ROWS, and WRAP attribute to the TEXTAREA tag to additionally format it.

<P>Comments: <TEXTAREA NAME="comments" COLS="45" ROWS="4" WRAP="virtual">Please type your comments.</TEXTAREA>
would display
Comments: Please type your comments

Notice how I added a caption to the element, so the visitor knows what to enter. WRAP's value can be any of the following:
off - the browser will not wrap the text to the next line.
physical - only wraps when the visitor presses the return key. This is the default.
virtual - automatically wraps when text reaches the end of the text box.
Off and physical will display scroll bars on the text box when the text exceeds the limits specified. Virtual will only display a scroll bar when more lines are typed than are specified in the ROWS attribute. Notice that the initial text of the box is not entered in an attribute like it was with the INPUT tag. Anything between the opening and closing TEXTAREA tags will display in the text box. No HTML tags are allowed there. Unlike the INPUT tag, the TEXTAREA tag must be closed.

To add radio buttons, again use the INPUT tag. This time, the TYPE is "radio". Radio buttons come in sets. Only one radio button in a set can be pressed. To specify which radio buttons belong to a set, give them all the same NAME value. The VALUE attribute uniquely identifies each button.

This class is:
<INPUT TYPE="radio" NAME="class" VALUE="nifty">Nifty
<INPUT TYPE="radio" NAME="class" VALUE="great">Great
<INPUT TYPE="radio" NAME="class" VALUE="totally_awesome" CHECKED>Totally Awesome!
would display
This class is: Nifty Great Totally Awesome!

Notice that the INPUT tag is not closed. Only one of the buttons in this set can be checked at a time. You can add another set of radio buttons to this form, just give them a different NAME attribute. The VALUE information is what will be e-mailed to you. Most form processing programs do not like NAME or VALUE attributes that are more than one word long. You can solve this by inserting an underscore(_) between words, like I did above with totally_awesome. The server will think it is one long word. You can also add the CHECKED attribute to one of the INPUT tags to make it initially checked. The CHECKED attribute has no values.

Check boxes are similar to radio boxes, except the visitor can check (or uncheck) as many boxes in a set as they choose.

This class is:
<INPUT TYPE="checkbox" NAME="ranking" VALUE="bogus"> Bogus
<INPUT TYPE="checkbox" NAME="ranking" VALUE="swell" CHECKED> Swell
<INPUT TYPE="checkbox" NAME="ranking" VALUE="gnarly" CHECKED> Gnarly
would display
This class is: Bogus Swell Gnarly

Menus are created using the <SELECT> tag.

Jared is:<SELECT NAME="my_ranking" SIZE="3" MULTIPLE>
<OPTION VALUE="groovy">Groovy, baby!
<OPTION VALUE="terrific"">Terrific
<OPTION VALUE="snazzy">Snazzy
<OPTION VALUE="all_of_the_above" SELECTED>All of the above
would display

Jared is:

Notice my use of the underscore to keep values and names to one word in length. The SIZE attribute tells the browser how many items to display at a time. It can be from one to as many items as you have. If you do not add the SIZE attribute, the browser will only display one item at a time, unless the menu is clicked. The MULTIPLE attribute allows the user to select more than one item at a time by holding down the CTRL key and clicking on items. Go ahead and try it. MULTIPLE will not work if the SIZE attribute is not specified. Be sure to inform your visitors if they can select multiple entries. The SELECTED attribute makes that option the initially selected. SELECTED has no values.

You can also add hidden elements to your form. This is usually done to give additional information to the form processing script. The visitor cannot see the hidden elements in the page, but the data is still sent to and processed by the script. The most common uses are to tell the script the e-mail address to send the form data to. Hidden elements can also tell the script which URL to send the browser to after the form data has been processed. An example of an hidden element use
<INPUT TYPE="hidden" NAME="e-mail" VALUE="jared@whatever.com">
This element may tell the script to send the info from the form to my e-mail address.

In order for the form to be sent to the server script, the user must tell the browser to send the data by clicking on a button. To add a submit button, use
<INPUT TYPE="submit" VALUE="Send Form">
would display

The VALUE can be anything you choose. When the submit button is clicked, the information is sent to the script URL defined by the ACTION attribute of the FORM tag. You can also add a button to reset all of the information in the form with
<INPUT TYPE="reset" VALUE="Clear the Form">

Be sure to close the </FORM> tag after all elements have been defined. Typically, the form processor will process the information and e-mail it to you as a simple text file. Usually you can add additional information to the e-mail to give you information about the data that is being e-mailed. Processing scripts vary in the way they send and process information. An excellent resource for form processing scripts and thousands of other CGI scripts, visit cgi-resources.com. There are also many free services on the Internet which will process forms for you on their servers. Check some of them out at thefreesite.com.

If you don't have CGI access, but still want to use forms on your pages, you can setup a form to be sent to you by the visitor's e-mail program rather than by a script. Add the following to the FORM tag to have the data e-mailed via the visitor's computer:

Although this method does not require a CGI script, its results can be sporadic. The visitor's e-mail program must be configured correctly for it to work. Also, the visitor is usually given a warning prompt warning that they are about to transfer data using e-mail. This can sometimes scare visitors out of sending the form.

Be careful with your use of forms. Visitors are much more likely to fill out a form than send an e-mail, however, many surfers are weary of transmitting sensitive information via forms. Although forms are fairly secure, you should always include alternative methods of contact on your site. If you are requesting sensitive information, such as credit card numbers, you should have the form processed on a secure server with a high level of encryption.

Meta Tags

META tags are a tool for helping a web site to get indexed correctly by many of the major spider based search engines. They are a couple of simple lines of code that go into the head section of your HTML document. The two most important META tags are the description and keywords tags. The description is used to describe your site on search engines. If you do not enter a description META tag, most search engines use the first few lines of you webpage as the description. The keywords META tag contains keywords that people are likely to search under for your page. Althought META tags can help you get listed higher on most search engines, they are probably not going to suddenly give you top placement. A good combination of META tags, TITLE tag, frequently used keywords, and good site design are likely to get you higher in the search results.

Here is a good example of how META and TITLE tags should be used:
<HEAD>
<TITLE>BATC - Advanced Web Design</TITLE>
<META NAME="description" CONTENT="Advanced web design homepage for Bridgerland Applied Technology Center, located in Logan, Utah.">
<META NAME="keywords" CONTENT="web design, bridgerland, html, advanced web development, logan">
</HEAD>

Tips for the description META tag:

Short but sweet works best. One or two short sentences that will convince people to click on your site. Keep in mind that your site is likely to land right next to a competitor's site.
Most search engines don't show any more that 20 words or so. If you write a long description it may be cut off in the middle of a sentence.
Listing a few of the most relevant keywords within the description is a good idea but don't try to pack them all in. Doing this often makes sentences sound choppy and it won't help your relevancy enough to be worth it.

Tips for the keywords META tag:

Be specific. Usually, two-word and three-word phrases work better than single words. For example, don't use typical words like 'business' or 'travel' or 'software' because they are vague. It is better to use phrases like 'home based business' or 'Orlando vacations' or 'contact management software' because they are more specific to what.
Be careful with repetition. Many search engines will give you a "spam penalty" if you repeat a word or phrase too close to itself. If you must repeat keywords, spread them out a little bit.
Don't overdo it. The more keywords you use, the more you dilute the relevancy for every other word and phrase in the list. For best results, put different words on the interior pages of your web site and submit them individually to the search engines.
Watch your CASE! Some of the most popular search engines are case-sensitive which means a search on 'META tags' would bring up different results than a search on 'meta tags'. Most of the population doesn't even capitalize proper nouns so you should leave most keywords in lower case.

Tips for the title tag:

The title is not a META tag. What you put here will appear in the title bar at the top of every browser being used to view your site. It will also be the text that becomes the link to your site within the search engine results lists.
Keep the title short - 40 characters of text or less works best.
Many search engines place high relevance on the words within the title so it often helps to include your best keyword(s) here but only if they fit. Don't use words like 'home page' because they waste valuable space.
NEVER USE ALL CAPS. The search engines will often just skip your site if you do.
Never put a URL into the title. Search engines will skip you entirely.

DON'T ADD YOUR PAGE TO SEARCH ENGINES IF YOU HAVE NOTHING TO OFFER VISITORS.

If you don't want your page to be listed on search engines, you don't need META tags. Sometimes your site may be indexed, even though you have not submitted it to a search engine. This may happen if a page is indexed that happens to have a link to your page. If you never want your page to be added to search engines, add this META tag:
<META NAME="robots" CONTENT="NOINDEX, NOFOLLOW">

Robots, often called spiders, are the computers that index or search your site. NOINDEX tells the spiders not to index your site, NOFOLLOW tells the spiders not to index any of the pages that are linked to from your page.

Another kind of META tag is used for refreshing a page or automatically sending your visitors to another page. This can be handy if you have relocated your site and want to automatically take your visitors to the new site. You can also use META refresh with frames to change individual frames to rotate through banners or advertisements.

where n is the number of seconds the current page is displayed before refreshing and where URL is the address of the page that will be automatically loaded. Notice the strange use of quotation marks. The refresh will not work if the quotes are omitted or in the wrong place. Also notice the semicolon after the number of seconds. Be sure to set the delay to at least a few seconds. If you set it to one or zero, the visitor may not be able to use their back button to return to where they came from. Also, be sure to inform the user that you are going to redirect their browser. Some newer browsers allow you to turn off auto refresh, so include a link to the new page so they can manually click.

MetaTag Links

easy-submit - Lists links to 50 search engines' submission pages.

Webpromote offers a service that will build optimized META tags for your page.

http://www.worldwidelearn.com/search-engines.htm - Improve your search engine ranking

Back to Web Design Homepage.