Jakob Nielsen recently asked us to Stop Password Masking:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

- useit.com/alertbox/passwords.html

He suggests using plain text input fields by default and offering a checkbox to have the passwords masked.

We do not completely go for the idea of typing passwords in plain text by default as there will be a loss of security! Not a technical one, but a user-driven one.

Password fields on iPhone/iPod touch

Of course Nielsen is right when he talks about users making more errors and feeling less confident when they can’t see what they’re typing while filling in forms. That may have been the reason why Apple developed implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text. Compared to common password fields on the web this method improves usability, not only on mobile devices. And concerning security risks you’ll probably need James Bond behind your back looking over your shoulders in order to let your password be captured.

So, this method looks to be a pretty good way of typing in passwords, and that is why tried to use it on web forms. It comes as a jQuery plugin which works unobtrusive. Non-JS users get the common masked password fields.

Copy & paste will work as usual. The only thing that will not work is: deleting/inserting single or multiple characters from the beginning/middle of the masked password string.
But, let’s face it, who will do that?

Live demo

Features

1. Doesn’t need any HTML modification as it finds password fields by type.
2. Unobtrusive: Non-JS users get the common masked password fields.
3. Supports copy & paste.
4. Options: Interval, delay, replacement character, prefix, debug mode.

Instructions

It’s very simple.

1. Just load jQuery, of course ;-).
2. Load the Plugin
3. and then initialize dPassword.

You are done!

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jQuery.dPassword.js"></script>
<script type="text/javascript">
  $(document).ready( function() {
    $('input:password').dPassword();
  });
</script>

There are some options you might want to configure:

• interval
  Time in msec the scripts checks for newly entered characters.
• duration
  Delay in msec of converting the last entered character.
• replacement
  The character to be replaced, for unicode characters use the following format: %u25CF
  You may check these ressources: Overview of unicode characters or a more comprehensive overview.
• prefix
  This is the prefix of the newsly generated elements. Default is password_.
• debug
  For debugging issues. You need FireBug enabled!

Example:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jQuery.dPassword.js"></script>
<script type="text/javascript">
  $(document).ready( function() {
    $('input:password').dPassword({
      duration: 2000,
      prefix: 'my_'
    });
  });
</script>

Known Issues

1. Adding/deleting chars from the middle doesn’t work. Works at the end of the password only.
2. View will not follow cursor if input field is too small.
3. If #id based CSS styles are assigned, these styles will not be taken over.

Download

Project page with SVN repository: http://code.google.com/p/dpassword/
JS download: jQuery.dPassword.js
Complete ZIP download: dpassword.zip

[EN] Short info: Final release of IE 8 makes specific styles for the flexible form redundant. Works fine without special enforcement now.

Deutscher Artikel bei SELFHTML: Ansatz für flexible, mehrspaltige Formulare.

English:

Update of the approach to flexible forms, workin’ fine with Internet Explorer 8 (beta) now.
Approach to flexible multi-column forms

Deutscher Artikel bei SELFHTML: Ansatz für flexible, mehrspaltige Formulare.

English:

Slight update of the approach to flexible forms in order to get Opera 9 working again.
Approach to flexible multi-column forms

-moz-box-sizing: border-box; /* gecko */
-webkit-box-sizing: border-box; /* khtml/webkit */

SELFHTML: »Ansatz für flexible, mehrspaltige Formulare«

English:

Quick info: my little approach to flexible multi-column web forms is now Safari 3-ready. Box-sizing simply had to be -webkit instead of -moz.

-moz-box-sizing: border-box; /* gecko */
-webkit-box-sizing: border-box; /* khtml/webkit */

DECAF°blog: »Approach to flexible multi-column forms«

Fluid web forms?

When it comes to fit a web form into a fluid layout we usually point out several reasons why form elements should be pixel based. That is because we are totally aware of web forms being part of the browser/system and therefore do not give authority to the web designer. Sort of fundamental perception. Actually, styling web forms is hard work, even pixel sized, and could turn out into the hell of a job if specification says: make it fluid.

So, here we are and asking: why should a web form be fluid? Why go to the time and effort of develop a form that is based on input fields with flexible widths? Doesn’t make sense.
Sure it may come to make sense when the form has multiple columns and a scaling form would allow input fields to grab content that otherwise would have been cut off in a fixed pixel based form. Single-column input fields are hopefully long enough at any time, but a multi-column form may benefit from flexible widths.

One last thought: why do we go for multi-column forms instead of simple single-column ones? It’s all about conformity with user expectation (buzzword) and the use for suggestive input fields which comply with the content they may receive. For instance a submission of the user’s last name requires a longer input field than a field for the few chars of his street number. According to this idea a discrepancy between (the length of) input fields and its estimated amount of data may distract the user. As multi-column forms allow input fields with different sizes — at least our form does — they may correspond to the user’s expectation.

Approach to a flexible multi-column web form (HTML/CSS)

HTML structure

This is what we need:

1. a wrapper that uses negative margins for left and right and therefore gets wider than the form itself. The purpose is to compensate the margins of inner elements and align them with the form.

   
   <form class="dm_form" ..>
      <div class="form_wrapper">
      ..
      </div>
   </form>
   

2. embracing labels in order to get around supplemental div containers.

   
   <label ..>
      (text)
      (input)
   </label>
   

3. a bunch of spans used for titles and stuff and being abused as block elements.

   
   <label ..>
      <span class="wrapper">
         <span class="title">First name *</span>
         <input class="field" id="firstname" type="text" />
      </span>
   </label>
   

CSS, code and example

See an example of the flexible form and find further information – mainly the CSS part – in the source.
Last update: August 6, 2008

Browser compatibility

The form seems to work smoothly in common browsers like Firefox, Opera (a wee bit unsteady) and Safari. IEs 6+7 need a little help from javascript in order to reduce the width of input fields by a few pixels. IE8 is fine now.

License

This approach to flexible multi-column forms is released under a Whatever-you-like-to-do license and can therefore be used for whatever you like to do.

Discussion

We are aware of the form not winning an award for its semantic markup. That is why we call it an »approach«. In fact it is not evil and we consider it to be a gentle way of getting a flexible and scalable form that is valid, well structured, tableless and works in common browsers.
As usual: feedback is welcome!

Updates

• November 20, 2007
  Picked up some positioning problems in Apples new Safari 3 browser. Will fix it later – or even better will come up with a new approach to flexible forms.
• November 22, 2007
  Up for Safari 3 now. However, a new approach definitely to come.
• July 12, 2008
  Adjusted box sizing in Opera 9.
• August 6, 2008
  Works fine in IE 8 now.
• March 20, 2009
  Works fine in IE 8 final now again: doesn’t need any specific styles, just clear out the IE 8 beta stuff now.

Related articles and yet another web forms

1. The Subtraction Good Form 0.1 (Khoi Vinh)
2. The Subtraction Good Form 0.2 (Thomas Maas)
3. A form with style (Stu Nicholls)
4. CSS-Only, Table-less Forms (Jeff Howden)
5. Web Application Form Design (Luke Wroblewski)
6. Accessible HTML/XHTML Forms: Beginner Level (WaSP)
7. Accessible HTML/XHTML Forms: Intermediate Level (WaSP)
8. Accessible HTML/XHTML Forms: Advanced Level (WaSP)
9. CSS-Based Forms: Modern Solutions (Smashing Magazine)