HTML Buttons

Buttons in HTML are clickable elements that can submit a form, reset a form, or perform a JavaScript function. Buttons are defined with a <button> or an <input> tag.

HTML Tutorial

Examples

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.

Button Types

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 server
  • type="reset" -- resets all input elements in a form to its original values
  • type="button" -- standard button that usually invokes a JavaScript function.

Types on a <button> tag

Three <button> elements, each with a different type.
Enter first and last name and then click all 3 buttons to see what they do.

Button types


<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>

Code Explanation

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.


Types on an <input> tag

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.

Button types


<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.


Difference between <button> and <input>

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"> &nbsp;&nbsp;
<input type="button" onclick="alert('Approve was clicked!');" value="Approve"> &nbsp;&nbsp;
<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> &nbsp;&nbsp;

<button type="button" onclick="alert('HTML5 was clicked!');">
   <img src="/img/html/html5.png"></i>
</button> &nbsp;&nbsp;

<button type="button" onclick="alert('Poppies were clicked!');">
  Click the poppies<br /><img src="/img/html/poppies.jpg">
</button>

Did you know?

Did you know?

Creating Link Buttons

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.

Address Information



Submit
<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>




You may also like

Guides