Web applications present HTML forms to visitors and they can fill it with asked details. To send data to server or to mail it this data must be submitted. For example if a student portal requires a student to upload her image, academic and other documentary proofs she can do so by clicking on the ‘Submit’ or ‘Save’ button. An online shopping site will accept an order when a visitor clicks on ‘Place Order’ Button. An online bank portal allows transfer of funds when a user, after filling all details of transaction, clicks on ‘Pay’ Button. HTML Buttons come handy for such actions.
An HTML Button is presented as a clickable rectangular shape. It may be labeled with text that says all about the action to be taken like ‘Submit’ or ‘Reset’. If a button is created as a push button using BUTTON tag, then the label of the button can be anything that a web designer wishes the user to understand from.
When a user clicks a button, the action will take place defined in the script file name set in ACTION attribute of the form using the method given in METHOD (POST/GET) attribute.
Syntax – HTML Button
HTML forms can have three types of buttons- Submit Button, Reset Button and a Simple Button. For Submit and Reset INPUT tag is used with TYPE=’SUBMIT’ and TYPE=’RESET’ respectively. To create a normal button that may tell user to do a specific activity is created by using HTML BUTTON tag.
<INPUT TYPE=”SUBMIT” [tag attributes]>
<INPUT TYPE=”RESET” [tag attributes]>
<BUTTON [tag attributes]>button label</BUTTON>
Attributes- HTML Button
HTML Button is created with <INPUT> or <BUTTON> Tags with following attributes. The button created with <INPUT> has predefined behavior i.e. send the form data to script and clear all the data appearing in the HTML text controls. A button created with <BUTTON> paired tag is associated with a script that runs in response to the ‘onclick’ event of a button.
This attribute is used to give identification to the HTML Button in a web form. The ID must be an alphanumeric string and unique in the form. This ID is used in a script to do the action expected through script when a button is clicked.
The NAME attribute is used to give name to HTML Button. The name attribute is used to manipulate the button by executing the associated php or asp script file.
The VALUE attribute represents text appearing on the HTML Button. When <BUTTON> Tag is used to create a button you can include an image between opening and closing BUTTON tag to make it a picture button.
Example of HTML Button
<BODY> <FORM action="addperson.php" method="post"> <INPUT TYPE="SUBMIT"> <INPUT TYPE="SUBMIT" VALUE="Click to open.."> <INPUT TYPE="RESET"> <INPUT TYPE="RESET" VALUE="Clear All Data..."> <BUTTON>****</BUTTON> <BUTTON>Place Order</BUTTON> <BUTTON><img src="flower.jpg" height="50%" width="50%"></BUTTON> </FORM> </BODY>