HTML Password Tutorial
The HTML language provides for passwords in a form structure. Data forms are a way to send information via a Web page and the Internet. Forms are popular in many computer languages and formats. Using the proper HTML tag disguises the details for the password and prevents others from reading the screen. With an understanding of form processing and proper handling protocol, you will find that establishing a password field is a straightforward process.
Other People Are Reading
Instructions
-
-
1
Open an HTML editor on your computer. You can use an editor designed for creating Web pages, such as Dreamweaver, or a standard text editor, such as Notepad.
-
2
Create your form and situate the form in the body section of the code. Forms always begin with the tag <form>.
-
-
3
Type in the text you want to appear on the screen near the password text box. This is what the user will see when looking at the form. This line of text is the label for the text box. For instance, you might type something like this:
Enter Password:
-
4
Add the HTML instructions for the password text box. The text box is the region the user will place the pointer in to type the password. The tag for an input text box is <input.
-
5
Create an instruction after the input tag to inform the browser that the text box will contain a password. To do this, you enter type= "password". Your code should now look like this:
<input type= "password"
-
6
Enter the size of the text box. This will be in relation to the number of characters you allow for your text box. For example, if passwords are limited to 8 characters, you might set the size to 10. The text field will be longer than the password and will look less awkward.
<input type= "password" size= "10">
-
7
Determine what other characteristics you want for your password field. Options include alignment, tabindex, maxlength, name and value. These are the standard options for any text box in HTML.
Maxlength defines the maximum characters allowed for the password. In the current example, that limit is 8.
<input type= "password" size= "10" maxlength= "8">
Name sets an internal name to the field so the form handler can identify the text box.
<input type= "password" size= "10" maxlength= "8" name= "password">
Tabindex defines the order in which the Tab key on the user keyboard moves from box to box. For example, if your form has three fields, and the password in the third in line, tabindex will instruct the browser to move to this box the third time the Tab key is pressed.
<input type= "password" size= "10" maxlength= "8" name= "password" tabindex= "3">
Value is the character string that appears in the text box before any user input. It is the default value of the password. You probably will not use this option for a password field.
If necessary, you can establish an alignment for the text box. Align determines where the text box will appear on the screen, such as the left or right edge of the form.
<input type= "password" size= "10" maxlength= "8" name= "password" tabindex= "3" align= "left">
Your final page scripting with the password text box should be similar to this:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
Enter Password : <input type= "password" size= "10" maxlength= "8" name= "password" tabindex= "3" align= "left">
</div>
</form>
</body>
</html>
-
1
