The <button> element in HTML is used to create clickable buttons. It is used to submit forms, trigger JavaScript events, or perform other interactive tasks.
Syntax
<button type="button|submit|reset" name="name" disabled>Text or HTML content</button>
Types of Buttons
1. Submit Button
Submits the form data to the server.
<form action="/submit" method="POST"> <input type="text" name="name" /> <button type="submit">Submit</button> </form>
2. Reset Button
Resets all form fields to their initial values.
<form> <input type="text" name="name" value="John" /> <button type="reset">Reset</button> </form>
3. Regular Button (Button Type)
Used for any general purpose, typically with JavaScript events.
<button type="button" onclick="alert('Button clicked!')">Click Me</button>
button-demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button Example</title> </head> <body> <form action="https://httpbin.org/post" method="post"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" autocomplete="name"> <br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" autocomplete="email"> <br><br> <label for="street">Street Address:</label><br> <input type="text" id="street" name="street" autocomplete="street-address"> <br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password" autocomplete="new-password"> <br><br> <button type="submit">Submit</button> <button type="reset">Clear</button> </form> </body> </html>
Above snippet generate below screen.
Type something, an click on Clear button to clear the entered data.
Differences Between <button> and <input type="button">
1. The <button> element can contain HTML content like images or text, whereas <input type="button"> is self-closing and cannot contain HTML.
2. <button> supports multiple types (button, submit, reset), while <input> requires specifying the type (button, submit, or reset).
formaction and formmethod of button element
The formaction and formmethod attributes of the <button> element provide additional control over form submission behaviour, specifically for buttons inside forms.
formaction Attribute
The formaction attribute specifies the URL where the form data will be sent when the button is clicked. This attribute overrides the action attribute of the <form> element for that particular button. It is especially useful when you have multiple buttons within a form that need to submit data to different URLs.
formmethod Attribute
The formmethod attribute specifies the HTTP method (GET or POST) that the form will use when the button is clicked. Like formaction, this attribute overrides the method attribute of the <form> element for that particular button.
Example values
1. GET: Appends form data to the URL as query parameters (used for retrieving data).
2. POST: Sends form data in the body of the request (used for submitting data).
formmethod-action.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>formmethod and formaction Example</title> </head> <body> <form action="https://httpbin.org/post" method="post"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" autocomplete="name"> <br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" autocomplete="email"> <br><br> <label for="street">Street Address:</label><br> <input type="text" id="street" name="street" autocomplete="street-address"> <br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password" autocomplete="new-password"> <br><br> <button type="submit" formaction="https://httpbin.org/get" formmethod="GET">Submit using GET</button> <button type="submit">Submit</button> <button type="reset">Clear</button> </form> </body> </html>
Above snippet generate below screen.
