Next page | Contents page |

Input

So far we have seen how we output to an HTML page, dynamically. Now we need to see how to get some input from the user.

We will take one small step first, to introduce two input text fields and a button inside our HTML body tag again:


  <label>First name: <input type="text" maxlength="8" id="first"></label>
  <label>Last name: <input type="text" maxlength="8" id="last"></label>
  <input type="button" onclick="enter()" value=" Enter ">
  <p id="result"></p> 

Notice how each label element has an input element nested within it. Input elements have many possible attributes but never have any content and so do not need ending tags.

The browser will display that HTML as

Notice also that the button tag introduces another event attribute called onclick. The meaning should be obvious: when the user clicks the button a JavaScript function called enter() is to be called. What should that function do? Something like this perhaps:


  function enter ()
  {
    var firstName = document.getElementById ("first").value;
    var lastName = document.getElementById ("last").value;
    document.getElementById ("result").innerHTML = 
	        "Hello " + firstName + " " + lastName;
  }

id or name?

Those who already know a bit about web applications might say we should have used attributes called name rather than attributes called id on the input and button tags. There is a good reason for that (because name attributes become HTTP request parameters) and if you do go on to develop web applications, involving code on servers, you should indeed find out how to use name attributes. However, for the purposes of this course, working only on the programmer's own computer, the slightly simpler method shown here using id attributes will suffice.

Next page | Contents page |