Hi! What's your name?
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>'"
(Hit Tab or Enter/Return or click off the field to submit name.)
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').innerHTMLrefers 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