html   intro |  html |  css |  design |  scripting |  dhtml |  server 

Intro
> HTML Tutorial
> Your First Web Page
> Backgrounds & Link Colors
> Formatting Text
Images
> Adding Images
> Aligning Images
> Linking & Bordering Images
Tables
> Tables
> Table Attributes
> Table Cell Spanning
> Table Tips
Forms
> Forms
> Form Elements
> Form Submit Buttons
Frames
> Frames
Web Colors
> Web Colors
> Web Color Table
> Web Color Names
> Web Color Calculator
Form Submit Buttons & Graphics

This page covers:
      Submit & Reset Form Buttons
      Using Graphics for Buttons

Submit & Reset Form Buttons

Once you've created a form, you need to submit the data using form buttons. The method below uses the INPUT element to create these buttons. The section below, Using Graphics for Buttons, will show you how you can use the INPUT or BUTTON element to create graphic buttons as well.

Input Type

Attributes
Submit

name: Name of button (usually "submit")
value: Value that will appear on the button
Reset

name: Name of button (usually "reset")
value: Value that will appear on the button

Example:

Submit Button:

Reset Button (clears the form values):

CODE:

Submit Button:
<INPUT TYPE="submit" NAME="Submit" VALUE="Send Form">

Reset Button (clears the form values):
<INPUT TYPE="reset" NAME="Reset" VALUE="Clear Form">

Graphic Buttons

You can use graphic buttons instead of the standard grey buttons to submit or clear forms. Use the type attribute of the INPUT element to specify an image.

Input Type

Attributes
IMAGE

name: Name of button: submit or reset
src: Image Source (location of image)

Example:

CODE:

<INPUT TYPE="image" NAME="submit" src="images/form_submit.gif" width="82" height="27" border="0" alt="Submit">

<INPUT TYPE="image" NAME="reset" src="images/form_clear.gif" width="82" height="27" border="0" alt="Clear">

Alternatively, you're supposed to be able to use the BUTTON element to use graphics for buttons, but I've found this method to be an unsound one. The graphic appears in Netscape as simply a graphic, but does not work as a button. In Explorer, a grey button appears with the graphic superimposed on it and works as a button. If you want to use graphic buttons use INPUT element with type="image" as noted above.

Input Type

Attributes
BUTTON

NOTE: Needs a closing tag </BUTTON>
name: (optional) Name of button
type: Type of button: button, submit, or reset
value: (optional) Value of button

Example:

If you're using Netscape, you'll see 2 graphic text images that say "submit" and "clear". If you're using Explorer, you'll see the same 2 graphic text images, but superimposed on standard form buttons. These buttons work in Explorer, but not in Netscape.

CODE:

<BUTTON NAME="submit" TYPE="submit"><IMG src="images/formTxt_submit.gif" alt="Submit"></BUTTON>

<BUTTON NAME="reset" TYPE="reset"><IMG src="images/formTxt_clear.gif" alt="Clear"></BUTTON>



Next Page: Frames
Previous Page: HTML Form Elements
 
hardCoder.com © 1999-2011. all rights reserved. // site created and maintained by kathy ahn