button element in HTML

Buttons are very useful in forms. Apart from forms, buttons also used in interactive applications. Let us have a look at the following example.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button>Default Button</button>
    </body>
</html>
                        

In above example, we have created a simple button. Now, we will see its attributes one by one.

Attributes

There are many attributes that can be used by <button>. We will be seeing the one which is most used.

disabled attribute

To disable a button, disabled attribute is used. Disabled button will interact.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button>I am enabled</button>
        <button disabled>I am disabled</button>
    </body>
</html>
                        

value attribute

value sets the initial value of the button. It is mostly used only in forms. When the form is submitted, the value is sent to the server.
Remember, value is not shown in <button>. Value of the button only used to send the information to the server via a form?


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button value="value">Button Title</button>
    </body>
</html>
                        

type attribute

type attribute doesn't change the look but it changes the functionality of the button.
There are 3 values for type:

  • submit

    This type of button submits the form data to a server. This is the default behavior of the button which is inside <form> element. If button is not inside <form>, then submit will not work.

  • reset

    This type of button resets all the control in the form to their initial value.

  • button

    This type of button has no default behavior. It can have some event handle associated with it which are triggered when the events occur.

<input type='button' />

You can have a button in HTML through <input/> tag. Let us have a look at the example below.




<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input type="button" value="Button Title" />
        <br>
        <br>
        <input type="button" value="I am disabled" disabled/>
    </body>
</html>
                        

To add the title of the button, value attribute is used and disabled attribute is used as the same way as it was used in <button> tag.

Difference between <input> and <button>

<button> elements are much easier to style than <input> elements. Since you can add other HTML content like <em>, <strong> or <img> in <button>.

Conclusion

In this section, we have learned about button in HTML. Buttons are widely used in an HTML page and in HTML forms. Be sure to master it.
In next section, we will learn about checkbox in HTML.