Open In App

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

Last Updated : 18 Sep, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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

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

input-type-submitDifference between <input type='button' /> and <input type='submit' />


<input type='button' />

<input type='submit' />


Purpose


Triggers JavaScript functions or events


Submits the form to the server


Action


Performs a custom action on click and Not associated with the form submission


Triggers form submission on click and Submit form data to the server


Form Data


Does not send form data to the server


Sends form data to the server


JavaScript


Requires custom JavaScript functions


No JavaScript required for basic use


Example Use


Showing alerts, navigating, validation


Login forms, search forms, registrations

Next Article

Similar Reads