Welcome to ITM Web100 Training Program

The Password Widget

The Password Widget

A Password Widget is simply a Text Field in which the user data is masked so that nobody looking over the user's shoulder can read what was typed in. Try out the following example:

Behind the scenes, the above password field was created with the following HTML code
```
    <FORM>
    <INPUT 	TYPE 	= "PASSWORD"
		NAME 	= "pass"
		>
    </FORM>
```

It is important to know that this field does not offer any form of real security. The value typed in to the password widget is still sent over the internet as unencrypted plain text. The only security this widget offers is the security of preventing an office worker from looking over your shoulder.

The Password widget also has several other attributes which affect how it works. The following table outlines them:

Attribute	Description
TYPE	Specifies the type of interface widget. For a password widget, you use "PASSWORD"
NAME	Specifies the variable name associated with this widget
VALUE	Specifies initial default text which should appear in the password field
MAXLENGTH	Specifies the maximum number of characters allowed to be input into the widget
SIZE	Specifies the width of the field

Let's take a closer look at each of these attributes.

The VALUE Attribute

The VALUE attribute allows you to specify default text. Here is an example:

And here is the code which we used to make that password field.
```
    <FORM>
    <INPUT 	TYPE 	= "PASSWORD"
		NAME 	= "password" 
	        VALUE 	= "default text"
		>
    </FORM>
```

The MAXLENGTH Attribute

The MAXLENGTH attribute allows you to specify the maximum number of characters allowed for input. Here is an example which only allows you to type in 5 characters. Try it out for yourself:

And here is the code which we used to make that password field.
```
    <FORM>
    <INPUT 	
	TYPE = "PASSWORD"
     	NAME = "demo" 
     	MAXLENGTH = "5"
	>
    </FORM>
```

The SIZE Attribute

The SIZE attribute allows you to specify the width of the text field itself. Here are two examples which show the attribute being used:

And here is the code which we used to make the password fields.
```
    <FORM>
    <INPUT 	TYPE	= "PASSWORD"
		NAME 	= "demo"
		SIZE 	= "30"
		>
    <INPUT 	TYPE 	= "PASSWORD"
		NAME 	= "demo"
		SIZE 	= "20"
		>
    </FORM>
    
```