In HTML, buttons are clickable elements that take actions.
They can submit a form, reset a form, or perform a JavaScript function.
A <button> element of type button.
<button type="button"
onclick="alert('Report generation has started.');">Generate reports</button>
And, an <input> element of type button.
<input type="button"
value="Generate reports"
onclick="alert('Report generation has started.');" />
Indeed, <button> and <input> elements are very similar.
However, there is a difference which is explained further down.
For details on the button tag, see our HTML button tag reference.
For details on the input button tag, see our HTML input button reference.
Both <button> and <input> elements come in 3 types: submit, reset, and button.
The button type is specified with a type attribute.
type="submit"
-- submits all input elements in a form to the servertype="reset"
-- resets all input elements in a form to its original valuestype="button"
-- standard button that usually invokes a JavaScript function.
Three <button> elements, each with a different type.
Enter first and last name and then click all 3 buttons to see what they do.
<form action="/tutorial/action.html">
<fieldset>
<legend>Button types</legend>
<input type="text" id="myfirst" name="firstname" placeholder="First name"><br />
<input type="text" id="mylast" name="lastname" placeholder="Last name"><br /><br />
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="display();">Button</button>
</fieldset>
</form>
<script>
let display = () => {
let firstname = document.getElementById("myfirst").value;
let lastname = document.getElementById("mylast").value;
alert("Name = " + firstname + " " + lastname);
}
</script>
The submit button submits the form with input fields.
The reset button resets the input values inside the form.
The button button invokes a JavaScript function which displays the name values.
In case type is omitted, the button behaves as a submit type.
Next, we have three <input> buttons, each with a different type.
Enter first and last name and then click all 3 buttons to see what they do.
<form action="/tutorial/action.html">
<fieldset>
<legend>Button types</legend>
<input type="text" id="myfname" name="fname" placeholder="First name"><br />
<input type="text" id="mylname" name="lname" placeholder="Last name"><br /><br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Button" onclick="reveal();">
</fieldset>
</form>
<script>
let reveal = () => {
let fname = document.getElementById("myfname").value;
let lname = document.getElementById("mylname").value;
alert("Name = " + fname + " " + lname);
}
</script>
Again, <button> and <input> elements are very similar. Let's now look at the difference.
The difference is that <input> buttons can only have text, whereas <button> can contain text, images, and other elements.
The text in an <input> button is set with the value attribute.
Some example <input> buttons and their value attributes.
<input type="button" onclick="alert('Add to Cart was clicked!');" value="Add to Cart">
<input type="button" onclick="alert('Approve was clicked!');" value="Approve">
<input type="button" onclick="alert('un Reports was clicked!');" value="Run Reports">
On the other hand a <button> accepts other elements, such as text, icons, and images.
So, with <button> you have more flexibility to custom design the elements.
Here are some button examples:
<button type="button" onclick="alert('Approve was clicked!');">
Approve <img src="/img/html/check.png"></i>
</button>
<button type="button" onclick="alert('HTML5 was clicked!');">
<img src="/img/html/html5.png"></i>
</button>
<button type="button" onclick="alert('Poppies were clicked!');">
Click the poppies<br /><img src="/img/html/poppies.jpg">
</button>
Buttons can also be created using the <a> tag.
Using CSS, anchor links can be styled to appear like an HTML button.
And with JavaScript the link can behave like any button type.
An <a> element that looks and behaves like a submit button.
<style>
.btn-link, btn-link:hover {
background-color: whitesmoke !important;
border: 1px solid #999 !important;
color: black;
padding: 5px 10px;
margin-bottom:15px;
text-align: center;
text-decoration: none !important;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
</style>
<form action="/tutorial/action.html" id="myform">
<fieldset>
<legend>Address Information</legend>
<input type="text" name="street" placeholder="Street"><br />
<input type="text" name="city" placeholder="City"><br />
<input type="text" name="country" placeholder="Country"><br /><br />
<a onclick="submit();" class="btn-link" href="javascript:void(0)" >Submit</a>
</fieldset>
</form>
<script>
let submit = () => {
let form = document.getElementById("myform");
form.submit();
}
</script>