Advanced Form Use

developed by: Harold Goldstein -- -- http://goldray.com/ http://goldray.com/forms/advforms.htm

The submit button can also send the user directly to another URL. (note method=get) This can also be done with an image (w/input type=image). The coordinates of the mouse are returned and can be used by a script.
	<form method=get action="http://goldray.com/webfolio.htm"> <input type="submit" value="Go to my Webfolio"> </form>
	<form method=get action="http://goldray.com/webfolio.htm"> <input type="image" src="back.gif"> </form>

A selection menu can also be used to select an URL using either a CGI script ( like jump.cgi in top example) or a javascript function (see switchURL used in jswitch2.htm example). More elegant, but 'ruder' is to put the javascript within the select as an onChange for an immdediate jump, as in the third example.
Goldray Webfolio DC Local Pages Winsock Software	<FORM method=get action="jump.cgi"> <select size=2 name="goto"> <option value="webfolio.htm">Goldray Webfolio <option value="dclocal.htm">DC Local Pages <option value="http://cws.iworld.com">Winsock Software </select><input type="submit" value="GO!"></FORM>
Top Choice Next Choice Last Choice	<FORM NAME="f1"> <SELECT size=3 NAME="pages"> <OPTION value="topone.htm">Top Choice <OPTION value="second.htm">Next Choice <OPTION value="third.htm">Last Choice </SELECT> <INPUT TYPE="button" VALUE="Switch"   onClick="switchURL(f1)"> </FORM>	These two approaches can be reversed. That is, the onChange of the last could have called the function and the onClick of the first could have specified the code.
Top Choice2 Next Choice2 Last Choice2	<FORM> <SELECT size=3 NAME="menu" onChange="location.href=   this.form.menu.options[this.form.menu.selectedIndex].value"> <OPTION value="topone.htm">Top Choice2 <OPTION value="second.htm">Next Choice2 <OPTION value="third.htm">Last Choice2 </SELECT> </FORM>

Browse to select a file	The file input type enables the user to select a local file for input to the form.
	<input type="file" size="13">
The fieldset tag can be used to organize form elements into groupings for which legend tag can be used to create a caption.
Browser Usage What browser do you use? Interent Explorer Netscape Opera	<form> <fieldset style="background-color:pink; color:red;"> <legend>Browser Usage</legend> What browser do you use?<br> Interent Explorer <input type="radio" name="browser"><br> Netscape <input type="radio" name="browser"><br> Opera <input type="radio" name="browser"></fieldset></form>
You may now, as above for fieldsets, add color to selection menus and other form elements - for IE5+/NN6+.
Just use alternating style classes First Second Third	<STYLE type="text/css"> OPTION.mar{background-color:maroon; color:white} OPTION.white{background-color:white; color:maroon} </STYLE> ... <FORM><SELECT><OPTION class="mar">First</OPTION> <OPTION class="white">Second</OPTION> <OPTION class="mar">Third</OPTION></SELECT></FORM>
	<input type="text" name="colortest" size="25" value="text" style="background-color:yellow; color:maroon; font-weight:bold;">
	<input type="button" value="text" style="background-color:pink; color:#009900; font-weight:bold;">
IE Netscape Opera	Try alt/I, alt/N or alt/O and see how focus is moved to the appropriate checkbox. Uses:
	Netscape <input type="checkbox" name="browser" accesskey="N">
IE Netscape Opera	A tabindex can be created to control the tab order. Try it; click above and tab. Uses:
	Netscape <input type="checkbox" name="browser" tabindex="3">
What is your preferred vacation? Select a Location Florida Hawaii Jersey Shore Paris London Florence Amsterdam Amazon Jungle Kenyan Safari Australian Outback Galapagos Cruise Other	Uses optgroup to create categories in your select menu (see article). For example:
	<OPTGROUP LABEL="USA Beaches"> <OPTION>Florida ...

---

for Version 4.17.03
Copyright © 2002 Goldray Consulting Group
http://goldray.com/forms/advforms.htm