HTML based forms are widely used across the Internet to facilitate the transfer of information. In most cases between the surfer and the operator(s) of any respective website. A perfect example of a form would be the at the top of this very page where you can type in your e-mail address to subscribe to our Cozy Newsletter.
You can use forms to get feedback from your surfers or to give them a quicker alternative to e-mailing you information. Whatever the case may be, creating forms in HTML is fairly simple and will require the various tags outlined on this page.
MAIN FORM TAG
Every form must begin with the following FORM tag.
You will end your form using the FORM END tag: </FORM>.
<FORM METHOD="POST" ACTION="Script_or_E-mail">
There are two ways to get the information submitted with the form sent to you. That's where the "ACTION" tag comes in.
First option would be to place the path to an action script in which case the form will request the script and follow it's orders. The script can be in various programming languages including CGI, ASP and PHP. This method requires some programming knowledge or someone who can build you a quick script to do the job. You can also use a web based script. Your best bet is to ask around on the boards or contact your hosting company for help on how to get setup with some sort of "FORM MAILER".
The second option is the simplest way to make your form functional. Simply enter a valid e-mail address as the "ACTION" - this will automaticaly submit the information in the form via the surfers default e-mail program. This method is very rarely used on the web today.
FORM TAGS
These are the TAGS that you will place between the main FORM TAG and the END FORM tag. They will enable you to customize your form just the way you like!
<INPUT TYPE="TEXT">
Basic input text box that looks like this:
<INPUT TYPE="PASSWORD">
Text box that encrypts text. Great for passwords:
<INPUT TYPE="RADIO">
Radio buttons are great for polls. Allow options:
<INPUT TYPE="CHECKBOX">
Another great box for offering options and/or selections:
<INPUT TYPE="SUBMIT">
This is the button users click to send the form.
<INPUT TYPE="RESET">
This is the button users click to reset the form.
<INPUT TYPE="HIDDEN">
Unlike all the various inputs above, the "HIDDEN" input cannot be seen by your visitors. For adding internal options to your form.
DROP DOWN MENUS
Here are two different types of drop down menus you can use in your HTML forms.
The following code is for a drop down menu that displays the first option and allows the user to click a drop down icon to view the other selections.
Here is what the example above looks like. The SELECT SIZE determines how many selections to show at one.
The number of selections doesn't have to match the actual SELECT SIZE. In the following example, we simply changed the SELECT SIZE to "2".
INPUT ATTRIBUTES
Here are some of the attributes and fuctions you can assign to each FORM input.
<INPUT NAME="Your_Name">
Basically gives the input a name. You will absolutely need to use this for radio buttons and checkboxes. The name is usually the choice associated with the radio button or checkbox. You can also use it for textareas (mentioned below) or drop down menus. Whatever the user puts into the input box will be equal to your name. Basic example of this would be in the event that you have text input box with NAME="First Name" in the respective input tag. Say you receive the information via e-mail - you will see First Name: "The Name The User Typed In". The NAME attribute is used to assign a title or for the lack of a better word NAME to the actual input field.
<INPUT VALUE="Your_Value">
This is for your use when you receive the form. If you put in a "VALUE" for a TEXT input, the text box will already be pre-filled with your value.
<INPUT SIZE="5">
The size of your input box in length.
<INPUT MAXLENGTH="15">
The maximum number of caracters a person can type into a text box. Not the same thing as "SIZE". Here is an example of a text box with the "SIZE" set to 15 and the "MAXLENGTH" set to 8. Try typing in some info, you will note that you can only type in 5 caracters.
<INPUT TYPE="TEXT" SIZE="15" MAXLENGTH="8">
<INPUT TYPE="RADIO" CHECKED>
You can use this tag to pre-select a specific checkbox or radio button. Examples:
TEXT AREA & COMMENT BOXES
You can use a text area input to provide your visors with a larger area to type in whatever info it is that you are requesting from them. Great for comments or feedback.
<TEXTAREA COLS="10" ROWS="10" NAME="Comments">
"ROWS" is equal to the number of rows, "COLS" the number of columns and the "NAME" is used for your reference depending on what the TEXT AREA is used for. Here is a sample TEXT AREA box with 35 columns and 6 rows.
You must use the TEXT AREA END TAG to end the active text area - </TEXTAREA>. Anything between the start and end tag will appear in the box as a default message. Here is the sample code and viewable sample of a text area with pre-filled text:
<TEXTAREA COLS="35" ROWS="6" NAME="Comments"> Type in whatever you like here! </TEXTAREA>
THE TAGS IN ACTION:
Here is a sample form along with it's HTML code to give you an idea on what you need to do to put a form together. Feel free to experiment with all the FORM tags outlined on this page. There are endless possibilities of what you can do with an HTML form. The example below uses the FORM tags along with basic HTML tags to give it an organized look. If simply put together the FORM tags -- all of the boxes and input would be stuck together without any spacing.
The gray text in the code above is visible on a web page while the actual HTML tags (in red) are translated into actual form input boxes to visually create a functional HTML form that looks like this:
IMPORTANT NOTES
Always make sure to include the END TAG whenver you use a "TEXTAREA" input.
Most hosting companies can hook you up with a proper FORM MAILER script. You can also finds tons of active or web-based scripts by doing a lookup for "Free Form" or "Form Mailer" scripts on any major search engine.
We've simply outlined the basics on this page. You can configure or setup your form anyway you like. You can also put as much text or images you like between the principal FORM start and end tag.
You want your form to be as sexy as possible. Try to be creative by placing the form inputs and respective text in HTML tables for better organization.
By C-Pimp | Pimp @ CozyFrog
C-Pimp has been working in the online adult industry for more than 7 years with experience in web design, marketing, web development and content production. He is the co-founder of Cozy's family of webmaster resources and services.
SUBMIT