HTML Form Submit Input and & Attributes

HTML form submit input is used to create a button that, when clicked, submits the form. The attributes for a submit input field customize its behavior and appearance.


Attributes of <input type="submit">

type: Specifies the type of input. For submit buttons, this value is always "submit".

<input type="submit">


name: Assigns a name to the input field, which can be used to reference the button when the form data is submitted.

<input type="submit" name="submitButton">


id: Assigns a unique identifier to the input field, which can be used to target the element with CSS or JavaScript.

<input type="submit" id="submitBtn">


class: Assigns one or more class names to the input field for styling purposes.

<input type="submit" class="btn btn-primary">


value: Sets the text displayed on the button. This attribute is often used to provide the button label.

<input type="submit" value="Submit Form">


disabled: Disables the submit button, making it unresponsive and preventing the form from being submitted.

<input type="submit" disabled>


Example with Submit Input


Here's an example of an HTML form with a submit input field






<!DOCTYPE html>
<html>
<head>
    <title>Submit Input Example</title>
</head>
<body>
    <form action="/submit-form" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
        <br>
        <input type="submit" value="Login">
    </form>
</body>
</html>


In this example:

  • The type attribute is set to "submit", creating a submit button.
  • The value attribute sets the text on the button to "Login".
  • The placeholder attribute is used in the text and password input fields to provide hints to the user.


Note on Placeholder

The placeholder attribute is not applicable to submit inputs. Placeholders are used with text inputs, password inputs, and other input types to provide a hint or example of what can be entered into the field. For submit buttons, the value attribute is used to set the button's label.