WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (1/8)
Beyond HTML Goodies, chapter 6
It isn't just important that your forms look good; they also need to provide a service and be helpful for the viewer. This chapter provides the following tips and tricks to enhance your forms to make the user feel better about him or herself:
- Submit When Finished
- Limiting Check Box Choices
- Select Boxes: If This . . . Then This
- Copy to Clipboard
- Select Box Links Menu
- Hidden Password Protection
- Array Password Protection
Submit When Finished
Okay, form fans, this is one that you've been requesting for a long time now. It's not that I've been ignoring your requests, it's just that . . . well . . . okay, I've been ignoring your requests. Sorry! I'm on it now.
Here's the concept: You have a form. You ask your user to fill it in and then submit it. Many of you want the form to submit all by itself when the user presses Enter. I never saw any great benefit to this as part of a guest book form. There are too many items to fill in, and what if the user fills in the last item out of order? Then you'd get a half-finished form submitted. That's not good.
You can find this tutorial, and all of its examples, online at http://www.htmlgoodies.com/beyond/submitwhendone.html.
You can download just the examples at http://www.htmlgoodies.com/wpg/.
I'm presenting this tutorial as a single form element submit, like a database search or a simple email or name submit. You can see those all over the place now because everyone wants to put out a newsletter, including me. The single form element is there to capture the user's email to add it to the list of those getting the newsletter.
This is the basic form you'll get. Notice that there is no Submit button.
The Form Code
We'll start with the form code.
The form code is no different than any other form you've created before. The
form tag offers a
METHOD, and then the
ACTION. I have this one set to work as a simple
mailto: form, but it can just as easily work by attaching the output to a CGI. Just put the path to the CGI right there after the
ACTION, like you normally would. The name of the form is "
theform". How's that for originality, huh?
INPUT TYPE is a text box. Its
NAME is "mardi". It's set to a size of
30 and a
The next snippet of text is the clincher. See that
The form, of course, wraps up with the required
Here it is one more time:
The script is super simple. It's a function triggered by the
onUnfocus Event Handler in the form element. Remember that? The command
onUnfocus works when focus is taken off an element. You probably could have guessed that. What is the movement that takes focus away from the form element? Why, it's the user pressing
Enter. See how it all works?
After focus has been put on and then taken off the text box, the line
document.theform.submit() fires up. This is the hierarchy line that takes the content of something called "
theform" and submits it as if you clicked a submit button.
That's really all there is to it.
You can pretty much plop this on your page anywhere you want it, but I would suggest putting the function up in the head commands if you can.
This is a clever trick, but remember that you might run into trouble if you use it as part of a larger script. Stick with single elements like I showed previously, and you'll do just fine.
Created: August 9, 2002
Revised: August 9, 2002