HTML Button Full Tutorial, all attributes with example.
HTML TUTORIAL NO: 13
HTML Buttons
HTML button is a clickable element, that can be used in HTML Forms, Message etc. anywhere we are taking action in a document, The button is a clickable button in HTML. For example: Send Button, Submit Button, Reset Button etc.
The HTML Button defined by <button> element.
HTML Button Attributes type
- type=”submit”: It is defines the form to be submitted. It defines submit value. (Submit form-data)
- type=”button”: It defines to removes the default behavior of a button.
- type= “reste” : It is reset the form control to their initial value.
HTML Button in HTML Form
When we click submit button in any HTML Form the button action is submitted the form data, because it set to type=”submit”.
Example of Submit Button in HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Button</title> </head> <body> <formaction="submit-page.html"> <label for="Name">Name <input type="text"> </label> <br> <br> <label for="Email">E-mail <input type="email"> </label> <br><br> <button>Submit</button> </form> </body> </html> |
Output of above Example (Button)
 |
Resetting Button on HTML
Use of Reset Button in HTML to replace and reset the form fill up data and fill new data.
Example of Reset Button in HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Button</title> </head> <body> <form action="submit-page.html"> <label for="Name">Name <input type="text"> </label> <br><br> <label for="Email">E-mail <input type="email"> </label> <br><br> <button type="reset">Reset Value</button> <button type="submit">Submit</button> </form> </body> </html> |
Output of above Example (Reset Button)
 |
Disable HTML Button
Disable HTML Button is un-clickable and unusable, it specifies the HTML Button should be disable, the disable attribute is a Boolean Attribute.
HTML Disable Button attribute is <button disable>
Example of HTML Disable Button
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Button</title> </head> <body> <input type="text"><br><br> <button disabled>Disable Button</button> </body> </html> |
Output of above Example (Disable Button)
 |
Styling HTML Button
We can also stye HTML Button by using CSS Style.
Example of Styling HTML Button
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Style Button</title> <style type="text/css"> button{ background-color: coral; border: 2px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; padding: 5px; font-weight: bold; color:black; } </style> </head> <body> Name <input type="text"> <br><br> <button>Click Here</button> </body> </html> |
Output of above Example (HTML Stylish Button)
 |
In this tutorial we learned HTML Button, I hope you learned this and understood this tutorial and next tutorial we will be learn a new topic of HTML.
Also Learn This
- HTML Dropdown List with Examples.
- HTML List full tutorial.
- HTML Table full tutorial with programming example.
- HTML Button full tutorial.
- HTML all attributes with example.
- HTML form with programming examples.
- HTML images full tutorial.
1 Comment
gate io türkiye · May 8, 2023 at 6:44 pm
Your article made me suddenly realize that I am writing a thesis on gate.io. After reading your article, I have a different way of thinking, thank you. However, I still have some doubts, can you help me? Thanks.