Web Page Design Boot Camp

  Home |  Basics |  Intermediate |  Advanced |  Tools |  Site Map    Subtopics:

Push My Button

Submit Button

The submit button is used to send the form content back to the server where it will be processed.

This HTML... Produces this... 
<form action="cgi-bin/doit.pl" method=get>
<input type=submit value="Submit" name="doit">
</form>

Reset Button

The reset button clears all form controls and resets them to their default values.

This HTML... Produces this... 
<form>
Operating systems you have used:<br>
<input type=checkbox name="os" value="Win">Microsoft Windows<br>
<input type=checkbox name="os" value="DOS">MS or PC-DOS<br>
<input type=checkbox name="os" value="MacOS" checked>Apple Mac OS<br>
<input type=reset name="undo">
</form>
Operating systems you have used:
Microsoft Windows
MS or PC-DOS
Apple Mac OS

Button

This is a generic button control that is used to trigger JavaScript contained in the web page. The <input> tag will include an onClick event that will be performed when the button is clicked, in this example a JavaScript routine called zapIt.

This HTML... Produces this... 
<form>
<input type=button name="zapit" value="Zap It!" onClick="zapIt()">
</form>
This type of button can be used for closing a pop-up window or for sending the browser back to the previous page.

Image Button

This is a variation on the generic button control that lets you specify an image file to be displayed instead of the standard grey buttons normally used by the browser.

This HTML... Produces this... 
<form>
<input type=image src="../images/zapit.jpg" name="zapit" onClick="zapIt2()">
</form>