HTML: How to specify the type of button?

Last update on February 06 2024 11:32:07 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title>How to specify the type of button</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<form action="https://www.w3resource.com/html-css-exercise/basic/solution/button-type-answer-demo.php" method="post" id="nameform"><!-- Start of form element with action, method, and id attributes -->
First name: <input type="text" name="fname"><br><!-- Input field for entering first name -->
Last name: <input type="text" name="lname"><br><!-- Input field for entering last name -->
Address: <input type="text" name="add"><br><!-- Input field for entering address -->
<button type="submit" value="Submit">Submit</button><!-- Submit button labeled "Submit" -->
<button type="reset" value="Reset">Reset</button><!-- Reset button labeled "Reset" -->
</form><!-- End of form element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

This HTML document starts with a doctype declaration indicating it's an HTML5 document.
Inside the <html> tags, the document structure begins.
The <head> section contains metadata about the document, such as character encoding and the title.
The <body> section is where the visible content of the webpage resides.
Within the body section, there's a <form> element created with the action, method, and id attributes set.
Inside the form, there are input fields for entering first name, last name, and address.
There are two <button> elements within the form:

The first button has the type attribute set to "submit", indicating it's a submit button. It submits the form data to the specified action URL.
The second button has the type attribute set to "reset", indicating it's a reset button. It resets the form fields to their initial values.