As you can see, most of the form elements are created using the <INPUT> tag. One of the <INPUT> tag's attributes is the TYPE attribute. It's this attribute that decides which of the HTML elements this will be. Examples of values for this attribute include button, to create a button, and text to create a text box.

Each form element inside the web page is made available to us as, yes, you guessed it, an object. As with all the other objects we have seen, each element's object has its own set of distinctive properties, methods and events. We'll be taking a look at each form element in turn and how to use its particular properties, methods, and events. But, before we do that, let's look at properties and methods that the objects of the form elements have in common.

Common Properties and Methods

One property that all the objects of the form elements have in common is the name property. We can use the value of this property to reference that particular element in our script. Also, if we are sending the information in the form to a server, then the element's name property is sent along with any value of the form element, so that the server knows what the value relates to.

Most form element objects also have the value property in common, which returns the value of the element. For example, for a text box the value property returns the text that the user has entered in the text box. Also, by setting the value of the value property, it allows us to put text inside the text box. However, the use of the value property is specific to each element, so we'll look at what it means as we look at each individual element below.

All form element objects also have the form property, which returns the Form object in which the element is contained. This can be useful in cases where you have a generic routine that checks the validity of data in a form. For example, when the user clicks a submit button, we can pass the Form object referenced by the form property to our data checker which can use it to loop through each element on the form in turn, checking that data in the element is valid. This is handy if you have more than one form defined on the page or where you have a generic data checker that you cut and paste to different pages – this way you don't need to know the form's name in advance.

Sometimes it's useful to know what type of element you're dealing with, particularly where you're looping through the elements in a form using the elements[] array property of the Form object.

This information can be retrieved using the type property, which each element's object has. This property returns the type of the element, for example button or text.

All form element objects also have the focus() and blur() methods. Focus is a concept you might not have come across yet. If an element is the center of the focus then any key presses made by the user will be passed directly to that element. For example, if a text box has focus, then hitting keys will enter values into the text box. Also, if a button has the focus, then hitting the enter key will cause the button's onclick event handler code to fire, just as if a user had clicked the button with their mouse.

The user can set which element currently has the focus by clicking on it or using the tab key to select it. However we, as the programmer, can also decide which element has the focus by using the form element's object's focus() method. For example, if we have a text box for the user's age to be put into and the user enters an invalid value, such as a letter rather than a number, then we can tell them that their input is invalid and send them back to that text box to correct their mistake.

Blur, which perhaps could be better named 'lost focus', is the opposite of focus. If we want to remove a form element from being the focus of the user's attention, then we can use the blur() method. The blur() method, when used with a form element, usually results in the focus shifting to the containing window.

As well as the focus() and blur() methods, all the form element's objects have the onfocus and onblur event handlers. These are fired, as you'd expect, when an element gets the focus or loses the focus, due to user action or the focus() and blur() methods. The onblur event handler can be a good place to check the validity of data in the element that has just lost the focus. If invalid you can set the focus back to the element and let the user know why the data they entered is wrong.

One thing to be careful of is using the focus() or blur() methods in the onfocus or onblur event handler code. There is a danger of an infinite loop occurring. For example, consider two elements, each of whose onfocus events passes the focus to the other element. Then, if one element gets the focus, its onfocus event will pass the focus to the second element, whose onfocus event will pass the focus back to the first element, and so on until the only way out is to close the browser down. This is not likely to please your users!

Also be very wary of using the focus() and blur() methods to put focus back in a problem field if that field or others depend on some of the user's input. For example, say we have two text boxes, one in which we want the user to enter their city and the other in which we want them to enter their state. Also say that the input into the state text box is checked to make sure that the specified city is in that state. If the state does not contain the city, we put the focus back on the state text box so that the user can change the name of the state. However, if the user actually input the wrong city name and the right state name, they may not be able to go back to the city text box to rectify the problem.

Button Form Elements

I'm starting our look at form elements with the standard button element, as it's probably the most commonly used and is fairly simple. The HTML tag to create a button is the <INPUT> tag. For example, to create a button called myButton, which has the words Click Me on its face, the <INPUT> tag would need to be:

<INPUT TYPE="button" NAME="myButton" VALUE="Click Me">

The TYPE attribute is set to button and the VALUE attribute is set to the text we want to appear on the face of the button. We can leave the VALUE attribute off, but we'll end up with a blank button, which will leave our users guessing as to its purpose.

This element creates an associated Button object; in this example it is called myButton. This object has all the common properties and methods described above, including the value property. This allows you to change the text on the button face using JavaScript, though this is probably not something you'll need to do very often. What the button is really all about is the onclick event.

We connect to the button's onclick event handler just as we did for the onclick events of other HTML tags such as the <A> tag. All we need do is to define a function that we want to execute when the button is clicked (say, button_onclick()) and then add the onclick event handler as an attribute of the <INPUT> tag:

<INPUT TYPE="button" onclick="button_onclick()">

Try It Out - Counting Button Clicks

In the example below we use the methods described above to record how often a button has been clicked on the button face.

<HTML>
<HEAD>

<SCRIPT LANGUAGE=JavaScript>

var numberOfClicks = 0;

function myButton_onclick()
{
  numberOfClicks++;
  window.document.form1.myButton.value = 'Button clicked ' +
  numberOfClicks + ' times';
}

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
  <INPUT TYPE='button' NAME='myButton' VALUE='Button clicked 0 times' 
  onclick="myButton_onclick()">
</FORM>
</BODY>
</HTML>

Save this page as ch6_examp2.htm. If you load this page into your browser, you will see a button with Button clicked 0 times on it. On repeatedly pressing this button, you will see the number of button clicks recorded on the top of the button.

How It Works

We start the script block in the head of the page by defining a global variable, accessible anywhere inside our page, called numberOfClicks. We record the number of times the button has been clicked in this variable, and use this information to update the button's text.

The other piece of code in the script block is the definition of the function myButton_onclick(). This function is connected to the onclick event handler in the <INPUT> tag in the body of the page. This tag is for a button element called myButton, and is contained within a form called form1.

<FORM NAME=form1>
  <INPUT TYPE='button' NAME='myButton' VALUE='Button clicked 0 times' 
  onclick="myButton_onclick()">
</FORM>

Let's look at the myButton_onclick() function a little more closely. First, the function increments the value of the variable numberOfClicks by one.

function myButton_onclick()
{
  numberOfClicks++;

Next, we update the text on the button face using the Button object's value property.

  window.document.form1.myButton.value = 'Button clicked ' + 
  numberOfClicks + ' times';
}

The function is specific to this form and button, rather than a generic function we'll be using in other situations. Therefore I've referred to the form and button directly using window.document.form1.myButton. Remember that the window object has a property containing the document object, which itself holds all the elements in a page, including the

 
<HTML>
<HEAD>

<SCRIPT LANGUAGE=JavaScript>

function myButton_onmouseup() 
{
  document.form1.myButton.value = "Mouse Goes Up"
}

function myButton_onmousedown() 
{
  document.form1.myButton.value = "Mouse Goes Down"
}

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
  <INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up ' 
  onmouseup="myButton_onmouseup()"
  onmousedown="myButton_onmousedown()">
</FORM>
</BODY>
</HTML>

<FORM NAME=form1>
  <INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up ' 
  onmouseup="myButton_onmouseup()"
  onmousedown="myButton_onmousedown()">
</FORM>

<INPUT TYPE="submit" VALUE="Submit" NAME="submit1">
<INPUT TYPE="reset" VALUE="Reset" NAME="reset1">