Generally, the most compelling reason people have to use JavaScript for web pages is to allow interaction with users. In order to do this, you need to have a way to gather information from the users. There are a number of ways to do this, but forms are the most common because they are the most versatile. Once you have gathered information from the user, you need to have a way to display your reaction back to the user. JavaScript provides a number of ways to do this as well, the simplest and most versatile is probably to use the HTML DOM (Document Object Model) innerhtml property.

The following example asks the user for their name and responds back with a personalized greeting. You will notice that you don't see any <script> tags – this is because technically this is not a JavaScript example, all of the input, processing and output is done using the HTML DOM. However, if you wanted to do more complex (i.e. interesting) processing of the information you got from the user, you could do so using JavaScript.


<div id="Greeting">
Hi! What's your name?
<form action="user_input.html">
<input name="username"
id="username"
type="text" label="User's Name"
onchange="document.getElementById('Greeting').innerHTML = '<center> <a href=\'http://misspico.wordpress.com\'> <img src=\'http://tinyurl.com/2jqd82\'> </a> <br/> Hello ' + document.getElementById('username').value +'! Nice to meet you! - Pico </center>'"
</form>
(Hit Tab or Enter/Return or click off the field to submit name.)
</div>


You can see this example in action (or download the code) here.

There are a couple of key features here. You will notice that all of the HTML code is within a <div> element and that the id attribute is used on several of the attributes. The HTML DOM includes a method called "getElementByID()" that allows you to identify a specific tag by the value of its id attribute. We will use this twice, once to retrieve the user input from the form, and once to set a new value for the contents of the <div> tag.

Pretty much all of the work of this code sample takes place in the <input> tag, and within the tag, the id and onchange attributes provide for the interactivity. The id attribute is used so that we can find and refer to this tag within the HTML DOM. The onchange attribute is an HTML DOM event, its value is an action to be taken when the event occurs (in this case the contents of the text input box is changed.) document.getElementById('Greeting').innerHTML refers to the contents of the tag with an id of Greeting, in this case the <div> tag that holds the input field and directions. Setting this to a new value changes what is displayed within that tag in the document. We set this to some predetermined HTML (remember tags can be nested in HTML) and the user's name. Of course, we don't know what the user's name is in advance. We do, however, know that it will be in the input box with an id of 'username' – this is referred to as document.getElementById('username').value.

This is very simple interactivity, but when you combine this with some JavaScript you can create some very interesting web pages.