Buttons are represented by the button element . They are highly configurable. So, depending on the value of the attribute, typewe can create different types of buttons:
- submit: the button used to submit the form
- reset: button for resetting form values
- button: a button without any special purpose
If a button is used to submit a form, that is, it has an attribute set type=”submit”, then we can set a number of additional attributes for it:
- form: defines the form to which the submit button is assigned
- form action: sets the address to which the form is sent. If the form element has an attribute action, then it is overridden
- form enctype: Sets the format for sending data. If the form element has an attribute set enctype, then it is overridden
- form method: sets the method for submitting the form (post or get). If the form element has an attribute set method, then it is overridden
For example, let’s define a submit button and a reset button on a form:
<!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>Buttons In HTML5</title>
</head>
<body>
<form method="get" action="register.php">
<div style="margin-bottom: 15px;">
<input type="text" name="username" placeholder="Name" />
</div>
<div style="margin-bottom: 15px;">
<input type="email" name="email" placeholder="Email" />
</div>
<div style="margin-bottom: 15px;">
<input type="tel" name="phone" placeholder="Phone" />
</div>
<div style="margin-bottom: 15px;">
<input type="password" name="password" />
</div>
<div style="margin-bottom: 15px;">
<input type="reset" value="Reset" />
<input type="submit" value="Register" />
</div>
</form>
</body>
</html>
