HtmlHow-ToBeginner · 3 min read

How to Create Password Input in HTML: Simple Guide

To create a password input in HTML, use the <input> element with the attribute type="password". This hides the characters typed by the user, showing dots or asterisks instead for privacy.

📐

Syntax

The password input uses the <input> tag with type="password". You can add attributes like name to identify the input and placeholder to show a hint inside the box.

<input>: The HTML element for user input.
type="password": Makes the input hide typed characters.
name: Identifies the input when submitting a form.
placeholder: Shows a hint text inside the input box.

html

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

Output

A single input box where typed characters appear as dots or asterisks.

💻

Example

This example shows a simple form with a password input and a submit button. When you type in the password box, the characters are hidden for privacy.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Input Example</title>
</head>
<body>
  <form>
    <label for="pwd">Password:</label>
    <input type="password" id="pwd" name="password" placeholder="Enter your password">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A webpage with a labeled password input box and a submit button. Typed characters in the password box appear as dots or asterisks.

⚠️

Common Pitfalls

Some common mistakes when creating password inputs include:

Using type="text" instead of type="password", which shows the password openly.
Forgetting to add a name attribute, which can cause issues when submitting forms.
Not using a label for accessibility, making it harder for screen readers.

Always use type="password" to keep passwords hidden and add a label for clarity.

html

<!-- Wrong: shows password openly -->
<input type="text" name="pwd">

<!-- Right: hides password -->
<input type="password" name="pwd">

📊

Quick Reference

Attribute	Description	Example
type	Defines input type; use 'password' to hide characters	type="password"
name	Name used to identify input in form data	name="userPassword"
placeholder	Hint text shown inside the input box	placeholder="Enter password"
id	Unique identifier for label association	id="pwd"
autocomplete	Controls browser autofill behavior; use 'current-password' for passwords	autocomplete="current-password"

✅

Key Takeaways

Use to create a password field that hides typed characters.

Always include a linked with the input for better accessibility.

Add a name attribute to ensure the password is sent with form data.

Avoid using type="text" for passwords to keep user input private.

Use placeholder and autocomplete attributes to improve user experience.