Suggest an editImprove this articleRefine the answer for “How do you make an <input> for entering a password?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)To create a password entry field, use the `<input>` element with the `type="password"` attribute. Such a field hides the entered characters, replacing them with dots or asterisks, so no one can see the password visually. **Key point:** the hiding is only visual, not encryption; real protection must be implemented on the server through HTTPS and password hashing.Shown above the full answer for quick recall.Answer (EN)ImageTo create a password entry field, use the `<input>` element with the `type="password"` attribute. Such a field **hides the entered characters**, replacing them with dots or asterisks, so no one can see the password visually. --- ### 1. Basic password field example ```html <form action="/login" method="post"> <label for="pass">Password:</label> <input type="password" id="pass" name="password" placeholder="Enter your password"> <button type="submit">Log in</button> </form> ``` What happens here: - `type="password"` makes the characters invisible while typing; - `name="password"` is the field's name (sent to the server on form submit); - `placeholder` is a hint inside the field; - `id` and `label` link the caption and the input field. --- ### 2. How it works While typing, the user sees: ```javascript •••••••• ``` But the browser actually sends the entered text as a plain string (for example, `mypassword123`). The hiding is **purely visual**, not encryption. --- ### 3. Commonly used attributes | Attribute | Purpose | Example | |---|---|---| | `name` | Field name (key for sending) | `name="password"` | | `placeholder` | Hint | `placeholder="Enter your password"` | | `required` | Makes the field mandatory | `required` | | `minlength` / `maxlength` | Minimum / maximum characters | `minlength="6" maxlength="20"` | | `autocomplete` | Allows or blocks autofill | `autocomplete="off"` | | `pattern` | Validates against a pattern (regular expression) | `pattern=".{6,}"` (at least 6 characters) | Example with validation: ```html <input type="password" name="password" minlength="6" required placeholder="At least 6 characters"> ``` --- ### 4. How to add a "show password" toggle You can build a toggle using JavaScript: ```html <input type="password" id="password" placeholder="Enter your password"> <input type="checkbox" id="show"> Show password <script> document.getElementById('show').addEventListener('change', function() { const input = document.getElementById('password'); input.type = this.checked ? 'text' : 'password'; }); </script> ``` Now clicking the checkbox switches the field's type between `password` and `text`. --- ### 5. Security - The characters are hidden only **on screen**, not in transit; real protection must be implemented on the server (via HTTPS and password hashing). - Never store entered passwords in plain text. --- ### Summary: | Property | Value | |---|---| | Tag | `<input type="password">` | | Purpose | Field for secure password entry | | Characters while typing | Hidden (dots / asterisks) | | Commonly used attributes | `required`, `minlength`, `autocomplete="off"`, `placeholder` | | Security | Visual hiding; real protection is on the server side | --- **In simple terms:** `<input type="password">` is a **field where the input is visible only to the user**. It creates an illusion of "secret" entry and makes a login form look visually secure.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.