Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.
Password Input Fields
The Password Input field allows visitors to type a 'masked password into the field. The actual text they type into the field is replaced with asterisks, or dots, so that the password is not visible.
You can add a Password Input field to your form using a <input> tag. The <input> tag requires a few attributes to work properly:
Let's write an input tag, step by step, to show how an input field is correctly coded.
The type="password" value tells the input tag to treat the information added into the field as a password and mask the characters typed in with asterisks or dots. It is written like this:
The name should always be something unique that identifies what the field is for. Since this field is specifically for passwords, you should probably name it "password" or something similar. For this example, we will use "pass". Add the name like this:
The value field allows you to pre-fill the displayed input field with some text. This is commonly used in fields asking for web url's and so on. Because this is a password field requiring the visitor to add their full password, leave the value field blank:
The size attribute tells the form how many spaces wide the input field should be displayed as. Customize this size value to whatever width you want the field to be.
The maxlength attribute tells the field to limit the number of characters the visitor can add to the field. If you set the limit to 20 characters, as shown above, then only 20 characters can be typed in.
Now let's look at how the complete tag will appear on a webpage. Here is our complete code:
And here is how it will look on a webpage:
Notice that when you enter text into this field it is masked with either asterisks or dots, depending on which browser you are using.Return to 'Text Inputs' Proceed to 'Hidden Inputs'