< Tutorials Home

Using Forms

Introduction to Forms introduces the elements of forms -- buttons, text boxes and the like. In this tutorial, we look at some practical uses for forms:

Navigation using buttons
Menus with selection lists
Password protecting a page

Another common use of forms -- form mail scripts is a sufficiently large topic that it now has a whole page to itself.

Navigation using buttons

Introduction to Forms gives some examples of outline styles and colors that you can apply to buttons. Here we'll take a small set of "System" buttons and show how to navigate around a few pages of this project -- and around the pages of your project.

First, we need a button on a new form that we named formNavBtns:





It does nothing other than look pretty. Yet!  It has a hover color built into it. In preview, hover your mouse over it and you should see a color change -- whose exact nature depends on the browser you are using.

As we'll use this button to navigate to the home (index) page, let's name it "Home" in the Value field.

Then add this code to the Code field of the button:

  onClick=document.location='index.html'

This is saying when your visitor clicks the button (the onClick event), set the displayed page (document.location) to be the index page. Here is a copy of the button with these two features added:





If you preview, you will see that it now works. Click it, and to get back here, use your browser "Back" button.

It would be nice if the cursor changed to a hand as you mouse over it -- that way your visitor has confirmation that it is a link. To do this, we'll create a CSS class that specifies the hand as a cursor. Then we'll apply the class to the nav buttons -- wherever we use them.

Let's have a special class of button with this cursor change feature -- we'll name the class "navBtn".

We need to tell each button that it belongs to this special class. Do so by adding, to the front of the existing code in the Code field, this extra code: class='navBtn' (with a trailing space). The whole code line now becomes:

  class='navBtn' onClick=document.location='index.html'

If you test this, you won't see any difference, because all we have said is that this is a button of class navBtn -- without yet saying that there is anything special about a navBtn.

Fix this situation by adding this Code Object (in CSS) to your page:
.navBtn {cursor:hand;}

Our code object on this page is just to the left -- invisible in preview. The code says that any object of class navBtn is to have a hand cursor whenever the visitor mouses over it.

With the navBtn class code on this page, we have added the class name to the button below. Try the preview of the button now, and notice that when you hover over it with your mouse, the cursor changes.

Now that has worked out successfully, you can invite a few button friends around and make a party of it! Extra buttons are just a copy of the starting "Home" button with these changes:

• The displayed name -- change in the Form Editor button tab Value field
• The location page name -- change in the Code field

Some extras are below. If in doubt about what to do, double-click a button to open it in the Form Editor -- then view the fields that we have set.

See also: Buttons



Menus with selection lists

The examples below show two ways of making simple menus with selection lists.

The menu here is in a new form with the Form Name  "formMenu".

The Go button is a resized standard button with the "Go" text added to the Value field. It has the Outline Style of "system".

There some extra information in the Code field -- the onClick event handler. This is saying in effect: if the Go button is clicked, go and do "this stuff" with "this stuff" being the full action that is required . Let's look at the full text of the event handler:

onClick="document.location=document.formMenu.PageList.options    [document.formMenu.PageList.selectedIndex].value"

That is a bit of a handful, so let's break it down. You already know about the onClick part, so let's examine the rest.

document.location= -- change the name of the page to be displayed.
document.formMenu.PageList.options -- read the options list of the selection box.
[document.formMenu.PageList.selectedIndex]. -- get the index number of the item selected.
value -- read the text against that index item.

The text happens to be a page name, because we put it there when we filled out the box -- something like Import.html. So the code stuffs that name into the document location, and that displays the new page in the old window.

If you don't fully understand that, don't worry. All you need to do is cut and paste the code and use it in your own menu. Then change the:
formMenu.PageList which occurs in two places as follows:
formMenu change to be the name of your form
PageList change to be the name of your selection list -- it appears in the Selection List tab > Name field.

See also:
Drop-Down menus

Password protecting a page

The password in the Page Editor is not very attractive in operation. This one gives a comparable level of security, but can be dressed up better.

The password is actually the page name and as that is not hidden in the code, no one will find it by looking into the page.

The first step is to give your page a secret name -- like Secret127 -- something that nobody is likely to guess.  Make this page as part of your project, making sure there are no links to it. When published, it will have a name of Secret127.html. The password to the page will be Secret127 -- the same as your raw page name.

There is a page in this project called Secret127, so you can preview and enter the password.

Caution: a secret page is secret only as long as nobody links to it. That means that you should not have any links from the secret page to pages outside your site. A referrer tag  (the URL of your page) is sent to any site you link to, and if that site publishes a log of referrers, your secret page won't be so secret any more.

Login please:

The form itself

Here's how to set up a form to allow your visitor to enter the password. The essential elements here are:

• a text box which could also be a password box; and
• a Go button

Building the basic form is the same as we covered previously, but with some changes.

The form has a new Form Name to distinguish it from the other forms on this page. This time we called it "formPass".

The form has a URL (Action) of javascript:location.href=formPass.Pass.value+'.html'. Let's translate that:

• Go to the form whose name is formPass
  
• In that form, go to the text or password box whose name is Pass
  
• Look up the value in the Pass box (the entered password)
• Add .html to the entered password to give a page name
• Finally go to the new page name -- this is done by the location.href part.

Text box
Give the text box a name of Pass. This must exactly match the name in the Javascript code.
 
 
Go button
Give the Go button a name (unimportant) and set its type to Submit This means that when your visitor clicks the button, the URL (Action) for the form will be executed.

See also:
Introduction to Forms
Form mail scripts -- tell your web host what to do with form data