Home

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

|
Updated:  
2016-03-26 14:02:48
|
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

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 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 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="[email protected]">
<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.

About This Article

This article is from the book: 

About the book author:

Ed Tittel is a 28-year veteran of the computer industry. A seasoned author and consultant, Ed has more than 140 books to his credit.

Chris Minnick is an accomplished author, teacher, and programmer. Minnick authored or co-authored over 20 books, including titles in the For Dummies series. He has developed video courses for top online training platforms and he teaches programming and machine learning to professional developers at some of the largest global companies.