unusual uses of forms

Forms, like tables, are starting to crop up in applications well beyond the original intention of HTML's designers. The obvious useful things they offer are:

• Clickable screen elements that can easily be combined with JavaScript events - in other words, buttons - which therefore offer a more intuitive form of interactivity than using images as links (or use boxes, via the onFocus event)
• Scrolling text boxes which provide a non-browser-dependent way of getting inline frames on the screen.

There are many JavaScript events which apply to forms. onClick is an obvious one, and can be included in any button. We saw some uses of that back in lecture 8. But do also bear in mind onSelect (also onFocus or onBlur which are essentially identical). onSelect can be included in any form element, so as you move around a form you could, perhaps, cause an image to update accordingly. (Do remember the advice not to ever present information solely in image form, however.) Finally there is onSubmit which causes something to happen when the form is submitted. An obvious thing to do would be to load a new page which thanked the reader for submitting the form. Whether this would work also depends on how the form is being processed - if it brings up a mail client, there might be problems - but it's a possibility anyway.

The page on the <script> tag shows you further possibilities with forms, such as the calculator, and the screen colour changer.

There are a few possibilities opened up by the <textarea> tag. It's not always that easy to use, because the rows and cols attributes are rather imprecise. However, if you have a look at this online game in the second browser window, you might get an idea of the possibilities. The page combines the use of multipart images, rollover images and form tags as mentioned, and might keep your average four-year-old entertained for a few minutes. I admit, by the way, that I've blatantly disregarded a lot of things I usually nag about, e.g. making things relative rather than fixed width, allowing for those who can't use images but goddamnit, sometimes you just want to have a bit of fun!

Here's a JavaScript which can be adapted to work for any number of fields on a form. If you have a form element which you want to make compulsory, add the following script to the document header. yourname and email are the names of the compulsory fields in this case and should be changed according to the names of your own form elements:

<script language="JavaScript">
function checkForm(theform){
   if(isEmpty(theform.name.value)){
      alert('Please enter a value into the \'name\' field.');
      theform.name.focus();
      theform.name.select();
      return false;
      }

   if(!isEmail(theform.email.value)){
      alert('Please enter a valid email address.');
      theform.email.focus();
      theform.email.select();
      return false;
   }

   return true;
}
</script>

Note the two different checks being made here, isEmpty and !isEmail. isEmpty is straightforward enough- !isEmail checks to see if there are two portions of the address separated by an @ sign, but doesn't go so far as to actually check the e-mail address exists.

In the <form> tag, you need to add: onSubmit="return checkForm(this)" to activate the script.

The page in lecture 10 which deals with alternative menus has a couple of form-related ones: the drop-down menu, which uses selection boxes, and the use of buttons as links. With judicious use of styling these could be integrated quite well into the look and feel of your page, and unlike images, are more likely to render correctly even on minority or special browsers.

Finally let me show you another script, which shows you how you can place a form of multiple-choice questions on your page which the browser will "mark" when you press Submit. The script won't show you the right answers, but it will give you a score, and is quite neat and elegant. The author is Aaron Connelly - do view the source code to get a copy of the script and see what it is you need to change to use this script yourself. Note this is not how the "self-tests" which appeared in earlier lessons are coded; they use some CGI, which is introduced on this lesson's last page.

Back to the top

Back to the menu for lesson 9