True Navigation Buttons

Using Forms and Buttons for Navigation

(First Draft)

Forms and Buttons can be the basis of a unique and very effective site navigation system, as this site demonstrates, but there are special considerations that should be taken when using them. Attempting to use a Designer on your pages, that is not or can not be correctly configured, can result in your perfectly valid code being modified so that it is no longer valid and/or no longer works. Some search engine bots may not be able to follow your links and scan your pages, unless you provide an alternative for them. Some users can be slightly confused by the concept initially, but almost all I have talked to really like it when they become used to it.

Forms and Buttons are also significantly lighter weight than image based navigation systems, which results in faster pages. The double row Tab Strip on the top left of this page is only about two and a half kilobytes in size and currently has thirteen buttons. That is tiny in comparison to what it would be if done with images, even if they were background images with the text on top of them. Forms and Buttons can definitely be used for an efficient navigation system.

One element of good page design can be providing navigation options for the pages viewers. Providing optional navigation mechanisms can often enhance a pages usability and provide optional paths for search engine bots. This site does that through the icon type links in the main section of its menu pages.

If optional navigation paths don't work for your site, there are other ways to deal with the search engine bot problem. One of the simplest is to create a sitemap.htm page containing text links to all the pages on your site that you want to have scanned for content. Create an invisible (or visible if it works for your site) link to it on your sites start page. The bots will use it to find all the pages you want them to. If your site is small you can skip the sitemap page and just create invisible links to each page you want scanned. Invisible links can be created by having the link contain an image tag with zero valued height and width attributes.

Basic Navigation Button Example:

The action attribute of the form tag specifies the page and/or bookmark the button will navigate to. The method attribute of the form tag must be get for the navigation to work. The post method can be very problematic with most browsers. The input tag creates the button. The type attribute of the input tag must be submit as this is what causes the form's action to occur. The value attribute of the input tag specifies the text you want to be visible on the button. Both tags can have CSS applied to them for appearance control and the input tag can have a title attribute for a tool tip.

A little warning about CSS and Form Button appearance. Buttons can look different in different browsers. CSS can have different effects on buttons in different browsers. You should test pages using CSS on buttons in a range of browsers before feeling confident that their appearance will be acceptable.

Form buttons can also be used to launch scripts. If they are to be used for this purpose their type should be button, not submit. All that is needed to do this is the addition of an onclick attribute and appropriate value to the input tag. There are useful examples of how to do this and what can be done in the top row of the navbar in the source code for this page.

A final warning. You may be tempted to use a location.replace, a window.navigate or some similar stuff in an onclick attribute for navigation. Don't do it! It is not reliable and navigation needs to be as reliable as possible!

Have fun with it if you can,

JimD