Creating web page forms

HTML forms are popular for collecting information from the user, so online forms are used for user’s input. Before we start creating forms, you need to be aware of how forms are processed on the web. To collect information from a user, you need to:

1. use HTML code to create the form with the information you are requesting the user to provide
2. use a web programming language (such as ASP, PHP, Perl, etc.) to process that form

By using HTML, you can only create a form. To collect (or process) the information from a form, you will need to use a web programming language. To create a form use the <form> tag and use </form> tag to end the form. (Click here to learn more about creating a <form> tag.) Between the <form> and </form> tags, you specify the form elements (see table 1). For details about a creating a specific element, simply follow the link for that element under “Field type” below.

Creating the form tag

To create web page forms, you will need to use the <form> tag. The <form> tag is a two-sided tag, which means it start with <form> and ends with </form>. All of your form elements must be placed inside the opening form tag and the closing form tag. The <form> tag has three properties (or attributes) that control how and where the form is processed. Those properties are summarized in table 1.

The following, for example

<form name="Test" method="post" action="creating-web-page-forms.asp">

creates a form named Test, sets method to post, and sets the action to a file called creating-web-page-forms.asp. Let’s go dicuss the details of this example.

The above code creates a form because we are using the <form> tag. Anytime we want to refer to this specific form, we will use the name “Test.” Note the name property is necessary only if you have more than one form on a single web page. If you had more than one form on a single web page, by using the name attribute for each form to assign a different/unique value to each form will help the server to determine which specific form you are working with.

The method=”post” states that we want to send the information to the server using the post method. Basically, the whole purpose of the post method is to determine whether or not you want to add the form data to the end of the URL. If you use the get method, the information that the user submits is added to the end of the URL. Suppose you are using the get method for a form to ask the user for his/her number of years of experience in HTML. Let’s say the user enters or selects 5 years and submit the form. After the form is submitted, the URL will automatically change to something like http://www.scriptbuzz.com/creating-web-page-forms.asp?&HTMExp=5.

In other words, before the form is submitted, the URL of the web page would be http://www.scriptbuzz.com/creating-web-page-forms.asp but after the form is submitted it will change to http://www.scriptbuzz.com/creating-web-page-forms.asp?&HTMExp=5. The get is not desirable for situations where you are asking the user for his/her social security number or any other personal information as it will be visible in the URL. Depending on the form, the URL could become very long. There are, however, advantages of using the get method. First of all, once the user enters and submits the form, the user could repeatedly use (by saving the URL as favorites) the same URL without reentering the requested information. A typical example would be of finding driving directions on MapQuest or Yahoo! Maps.

In comparison, the post method does not add the information collected from the form to the end of the URL of the web page.

In the example, the action specifies that the form data should be sent to a file called creating-web-page-forms.asp. In this file, the form data will be processed (checked for validity, stored to a database, etc).

Creating a text box

To create a text box (also called input box), use the <input> tag and set the type attribute to “text”. See table 3 for two examples. In the first example, our HTML code starts the form with the <form> tag. Inside this form tag, we placed an input box by using the <input> tag. The output of this HTML code is shown on the right hand side. In comparison, our second example is more informative as we let the user know what the user is supposed to type inside the input box. We ask the user to enter their first name. If we don’t tell the user what we are asking the user to type inside the input box (like in the first example), the user could type nothing or anything! So to avoid that, use a small description for your text boxes.

In the second example, in addition to the type attribute, we used the name attribute. The purpose of this name attribute is to identify the value for this input box to our processing script. Thus the name attribute does not affect the display of the input box but only aids in processing of the form data.

Controlling the size of a text box

By default, text boxes have the same size – 20 characters wide. This default size may not work in all situations. When, for example, the user is suppose to enter the telephone area code into a text box, that text box should be wide enough to enter only the first three digits (for US area codes). In other cases, the default text box size may not be wide enough. So to resolve these issues, you can add the size attribute to your input box, as

Area code : <input type="text" size="3" >

which will result in

For an address input box, you may choose to set the size of the text box to 50 with

Address Line 1 : <input type="text" size="50" >

to get

Setting the maximum width for a text box

As you may have noticed earlier, the size attribute only affects the displayed width of a text box but it does not limit the number of characters that could be entered into the text box. So if we are expecting at most three characters for an input, set the size of the of the text box to 3 and the maxlength of the text box to 3 as well. If you don’t use the maxlength attribute to limit the number of characters to be put into the text box, any text longer than the designed text box will automatically start to scroll to the left.

The following HTML code

Area code : <input type="text" size="3" maxlength="3" >

prodcues

to limit both the size and maxlentgh of the text box to be 3.

Setting a default value for a text box

With value attribute, you can set a default value for your text box. If you set a default value for a text box, when the form is loaded, that default value inside the text box is displayed. But why would you want to use the value attribute to set a default value for a particular text box? Well, the idea is to use a default value when you are certain for some particular input the value is always almost the same. An example could be setting the default value to 57464 for a zip code field, if we know that most visitors who fill out the online form are from that zip code. T

he following HTML code

Zip code : <input type="text" size="5" maxlength="5" value="57464" >

creates a text box

with a preset value of “57464” for the zip code. A user can always override the default text box value by deleting the default displayed text, if needed.

Creating a password box

A password box (also called password field) is similar to a text box except that the typed characters are displayed as bullets (on Windows) or asterisks (on Mac). To create a password box, we use the <input> tag and set the type attribute to “password”, as shown below.

Password: <input type="password">

The following shows the output of our code:

If you type any characters in the output password box shown above, you will observe that the character are replaced with bullets or asterisks. Notice in the example, we tell the user what to enter (i.e., a password) in the box. If you do not tell what the user is suppose to enter, the user may enter nothing or anything.

Check Here >> Password Generator Tool

The size attribute

By adding the size attribute to the <input> tag, you can control the width of the box. If you require a password that is typically 6 to 10 characters long, do not set the size attribute to 5 (as this will make the box small) or 20 (as this will make the text box big). Instead, you may set the size attribute to 10 or 11. See an example:

Password: <input type="password" size="10" >

Creating radio buttons

Radio buttons are used for allowing the user to select an option from a list of choices. A radio button is created with the <input> tag and the type attribute set to “radio”, as shown below:

<input type="radio">

which produces .

Note to make sure the user can select a radio button, we need to make sure that we add the name attribute to the <input> tag. Since we do not have the name attribute in the above example, it cannot be selected. In the following example, we use the name attribute:

Select gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

which will produce:

To ensure that the user selects an option before the user submits the form, make one of your radio buttons checked by default by adding the checked attribute. The following shows the example by using the previous gender example:

Select gender:
<input type="radio" name="gender" checked> Male
<input type="radio" name="gender"> Female

to produce

When you process the form, it is important to know which option the user selected. Otherwise, you won’t know what the user selected. To determine which gender the user selected, you can use the value attribute with each radio button.

Select gender:
<input type="radio" name="gender" checked value="M"> Male
<input type="radio" name="gender" value="F"> Female

Creating check boxes

A check box is either selected or not. Unlike radio buttons, check boxes can be deselected. A check box, for example, can be unselected if the user clicks inside the check box. On the other hand, a radio button cannot be deselected if you click on the radio button. A radio button can be deselected by clicking on some other radio button choice.

To create a check box, use the <input> tag and set the type attribute to “checkbox” as:

<input type="checkbox"> A choice

That will produce:

Naming a check box

You can add the name attribute to a check box to identify it and to access the value of the check box when you process the form. The following,

<input type="checkbox" name="FavLang"> HTML

names our check box as “FavLang” and we would use that name to access what the user selected when the data is passed to the server. You do not have to use a different name for every check box you use, however. Related choices represented with check boxes can be grouped with a same name. In the following,

Choose your favortie coding langaguge(s):
<input type="checkbox" name="FavLang">HTML
<input type="checkbox" name="FavLang">ASP
<input type="checkbox" name="FavLang">JavaScript

we group our check boxes with a single name, “FavLang.” Or, you could have used a different name for each check box. Remember the names of your check boxes are not displayed on the web page; they are instead used to identify a check box or grouped check boxes. The following shows the output of the above HTML code:

Choose your favortie coding langaguge(s):

When you group check boxes together, remember to assign a different value to each check box. By assigning a different value to each check box, you are able to determine what the user selected and submitted to server. See the next section how to assign a value to each check box.

Setting a default value for a check box

By default, when a check box is selected and that choice is submitted to the server, the value of the check box is “on.” You can, however, assign a different value to a check box, by using the value attribute. For example, in the following

Choose your favortie coding langaguge(s):
<input type="checkbox" name="FavLang" value="HTML">HTML
<input type="checkbox" name="FavLang" value="ASP">ASP
<input type="checkbox" name="FavLang" value="JavaScript">JavaScript

we assign different values to each of the check boxes. The first check box, for instance, is assigned the value HTML. If the user selects the first choice, the server will receive the value “HTML” for the check box named FavLang. If the user selects more than one check box, each value for the selected check box will be sent to the server. If, however, the user does not select any check box, no value will be sent to the server.

Also Check >> YouTube Keywords Extractor

So far these check boxes, if the user selects the first choice, the value “ScriptBuzz” will be sent to the server, for the second check box, the value “google” will be sent to the server and for the third choice, the value “msn” will be sent to the server.

Allowing multiple selections for a check box

When a web form loads to a browser, the check boxes are deselected. However, as you can with radio buttons, you can set a default selected check box by adding the checked attribute to a check box. For instance,

http://www.scriptbuzz.com <input type="checkbox" name="FavoriteSite" value="Scriptbuzz" checked>
http://www.google.com <input type="checkbox" name="FavoriteSite" value="google">
http://www.msn.com <input type="checkbox" name="FavoriteSite" value="msn">

With the above HTML code, we specified that the first check box be selected when a web form loads to a browser. Remember a user can always deselect a default or any other check box, if needed.

Creating a selection list

With a selection list, from a user you can select none, one or more choices. A selection list comes in handy when you have many choices to display within a limited space. A selection list also is a convenient way to get fixed set of possible choices to prevent any invalid input or spelling mistakes.

A selection list starts with the <select> tag and ends with the corresponding closing tag: </select>. Each option or choice for your selection list is listed with the <option> tag. The <option> tag also is a two-sided tag, meaning you should close this tag with </option>. For instance, to create the following selection list,

you can use the following code:

Select your favorite web site:
<select>
<option>http://www.scriptbuzz.com</option>
<option>http://www.google.com</option>
<option>http://www.msn.com</option>
</select>

In a selection list, the name attribute is added to the <seletion> tag and the value attribute is added to each of the <option> tag. By adding the name attribute to the selection list, you use that name to find out what the user selected when the form is submitted. When a user submits a choice for a selection list, the value you asssigned, if any, to the <option> tag is submitted to the sevrer. Consider the following HTML code:

Select your favorite web site:
<select name="FavWebSite">
<option value="SM">http://www.scriptbuzz.com</option>
<option value="Google">http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
</select>

The output of this code is same as you saw above but by adding the name and value attributes we will be able to determine what the user selected. If the user selects the second choice, the value “Google” will be submitted to the server, for instance.

Sometimes, you want the user to select more than one items from a selection list. To allow the user to select multiple choices for a selection list, you can add the multiple attribute to the <select> tag. For instance,

<select multiple>
.....
</select>

would allow the user to select more than one option. By the way, the most common way of selecting more than one option from a selection list is to click on the first item in the range of items you want to select and then hold down the shift key and then click on the last item in the range of items you want to select. That will make a contiguous selection. If however, you want to make a noncontiguous selection, hold down the Ctrl key and then click each item you want to select from a selection list.

If your selection list is long, you may add the size attribute to set to a number greater than 1 to display more than one option from the selection list. For instance,

Select your favorite web site:
<select name="FavWebSite" size="2">
<option value="SM">http://www.scriptbuzz.com</option>
<option value="Google">http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
<option value="yahoo">http://www.yahoo.com</option>
<option value="microsoft">http://www.microsoft.com</option>
</select>

will display two options becasue the size attribute is set to 2:

Notice above two choices are shown. The vertical scroll bar can be used to display other choices. The vertical scroll bar is added automatically to a selection list. If, however, you set the size attribute equal to the number of options in a selection list, the scroll bar is either dimmed or not displayed. Consider the following, as an example:

Select your favorite web site:<br>
<select name="FavWebSite" size="5">
<option value="SM">http://www.scriptbuzz.com</option>
<option value="Google">http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
<option value="yahoo">http://www.yahoo.com</option>
<option value="microsoft">http://www.microsoft.com</option>
</select>

Output

Setting a default option for a selection list

By default, the first option in a selection list is selected; however this can be changed. To make an option selected (highlighted) in a selection list when the form is loaded to a browser, add the selected attribute to the <option> tag. For instance,

Select your favorite web site:<br>
<select name="FavWebSite" size="2">
<option value="SM">http://www.scriptbuzz.com</option>
<option value="Google" selected>http://www.google.com</option>
<option value="MSN">http://www.msn.com</option>
<option value="yahoo">http://www.yahoo.com</option>
<option value="microsoft">http://www.microsoft.com</option>
</select>

will make the http://www.google.com option selected by default:

Creating multi-line text areas

If you want the user to enter more than one line of text, you can define a text area instead of using just a regular text field. If you are asking the user to enter lengthy text such as suggestions you just need to use a text area because an input box may not be sufficient for lengthy input. To define a text area, use the <textarea> tag; as an example:

<form>
Comments or suggestions: <textarea></textarea>
</form>

The output of that code is:

If you wanted to adjust the size of the text box, you add two additional attributes to the <textarea> tag:

• rows — the rows attribute adjusts the visible height of the textarea. The rows attribute value should be entered as a number corresponding to the number of rows you want to be visible for the textarea.
• cols — the cols attribute adjust the visible width of the textarea. The cols attribute value should be entered as a number corresponding to the number of columns you want to be visible for the textarea.

Note: because the sizes of these attributes depends on the character width setting on the browser, the actual size of the textarea may vary. If the character width becomes longer (as the user types the data) than the size of the text area, scrollbar(s) should appear automatically.

Let’s define a text area of 3 rows (in other words, 3 lines) and 50 cols (in other words, 50 characters per line):

<form>
<textarea rows="3" cols="50"></textarea>
</form>

That will output:

Form processing

Whenever you want user’s input on the web, creating a form to collect that input alone is not sufficient. In order to receive user’s input on the web, we need to:

1. create a form that the user will use to enter data — this involves use of HTML
2. bring the data the user entered on his machine to the server for processing — this involves the use of a programming language (i.e., ASP, PHP, or JSP).

Bringing the data from the client’s machine to the server is commonly referred to as form processing. Form processing involves answering two questions:

1. How do you collect the data from the user?
2. What do you with the data you collect from the user?

For the first question, you have to decide the type of programming language you use to collect the data. You may, for example, use ASP, PHP, JSP to process the form data.

The answer to the second question may fall into one (or both) of these categories:

1. providing immediate results based on the user’s input
2. saving the collected data for further processing

Providing immediate results based on the user’s input

You may have used a search engine such as google.com, yahoo.com, or msn.com. When you type a search term in to one of the forms for these search engines, you get immediate results for you inquiry. The search engines use your search term to find the best match for your inquiry. This is processing.

Notice in this example the form processing serves a specific function that the user expects for his term. A form that you create for your website may also have to perform a specific function such as searching based on user’s input of a book title, providing contact information based on a user’s selection for a specific region, and if you have a specific camera that the user seeks in your stock. Before creating a form, consider what function your form will serve and how you would accomplish that function.

Saving the collected data for further processing

If the function of your form is to gather the user’s order details (such as type of items ordered, quantity, shipping address, billing information, etc.), you have to consider storing this information. Without the order details, you won’t be able to complete the order! Forms that deal with financial transactions (buying stocks, as an example) or user’s personal information (a user applying for a job submits a resume, as an example) should have data storage capability added to the processing of the form.

Check >> Online Notepad