HTML Form Password Input & Attributes

HTML form password input is a type of input field used to allow users to enter a password. The password input field obscures the characters entered, usually by displaying them as asterisks or dots, to ensure the password is not visible on the screen.

Attributes of <input type="password"

type: Specifies the type of input. For password fields, this value is always "password"

<input type="password" placeholder="Enter your password">


name: Assigns a name to the input field, which is used to identify the form data after it is submitted.

<input type="password" name="userPassword" placeholder="Enter your password">


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

<input type="password" id="passwordField" placeholder="Enter your password">


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

<input type="password" class="form-control" placeholder="Enter your password">


value: Sets the default value of the input field.

<input type="password" value="defaultPassword" placeholder="Enter your password">


placeholder: Provides a hint to the user of what can be entered in the input field.

<input type="password" placeholder="Enter your password">


required: Indicates that the input field must be filled out before submitting the form.

<input type="password" required placeholder="Enter your password">


maxlength: Specifies the maximum number of characters that the user can enter.

<input type="password" maxlength="12" placeholder="Enter your password">


minlength: Specifies the minimum number of characters that the user can enter.

<input type="password" minlength="8" placeholder="Enter your password">


autocomplete: Specifies whether the input field should have autocomplete enabled.

<input type="password" autocomplete="new-password" placeholder="Enter your password">


readonly: Makes the input field read-only, meaning the user cannot modify the value.

<input type="password" readonly placeholder="Enter your password">


disabled: Disables the input field, making it unresponsive and preventing it from being submitted.

<input type="password" disabled placeholder="Enter your password">


pattern: Specifies a regular expression that the input field's value must match for the form to be submitted.

<input type="password" pattern="[A-Za-z0-9]{8,}" placeholder="Enter your password">


Example with Placeholder


Here’s an example of an HTML form with a password input field that includes a placeholder:

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

In this example:

  • The password input field has a placeholder attribute that provides a hint ("Enter your password") to the user.
  • The required attribute ensures that the user must fill out this field before submitting the form.
  • The minlength attribute enforces a minimum length of 8 characters for the password