Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Forms Tutorials

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:

  1. TYPE - specifies the field is for entering a password
  2. NAME - assigns a unique name to the field for processing purposes
  3. VALUE - defines what, if anything, will be pre-displayed in the field
  4. SIZE - defines how wide the field will be displayed on the page
  5. MAXLENGTH - defines how many characters can be typed into the field

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:

<input type="password"

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:

<input type="password" name="pass"

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:

<input type="password" name="pass" value=""

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.

<input type="password" name="pass" value="" size="15"

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.

<input type="password" name="pass" value="" size="15" maxlength="20">

Now let's look at how the complete tag will appear on a webpage. Here is our complete code:

<input type="password" name="pass" value="" size="15" maxlength="20">

And here is how it will look on a webpage:

Enter a sample password here:

Notice that when you enter text into this field it is masked with either asterisks or dots, depending on which browser you are using.