Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML Buttons

In HTML, buttons are clickable elements that take actions.

They can submit a form, reset a form, or perform a JavaScript function.

Buttons are defined with a <button> or an <input> tag.

Example

#

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.

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


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides