Creating a password box

A password box (also called password field) is similar to a text box except that the typed characters are displayed as bullets (on Windows) or asterisks (on Mac). To create a password box, we use the <input> tag and set the type attribute to "password", as shown below.

Password: <input type="password">

The following shows the output of our code:


If you type any characters in the output password box shown above, you will observe that the character are replaced with bullets or asterisks. Notice in the example, we tell the user what to enter (i.e., a password) in the box. If you do not tell what the user is suppose to enter, the user may enter nothing or anything.

The size attribute

By adding the size attribute to the <input> tag, you can control the width of the box. If you require a password that is typically 6 to 10 characters long, do not set the size attribute to 5 (as this will make the box small) or 20 (as this will make the text box big). Instead, you may set the size attribute to 10 or 11. See an example:

Password: <input type="password" size="10" >