Chapter 7: Forms
Forms add a degree of interactivity to your webpages. They allow visitors to send information to you directly from within webpages themselves (with the aid of a mailing script installed your website's server), or can be used alongside a JavaScript running on your webpage.
Forms are similar to the dialog boxes in BestAddress and other programs where you enter information and click a button which results in a task being performed based upon the information you specified.
A form can be described as a webpage equivalent of a dialog box. There are a variety of controls that can be placed on a form including buttons, text boxes, check boxes, option boxes, list selections and drop down lists.
Among other uses, forms are commonly used in webpages for guest books where visitors can provide comments, and send in details about themselves.
Creating a Form Field
You can easily add form fields and controls to your webpage by choosing an option from the Insert menu. In this tutorial, you will be introduced to the code that makes your forms work.
A form field contains all the controls (such as text boxes and buttons) and can be inserted anywhere within the body of a webpage. To define a form field, use the <form> and </form> elements.
So that the web browser knows where the information typed into a form is to be sent, you will need to use the action= and method= attributes. For example:
<form action="URL" method=post>
|
The action= attribute specifies a URL to a program on your website's server to which the form's data can be sent for processing.
The method= attribute tells the browser how the form's data is to be sent to the URL specified in the action= attribute. There are two possibilities: post and get. You will need to use the most suitable value based upon the program you are using, but typically you will use the post method.
The Submit Button
Most dialog boxes have a button which the user clicks for a task to be performed. In forms these are called submit buttons.
The submit button is specified using the following code, and is placed anywhere between the <form> and </form> elements:
<input type=submit>
When added to a form, the button's caption is automatically set to Submit. If you what to change it to something else, you can use the value= attribute, for example:
<input type=submit value="Click Here to Continue">
The following example demonstrates the use of a simple form containing only a submit button:
<html>
|
The sample above won't do anything because you need to specify a valid URL for the action= attribute and the form needs to contain data to submit. If, however, you preview the page, it will look something like this:
The Reset Button
You can add a reset button to your forms that when clicked, causes the form to be cleared and reset to the default values just like when the webpage first loaded. A typical reset button's code may look as follows:
<input type=reset value="Start Again">
Text Boxes
If you want visitors to your site to provide you with simple text entries, such as their name or email address, use text boxes. The basic format of a text box is:
<input type=text name="name for control">
The name= attribute allows you to specify a unique name for the text box. This is useful when your form's data is submitted to you as it enables you to tell the information they provide apart. For example, if you wanted to provide a text box for visitors to enter their email address, you could use the following code:
<input type=text name="email">
To add a label before the start of the text box so that the visitor knows what to enter, simply write it before the text box:
Enter your email address: <input type=text name="email">
The following example demonstrates the use of a simple form containing three text boxes, a submit button and a reset button:
<html>
|
When displayed in a Web browser, the example above would look something like this:
Default values: Text boxes can have a default value that appears when the webpage first displays and before the visitor types anything by using the value= attribute. For example, if you wanted them to type in their website's address, and you wanted to save them having to type http://, you would use the following code:
<input type=text name="Website" value="http://">
Setting the size: If you want your visitors to enter a long string of text such as a website address, or a short amount of text such as their postal code, you can size the text box appropriately using the size= attribute. The value of the attribute is the number of characters that should be displayed. For example, the following code produces a text box that's 4 characters long:
<input type=text name="Postcode" size=4>
Limiting the length of text: Sometimes you might like to limit the maximum number of characters a visitor can type. To do this, use the maxlength= attribute:
<input type=text name="Age" maxlength=3>
Text Areas
If you want visitors to be able to type large amounts of text, a standard text box is not sufficient since they only support a single line. In this case, you would use the <textarea> and </textarea> elements.
You can specify the size of the text area box based upon the number of lines using the rows= attribute and the number of columns using the columns= attribute.
Don't forget to specify the end element ( </textarea> ). Any text between the start and end elements becomes the default text.
Check Boxes
To allow users to enter yes/no or true/false information, use check boxes. A check box's code typically looks like this:
<input type=checkbox name="A name">
If you want a particular checkbox to be checked when the webpage loads, simply include the checked attribute. For example:
<input type=checkbox name="A name" checked>
Option Buttons
Also known as radio buttons, option buttons are used when a user can choose one option from multiple choices:
<input type=radio name="Group name" value="value">
The name= attribute provides the usual unique name, except in this case the same name is specified for all the option buttons - grouping them together. When option buttons are grouped, the web browser knows that only one of the buttons in the group can be selected at any one time. The value= attribute's value is submitted for the particular option button that is selected. You can specify which one of the option buttons is selected by default when the webpage first displays by adding the checked attribute to one of the option buttons in the group. Specify the label for each individual option button by writing it directly after the element.
The following example demonstrates the use of two option button groups in a form:
<html>
|
When previewed in a browser, the above example will look something like this:
Scrolling and Drop Down Lists
Although radio buttons are suitable for a small number of options, they are difficult to manage if there are more than around four per group. In this instance, lists are more suitable. An example of a list's code is as follows:
<select name="List Name" size=3>
|
As you can see, the actual list is defined using the <select> and </select> elements, while the options within the list are defined between the <option> and </option> elements. Adding the selected attribute to any of the <option> elements, causes that element to be displayed as default.
The size= attribute specifies the number of items that are visible before a scroll bar is displayed by the browser so that the user can see more options. If the size= attribute is omitted, the control becomes a drop-down list.
Submitting your Forms
At the moment you can produce forms, but you have no way of submitting them. You will need to use a special program that is usually stored on the computer that hosts your website. As these programs are usually produced by your web hosting provider, the method of making them submit your forms will differ. You will need to contact your web hosting provider for more information.
If your web hosting provider does not support these, there are a number of free programs available for you to use on the Internet.
Hidden Fields
You can also add hidden fields to forms that aren't displayed by the browser, but are submitted with the form. They have a number of uses, usually specific to the form handling program you are using. A sample hidden field is shown below:
<input type=hidden name="sendto" value="anyone@anydomain.com">
Where to from here?
Forms make it easy for visitors to contact you. In the next chapter, Chapter 8: Frames, you will learn about frames - a concept that will significantly ease the development process for large websites.
