Home > Abakada: Back to Basics > Language References > HTML Elements > INPUT type=password Element

HTML Input Elements

---

Creates a single-line text entry control that conceals the actual value of the entry.

HTML 2, 3.2, 4, 4.01, 5

HTML Syntax

<input
   accesskey = key
   autocomplete = on | off 
   class = classname
   datafld = fieldname
   dataformatas = html | text
   datasrc = #id
   dir = ltr | rtl
   disabled
   id = value
   maxlength = n
   name = name
   readonly
   size = n
   style = css_style_rules
   tabindex = n
   title = text
   type = password
   value = value
   vcard_name = vcard
>

The INPUT type=password element is similar to the single-line textbox, but the input text is rendered in such a way as to hide the characters ( e.g., a series of asterisks ) as the user enters it. This control type is often used for sensitive input such as passwords .

Application designers should note that although the control does not display the actual text, this mechanism affords only light security protection. Even if the password is masked by user agents from casual observers, it is transmitted to the server in clear text, and may be read by anyone with low-level access to the network.

NOTE: Only the <input> start tag must be present. The element has no end tag.

The <input_password> element has no attribute of its own, but supports global attributes common to all HTML elements.

The following example defines a password field.

<form name="theForm">
   Username: <input id="txtUser" size=15><br>
   Password: <input type="password" id="txtPass" size=15><br>
   <input type="button" value="Enter" onclick="getPass ( )">
</form>

The following script checks to see if the password is valid for the specified user.

<script language="JavaScript">
<!--
function getPass ( ) {
if ( document.theForm.txtUser.value == "John" )
   if ( document.theForm.txtPass.value == "Doe" )
      alert ( "Password accepted. Enjoy your ride." );
   else
      alert ( "Password not valid. Sorry." );
else
   alert ( "Login not valid. Sorry." );
}
//-->
</script>

The preceding HTML and script are implemented below. Type in John as user and Doe as password or try something else.

INPUT