Tuesday, July 15, 2008

Forms - Action Buttons

These are buttons that perform an action on the entire form. There are four types of action buttons - submit, reset, regular and image.
Submit and image buttons submit all the form's parameters to the form application.
A regular button can be used to perform an action using Javascript.
The reset button erases all user input from the form.

Submit Button
The submit button's default name is "Submit Query". However, Opera and Amaya display just "Submit". To rename the button, include the value="somename" attribute.
If there is a name attribute, then it's value is included as a parameter in the form data, with the value of value as the data.
Example:
<input type="submit" name="button1" value="test" />
if the form uses get, the url will look like this
form.php?spice=pepper&button1=test
the button will look like this


Reset Button
<input type="reset" value="clear all">
The above code creates a button that clears all user-entered data in the form and restores the defaults.
If, in a group of radio buttons, there is no default choice (using the checked=checked attribute), then on pressing the reset button, all the radio buttons are cleared.
The code above creates the following button:



Image Buttons
<input type="image" src="images/button1.gif" name="map"/>
This is what it looks like:
Using the code above, you can make an image of your choice a button. When the user clicks it, the form is submitted to the form application along with the X and Y coordinates of the mouse pointer when the button was clicked. The X and Y coordinates are with respect to the top-left corner of the button.
Here is what will be submitted if the method is get :
form.php?spice=pepper&map.x=10&map.y=14

Regular Buttons
<input type="button" value="Send" />
This type of button does nothing unless used along with a Javascript on-event.

Note: When you have a group of buttons, it is useful to give all the buttons the same names but different values. Thus, the form program will know which button was clicked by the name=clickedbuttonname parameter.

No comments: