Difference between <input type=’button’ /> and <input type=’submit’ />

Last Updated : 18 Sep, 2023

In HTML, <input> elements are widely used to create various form controls. Two common types of <input> elements used for buttons are <input type='button' /> and <input type='submit' />. While both appear similar at first glance, they serve different purposes and have distinct behaviors when used in web forms, <input type=’button’ /> creates a button without default behavior. <input type=’submit’ /> triggers form submission to a specified URL when clicked.

We will explore the above-mentioned topic with their basic implementation with the help of examples.

<input type=’button’ />

The <input type='button' /> element creates a clickable button on the webpage, but it does not inherently perform any action by itself. It is primarily used to trigger JavaScript functions or events when clicked. Developers can add custom functions to execute certain actions, like showing a popup, validating a form, or navigating to another page. It is ideal for scenarios where you need to handle user interactions through JavaScript without submitting a form.

Example: Here is the basic example of using the <input type=’button’ />.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Button Example</title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h1> 
            Click the Button 
        </h1> 
        <input type="button" 
               value="Click Me" 
               onclick="showMessage()" /> 
    </center> 
  
    <script> 
        function showMessage() { 
            alert('Hello! You clicked the button.'); 
        } 
    </script> 
</body> 
  
</html>

Output:

<input type=’submit’ />

On the other hand, the <input type='submit' /> element is also a clickable button, but its primary purpose is to submit a form to the server. When a user clicks on a submit button, it triggers the form submission, and the form data is sent to the server for processing. This type of button is typically used within HTML forms to allow users to submit their input, such as login credentials, search queries, or registration details.

Example: In this example, we are creating a simple HTML form with username and password fields that submits data to “geeksforgeeks.org” by clicking “Submit.”

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Submit Example</title> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h1>Submit the Form</h1> 
    <form action="https://www.geeksforgeeks.org/" 
          method="POST"> 
        <label for="username"> 
            Username: 
        </label> 
        <input type="text" id="username" 
               name="username" required /> 
        <br /><br> 
        <label for="password"> 
            Password: 
        </label> 
        <input type="password" 
               id="password" 
               name="password" required /> 
        <br /><br> 
        <input type="submit" 
               value="Submit" /> 
    </form> 
</body> 
  
</html>

Output: