In our previous lesson, we used prompt to get information from the viewer of our page. In this example, we will use fill-in forms to allow the user to type in information.

Click here to see an example.

Here is the source code:

<HTML>
<HEAD>
</HEAD>
<BODY>
In this example, we will use a form with an input box to
get information from the user.
<BR>
<P>
<FORM NAME="getinfo">
What is your name?
<INPUT TYPE="text" NAME="yourname">
<BR>
<INPUT TYPE="button" VALUE="Press Here"
onClick="alert('hello ' + document.getinfo.yourname.value);">
</FORM>
</BODY>
</HTML>

The line

<INPUT TYPE="text" NAME="yourname">

set up the input box so that the user can type in some text. The input box is given a NAME so that we can refer to it later. In fact, if you notice, in this example the FORM itself was given a NAME:

<FORM NAME="getinfo">

The input box itself is just an empty box. In order for the person using the form to know what to type in, we have some plain HTML telling him to enter his name.

When the user is done typing in his information, he would use the button to indicate to the browser that he is ready to have this information processed. The onClick action of the button tells the browser what to do. In this example, we have

<INPUT TYPE="button" VALUE="Press Here"
onClick="alert('hello ' + document.getinfo.yourname.value);">

so the browser is directed to pop up an alert box. The message displayed in the alert box uses the information that the user just typed in:

document.getinfo.yourname.value

refers to the part of the document that that we named "getinfo" (which was the name of the form), and further specifies that we are looking at the part of the form that was named "yourname" (which was the name we gave to the input field) and finally says that we want the actual value of that input field. The value is the text that the user typed in. So the message displayed in the alert box will say "hello " followed by the person's name.