Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy JavaScript Form Design

By Stephen Bucaro

A form is an html element that allows users to enter information that can be used by the web designer to perform some local reconfiguration, or the information can be sent to the web server for processing. A form has five parts:

1. The form tags. These consist of an opening tag <form> and a closing tag <form>. All the forms elements are contained between these two tags.

2. Tags for the form's controls. A form usually contains several input elements where the user can enter their data, make selections, or execute the form. These may be text boxes, check boxes, radio buttons, a submit button, and any number of other controls.

3. The method by which the form's data will be submitted. This can be either by the post method, where the forms information is sent in HTTP format to the server, or the get method, where the information is sent in a query string attached to the URL. This configuration is defined by the method attribute of the form tag as shown below.

<form method="post"

4. The name of, and path to, the script or program on the web server that will handle the form's data when the user submits the form. This configuration is defined by the action attribute of the form tag as shown below.

<form method="post" action="scriptname"

5. The form's name. Each form on a webpage needs a name to identify it from other forms on the webpage. Each input control in the form should also have a name. These names are used to identify the data that is sent to the server. This configuration is defined by the name attribute of the form tag as shown below.

<form method="post" action="scriptname" name="myform">

If you do not give a form a name, it will be identified by its order in the forms[n] collection, which is a document object array of the forms on the webpage, starting with forms[0]. If you do give an input control a name, it will be identified by its order in the forms[n].elements[n] collection, which is a document object array of the elements in the form.

If you want to manipulate forms or form elements with Javascript or CSS, you can use their id attribute to give them a unique id. But each id must be unique within a page.

The Text Element

When you design a form, the html code for the entire form is placed between the <form> and </form> tags. Inside those tags, you might place a form "element"; for example, a text box. A text box is coded with the html <input type="text"> tag. Shown below is the html code for a text box input element.

<form>
Name: <input type="text">
</form>

Below is shown how a text element would appear on a web page.

The text element can contain several other attributes. The most commonly used are size, maxlength, and value. The size attribute is the number of characters wide the text box should be. The maxlength attribute defines the maximum number of characters the user is allowed to enter into the text box. The value attribute is default text that is displayed in the text box. Below is an example of the use of these attributes.

<input type="text" name="name" size="50" maxlength="64" value="default text">

The Submit Button Element

A form usually contains a Submit button input element. A Submit button is coded with the html <input type="submit"> tag. Shown below is the html code for a Submit button input element.

<form method="get" action="program.asp">
Name: <input type="text">
<input type="Submit">
</form>

Below is shown how a Submit button would appear on a web page.

Form Submit button

When the user clicks on the [Submit] button the form is submitted to the server, where the program in the the action element is executed. That program handles the data that the user entered into the form's input elements.

<form onSubmit="javascript:return false;">
Name: <input type="text" name="name" onkeypress="return event.keyCode!=13"><br /">
<input type="Submit" onclick="showForm(this.form)">
</form">

The code shown above is a slight modification of the previous code. The form's onSubmit event handler has code that prevents the form from being submitted to the server. This is to allow you to test the form with JavaScript rather than submit it directly to the server. In the text input tag, an onkeypress event handler prevent the form from being submitted if the user clicks the keyboard [Return] key after entering their name in the text box.

<script language="JavaScript">
function showForm(form)
{
   alert(form.name.value);
}
</script<

The Submit button's onclick event handler calls a function named showForm using the this keyword to pass the form object to the function. The JavaScript code for the showForm function (which should be placed in the head section of the webpage) uses an alert message box to display the contents of the form's text box.