HTML Password Input Box | Field Show Characters example

HTML Password Input is used for in web app when there any registration and logging process involved. It’s easy to use, you just need to use <input> tag with a type=”password” attribute.

This Tutorial you will learn how to create an HTML input field, show it, get the value and placeholder with examples.

HTML Password Input Box Field  Show Characters example

Syntax

A simple syntax of html password input type.

HTML Password Field Example

You just need to write type=”password” in <input> tag, same as a Text box, Checkbox and Radio button examples.

Output: See the below GIF file, how password filed will show in browser.

HTML Password Field Example Output

Show Password Text |Characters

Some time user put the wrong password many times. That you need to show html password input show text value to know user what he is entering. A password field show characters will not do the first time or direct every time. There should be some button where the user can click on an icon or text button which indicate to click and see password characters.

To get it done you have to use javascript function. Where the type of attribute will change to Password to Text using a Radio button.

Output: See in Gif output how to enter pass character will show on click radio button.

Show Password Text Characters password input

Placeholder | Hint for user

A placeholder in the HTML password input box show hint (what content will come here) to the user. It’s as easy just write placeholder attribute with a value in the <input> tag.

Output: How’s look password hint in input password box.

 HTML input Placeholder

Value | How to Get

Without getting the html password input value, you can do nothing. So how you will get the input password value in HTML?

See the below example for that. Using a button for trigger a javascript function gets the value of a given id password input field.

Output: See the GIF image how it is working.

password input value html example output

Do comment if you have any suggestion and doubt on this tutorial,

Note: TheAll HTML Input Password Box Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.