The button options on the web pages are an example of the HTML <button> tag. This tag enables the webpage to show the desired button for the content domain. In this tutorial, you will study the HTML <button> tag.
What Is HTML <button> Tag?
The HTML <button> tag in the webpage represents a clickable button. It can be used to submit forms, trigger events, or perform other actions.
The HTML <button> Tag displays the HTML page with a controller as required with the content domain. That controller is merely a clickable button, used to indulge documents or anywhere in an HTML document as accessible, standard button functionality. The content's images and text can reside inside that <button> tag, which is the main difference between this <button> element and the buttons created with the <input> element in HTML. Various browsers operate diverse default types for <button>. Here is an example of how to use the <button> tag:
Example:
<button type="submit">Submit Form</button>In this example, the <button> tag creates a submit button with the label "Submit Form". When the user clicks the button, it will submit the form it contains. You can also use the type attribute to specify the type of button. Possible values of the type attribute are:
button: This is the default value and creates a standard button.submit: This creates a submit button that submits a form when clicked.reset: This creates a reset button that resets a form when clicked.
Example:
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
HTML <button> Tag Attributes
The <button> tag supports several attributes that can be used to customize its appearance and behavior. Some of the most commonly used features are:
type: This attribute specifies the type of button. It can be set to "submit" to submit a form, "reset" to reset a form, or "button" to perform some other action.name: This attribute specifies a name for the button, which can be used to identify it in the form data when the form is submitted.value: This attribute specifies a value for the button, which will be sent to the server when the form is submitted.disabled: This attribute disables the button, making it unclickable.onclick: This attribute specifies a JavaScript function to be executed when clicking the button.form: This attribute specifies the form that the button belongs to.formaction: This attribute specifies the URL of the file that will process the form data when the button is clicked.formenctype: This attribute specifies the type of encoding to use when sending form data to the server.formmethod: This attribute specifies the HTTP method to use when sending form data to the server.formnovalidate: This attribute specifies that the form data should not be validated when clicking the button.formtarget: This attribute specifies where to display the response after submitting the form.
In addition to the above-mentioned attributes, you can also use standard HTML attributes, such as id, class, and style to customize the appearance and behavior of the button.
Here is an example of a button with some of these attributes:
Example:
<button type="submit" name="submit-button" value="submit-value" form="my-form" formaction="/submit" formmethod="post" formtarget="_blank">Click me</button>You can also use JavaScript event handlers, such as onclick, to specify an action to be performed when the button is clicked.
Example:
<button disabled onclick="alert('Sorry, this button is disabled.')">Disabled button</button>The button element should not be used to create a link to another page. You must use the <a> tag to create a link.
Styling HTML Button
You can also style a button using CSS by adding a class or id attribute to the button element and then styling it using a stylesheet.
Example:
<button class="my-button">Click me</button>
<style>
.my-button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
}
</style>
