How To Create Button In HTML

This post is about how to create button in HTML. There are many different methods of creating button. Some examples are given below but we talk only about <input type="button" />, <input type="submit" /> and <input type="reset" />

HTML Button Example

Read How To Create Radio Button In HTML
Read How To Create Checkbox In HTML
Read How To Create Table In HTML
Read How To Create Text and Password Fields In HTML

Using <input> tag example:

<form>
 <input type="button" />
</form>

Using <button> tag example:

<form>
 <button type="button" /> Click Me </button>
</form>

There are many attributes but this tutorial focuses only most common used attributes.

Let's understand following buttons:

• <input type="button" />
• <input type="submit" />
• <input type="reset" />

1. <input type="button" /> (Simple Button)

Syntax of button:

<form>
 <input type="button" />
</form>

type="button" creates simple clickable button. This is simple button, to make any action then you have to use events of button. There are following some events available in button tag:

• onblur
• onclick
• ondblclick
• onfocus
• onmouseover, etc

Above listed events contain javascript code or function call. Let's see one example of click event:

<form>
 <input type="button" onclick="my_method()" />
</form>

my_method() is javascript method.

Following are the most common attributes of <input type="button" />:

• name
• tabindex
• value

Let's understand each attribute.

name attribute:

This attribute is available in all HTML elements. This is just name of button.

For example:

<form>
 <input type="button" name="btn_save" />
</form>

tabindex attribute:

Specifies the tab order of an element when you use tab key for navigation.

For example:

<form>
 <input type="button" tabindex="2" />
 <input type="button" tabindex="1" />
</form>

value attribute:

Value attribute is used to display text on the button. If you not provide this attribute then button contains empty text. Use this attribute to set value like "Save", "Submit", "Update", etc.

For example:

<form>
 <input type="button" value="Save" />
</form>

2. <input type="submit" /> (Submit Button)

Syntax of Submit button:

<form action="page2.php">
 <input type="submit" />
</form>

Submit button is used to submit form data to actioned page (here is page2.php). You can get form's data in page2.php using GET or POST array in PHP.

Below are the attribute list of submit button:

• name
• tabindex
• value

These attributes are already discussed above in the <input type="button" /> tutorial

For example:

<form action="page2.php">
 <input type="submit" name="btn_submit" value="Submit Data" />
</form>

3. <input type="reset" /> (Reset Button)

Syntax of Reset button:

<form>
 <input type="reset" />
</form>

Reset button is used to reset form's data. There are some following attributes of reset button:

• name
• tabindex
• value

These attributes are already discussed above in the <input type="button" /> tutorial.

For example:

<form>
 <input type="reset" name="btn_reset" value="Reset Data" />
</form>

HTML Button Example:

<form action="#">
     Username: <input type="text" name="uname" /><br /><br />
     <input type="button" name="btn_save" tabindex="1"
         value="This is Button"  />
        <input type="submit" name="btn_update" tabindex="2"
         value="Submit"  />
        <input type="reset" name="btn_reset" tabindex="3" 
         value="Reset"  />
</form>

OUTPUT:

Username: