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.
There are many attributes that can be used by
<button>. We will be seeing the one which is most used.
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 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.
value is not shown in
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 doesn't change the look but it changes the functionality of the button.
There are 3 values for
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.
This type of button resets all the control in the form to their initial value.
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> elements are much easier to style than
<input> elements. Since you can add other HTML content like
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.