A text box is created using the <INPUT> tag, much as our button was, but by setting the TYPE attribute to text. Again, you can choose not to include the VALUE attribute, but if you do include it, then this value will appear inside the text box when the page is loaded.

In the example below, the <INPUT> tag has two additional attributes of SIZE and MAXLENGTH. The SIZE attribute determines how many characters wide the text box is, and MAXLENGTH determines the maximum number of characters the user can enter into the box. Both attributes are optional and use defaults determined by the browser.

For example, to create a text box 10 characters wide, with a maximum character length of 15, and initially containing the words ‘Hello World’, our <INPUT> tag would be as follows:

 <INPUT TYPE="text" NAME="myTextBox" SIZE=10 MAXLENGTH=15 
VALUE="Hello World"> 

The Text object that this element creates has a value property, which we can use in our scripting to set or read the text contained inside the text box. In addition to the common properties and methods we discussed earlier, the Text object also has the select() method, which selects or highlights all the text inside the text box. This may be used if the user has entered an invalid value, and we can set the focus to the text box and select the text inside it. This then puts the user’s cursor in the right place to correct the data and makes it very clear to the user where the invalid data is.

The value property of Text objects always returns a string data type, even though it may be that number characters are being entered. If we use the value as a number then JavaScript normally does a conversion from a string data type to a number data type for us, but this is not always the case. For example, JavaScript won’t do the conversion if the operation you’re doing is valid for a string. If we have a form with two text boxes and we added the values returned from these, JavaScript will concatenate rather than add the two values, so 1 + 1 will be 11 and not 2. To fix this, we need to convert all the values involved to numerical data type, for example by using parseInt() or parseFloat(). However, if we subtracted the two values, an operation only valid for numbers, then JavaScript says “ah ha this can only be done with numbers so I’ll convert the values to a number data type”. So, 1 – 1 will be returned as 0 without using parseInt() or parseFloat(). This is a tricky bug to spot, so it’s best to get into the habit of converting explicitly to save problems later.

As well as the common event handlers such as onfocus and onblur, the Text object also has the onchange, onselect, onkeydown, onkeypress, and onkeyup event handlers.

The onselect event fires when the user selects some text in the text box.

More useful is the onchange event which fires when the element loses focus if (and only if) the value inside the text box is different from the value it had when it got the focus. This enables us to do things like validity checks that occur only if something has changed.

As mentioned before, the onfocus and onblur events can be used for validating user input. However, they also have another purpose and that’s to make a text box read-only. In IE 4.0+ and NN 6 we can use the READONLY attribute of the <INPUT> tag or the readOnly property of the Text object to prevent the contents being changed. However, this won’t work on NN 4.x. We can get around this using the blur() method. All we need do is add an onfocus event handler to the <INPUT> tag defining the textbox, and connect it to some code that blurs the focus from the text box with the blur() method:

<INPUT TYPE="text" NAME=txtReadonly VALUE="Look but don't change" 

The onkeypress, onkeydown, and onkeyup events fire, as their names suggest, when the user presses a key, when they press a key down, and when a key pressed down is let back up.

Try It Out – A Simple Form with Validation

Let’s put all the above information on text boxes and buttons together into an example. In this example we have a simple form consisting of two text boxes and a button. The top text box is for the user’s name, the second for their age. We do various validity checks. We check the validity of the age text box when it loses focus. However, the name and age text boxes are only checked to see if they are empty when the button is clicked.



function butCheckForm_onclick()
  var myForm = document.form1;
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
   alert("Please complete all the form");
   if (myForm.txtName.value == "")
   alert("Thanks for completing the form " + myForm.txtName.value);

function txtAge_onblur()
  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
   alert("Please enter a valid age");

function txtName_onchange() 
  window.status = "Hi " + document.form1.txtName.value;

<FORM NAME=form1>
  Please enter the following details:
  <INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()" _
  <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm 

After you’ve entered the text, save the file as ch6_examp4.htm and load it into your web browser.

Type your name into the name text box. When you leave the text box you’ll see Hi yourname appear in the status bar at the bottom of the window.

Enter an invalid value into the age text box, such as ‘aaaa’, and when you try to leave the box it’ll tell you of the error and send you back to correct it.

Finally click the Check Details button and both text boxes will be checked to see that you have completed them. If either is empty, you’ll get a message telling you to complete the whole form and it’ll send you back to the box that’s empty.

If everything is filled in correctly, you’ll get a message thanking you.

       (Page 1)

Note that, at the time of writing, this example does not work properly on NN 6.