Forms are a way for your viewers to send in formation to you. That information could be a request for a catalog or more information, an order, a search, a comment or many other things. Forms collect information in fields and then send the information to some kind of programming to process the information, and usually a database to store the information. The information from forms can also go to an email address.

You can design a form with whatever program you use to build your web pages, whether it's Notepad, Joomla, Dreamweaver or something else. However, the programming that collects the information and the database that stores the information require new sets of skills. You can see an example of how JavaScript is used to gather data from a form in this exercise.

The Form Tag

• The tag which adds a form to a web page is <form></form>.
• The form tag can have various properties: action, method, name, id, and others.
• The action property decides what will happen when someone clicks the main button on a form. A form can actually have more than one button, but since there is only one action, multiple buttons have to be coded differently. The action property is generally the name of a file. Action can call the same web page. If there is programming at the top of the page related to what has been entered in the form, the form will reload the same page. When the page reloads, it gathers the viewer's entry and does something with it.
• The method property decides how the information from the form will be sent. There are two options for method: POST and GET. The GET method puts the values from each field in the website address. You have probably seen web addresses that look like this: http://somedomain.com/somefile.html?field=somevalue; field=somevalue, etc. That is the GET method. That method is not very secure because the values are completely available as part of web traffic. The POST method puts the fields and their values in the message sent to the server, instead of in the address. POST is considered more secure.
• Name and id aren't the same thing, but they are similar. It is a good idea to name your forms. There are some benefits to the programming. It is not as important if there this only one form on a page, but if a page has more than one form, it is very important.
• You can also add the inline CSS style property to your form, although it would be best to use an external style sheet for your styles.

Types of Form "Widgets"

Forms have fields. Forms could collect the data for each field with textboxes, but textboxes aren't as secure as some other field widgets, because viewers can enter all kinds of garbage data - even attack data - in your form. The fewer textboxes you use in your form, the more secure your form is. Here is a brief overview of form field widgets:

1. TEXTBOXES
   Textboxes are a place where a viewer can type. Textboxes are one line. A viewer can type anything he wants into a textbox. If you don't want to accept anything the viewer types, you have to validate the form. Validating a form means that you have programming that checks the entry to be sure that it matches the criteria you set. Here is an example of JavaScript form validation.
   Code: <input type="text" name="textfield">
   - The tag for a textbox is an input tag of the text type.
   - It is important to give your textbox a meaningful name. It is best if the name matches the database field that will take the data entered. There can't be any spaces in the name.
   - Your textbox can also have a maximum number of characters that can be entered. This should match the size that has been set in the database. <input type="text" name="FirstName" size="15" maxlength="20">
   - The size property on your textbox sets how large it appears on your form. This should be determined by the spacing available in the form.
2. TEXT AREAS
   Text areas are commonly used for Comment field and other fields where you want the viewer to be able to a significant amount of information. Every time you add a post to Facebook, you are using a Text Area. The problem with text areas is that you have given an attacker plenty of room to send malicious code to your server. If your form uses text areas, your form validation will need to be extra secure because there is extra space to enter malicious code.
   Code: <textarea name="textfield" cols="30" rows="5"></textarea>
   - The tag for a text are is textarea.
   - Just as with textboxes., it is important to give your text area a meaningful name.
   - The cols property is how wide the text area appears on the page.
   - The rows property is how tall the text area appears on the page.
   - Text areas also have a wrap property. This is what allows the typed text to wrap to the next line automatically. If you don't set this property, the browser goes with its default value. There is a wrap value of physical. This will put in line break code, which may not be what you want because the text won't wrap normally, if it is used somewhere else.
   
   
3. RADIO BUTTONS
   Radio buttons are a great way to constrain what the viewer can enter in your form. The unique feature of radio buttons is that only one in a group can be selected. That is great for your database because only one value is added to that field. A group of radio buttons all have the same name property, but each radio button has a different value. You indicate these values with the button labels. You can have more than one groups of radio buttons on your form. The radio buttons in one group will all have a different name from the radio buttons in another group.
   Code: <input name="radiobutton" type="radio" value="radiobutton" />
   - The tag type is input, but the type property is radio.
   - All the radio buttons in a group have the same name. That is what makes them a group. The name should be meaningful, and is easiest to use when it is the same name as the field in the database.
   - Each radio button in a particular has a different value. The value is what is added to the field in the database.
   - You can have as many radio button groups as you want in a form. Each group just gets a different name.
   - If one choice is the most likely, you can set that choice to be selected. The dot will be in that radio button, unless the viewer chooses a different radio button.
4. CHECKBOXES
   Checkboxes are another way that you can constrain what a viewer can enter into your form. That means that checkboxes are more secure than text fields.
   Checkboxes allow the viewer to make multiple choices within a category - or just a yes or no choice on one category. For example, you may have a single checkbox to allow viewers to ask for your newsletter. Or you may have multiple checkboxes (check as many as apply.) It is not uncommon for web designers to mix the functions of radio buttons and checkboxes. One of the problems with checkboxes is that the database designer and/or programmer may not realize that it is poor database design to dump mulitple values into one database field. A properly designed database will put the multiple values into new records, but that is another topic!
   Code: <input type="checkbox" name="checkbox" value="checkbox" />
   - The tag type is input, but the type property is checkbox.
   - The checkbox in the example starts as checked on the page. Like radio buttons can be set to selected, a checkbox can be set as checked.
   - <input type=checkbox name="OptIn" checked >
   
5. Dropdown lists
   Dropdown lists are another way that you can constrain what a viewer can enter into your form. That means that dropdown lists are also more secure than text fields. Dropdown lists function similarly to radio buttons in that the viewer chooses one from a number of choices. Dropdown menus/lists can also be used for multiple selection if the property is set to allow multiple selection. However, then the viewer has to understand to Shift + Click or Ctrl + Click for the multiple selection. Dropdown lists are tidier than radion buttons or checkboxes for large selections. For example, it would take a lot of space to use radio buttons to have a viewer select his state, but it could be done.
6. Hidden fields
   A hidden field is one where the viewer doesn't need to do anything. For example, you may have the same form, such as to sign up for your newsletter, on every page of your website. You want to find out which page gets the most newsletter sign ups. So, you add a hidden field to the forms that tell which page the request came from. or, if your site uses a web service for donations or newsletters, the form code from the web service may contain hidden fields that sends the filled out form information to your account. Here is an example of such code in the MailerMailer.com system:
     <form method="post" action="http://www.mailermailer.com/x">
       <input type="hidden" name="owner_id_enc" value="00297o-f116e02b">
       <input type="hidden" name="function" value="Subscribe">
7. File upload
   This type of form field is very dangerous to your server because without very tight security, your viewer could send a virus or other attack to your server. However, it is commonly used to allow a viewer to upload a photo or other file into an account. The viewer sees a Browse button that allows a file to be selected for uploading. To use this function, the file that is uploaded should be checked to see if it's the right file type, it's a reasonable size, and it doesn't contain malicious code. However, even if all of these are correct, there is nothing that keeps the viewer from uploading inappropriate images through your file upload; so, someone should be responsible to check all uploaded files.
8. Buttons
   Buttons are the widgets that activate the programming to do something with the values entered in the form. You can have multiple buttons on your form, but since each form has only one "action" property, you have to trigger the other button functions with JavaScript calls.
   
   Buttons can be formatted with CSS styles. If you received code from a web service, you may or may not be able to add your own CSS styles to the buttons, depending how what they allow you to control.

Form Design

Notice the difference between the design in the textboxe illustration and the design in the radio button illustration. Designing an elegant form is another important skill that can make your forms more comfortable to use.

Related Articles

1. Understanding Form Widgets
2. Building a Form in Dreamweaver
3. How JavaScript Works with Form Fields