How to Use Password Fields and Hidden Fields in Your HTML5 Form

A password field is a special text field on a web form that doesn’t display what the user types. Each keystroke is represented on the screen by a placeholder character, such as an asterisk or a bullet, so that someone looking over the user’s shoulder can’t see what they type.

You create a password field by using the <input> element with the type attribute set to password, as follows:

<form action="bin/guestbook.php" method="post">
<ul style="list-style-type: none;">
  <li>First Name: <input type="text" name="firstname" size="30"
      maxlength="25"></li>
  <li>Last Name: <input type="text" name="lastname" size="30"
      maxlength="25"></li>
  <li>Password: <input type="password" name="psswd" size="30" 
     maxlength="25"></li>
</ul>
</form>

Password fields are programmed like text fields.

The figure shows how a browser replaces what you type with bullets. Note: Depending on the browser’s default settings, some browsers replace the text with asterisks or some other character.

image0.jpg

A hidden field lets you collect name and value information that the user can’t see along with the rest of the form data. Hidden fields are useful for keeping track of information associated with the form, such as its version or name.

If your Internet service provider (ISP) provides a generic application for a guest book or feedback form, you might have to put your name and e-mail address in the form’s hidden fields so that the data goes specifically to you.

To create a hidden field, here’s what you do:

  1. Use the <input> element with its type attribute set to hidden.

  2. 2.Supply the name and value pair you want to send to the form handler.

Here’s an example of markup for a hidden field:

<form action="bin/guestbook.php" method="post">
<input type="hidden" name="e-mail" value="me@mysite.com">
<ul style="list-style-type: none;">
  <li>First Name: <input type="text" name="firstname" size="30"
      maxlength="25"></li>
  <li>Last Name: <input type="text" name="lastname" size="30"
      maxlength="25"></li>
  <li>Password: <input type="password" name="psswd" size="30" 
     maxlength="25"></li>
</ul>
</form>

As a rule, using an e-mail address in a hidden field is just asking for that address to be picked up by spammers. If your ISP says that this is how you should do your feedback form, ask for suggestions as to how you can minimize the damage.

Surfers to your page can’t see your e-mail address, but spammers’ spiders can read the markup. At a minimum, you would hope that your ISP supports one of the many JavaScript encryption tools available to obscure e-mail addresses from harvesters.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.