form elements: sizing of text areas

[gerg]

Hello,

I've got a login form that consists of two text areas, a standard text
area and a password area. The code is below:

<input class="loginform" name="user" type="text" size="10">
<input class="loginform" name="pass" type="password" size="10">

Both have a size of 10, however the password field in IE looks smaller
than the regular field. Any work around this? Is this an IE problem?
I'm on a new machine and don't have FireFox installed yet, but if anyone
could shed some light on this it would be great.

Thanks

Greg

 

[Jukka K. Korpela]

<input class="loginform" name="user" type="text" size="10">
<input class="loginform" name="pass" type="password" size="10">

Both have a size of 10, however the password field in IE looks smaller
than the regular field.

Really? Not here.

Wait... wait... on Windows XP, there is a _one pixel_ difference in the
widths. It's probably a design mistake in IE, so and maybe they'll fix it.
Maybe you can submit a bug report

Any work around this? Is this an IE problem?

Is this a problem, seriously? Whose problem? You are setting up login form,
not creating a piece of art, right?

But of course there are solutions and workarounds:

- Use input type="text" for both. This may improve security, and it surely
improves usability.

- Set explicit width, e.g. (CSS code)
input.loginform { width: 6em; }

- Set the font to monospace, which is a good idea anyway and seems to
magically make the one-pixel difference vanish:
input.loginform { font-family: Courier New, monospace; }

 

[gerg]

Really? Not here.

Wait... wait... on Windows XP, there is a _one pixel_ difference in the
widths. It's probably a design mistake in IE, so and maybe they'll fix it.
Maybe you can submit a bug report




Is this a problem, seriously? Whose problem? You are setting up login form,
not creating a piece of art, right?

But of course there are solutions and workarounds:

- Use input type="text" for both. This may improve security, and it surely
improves usability.

- Set explicit width, e.g. (CSS code)
input.loginform { width: 6em; }

- Set the font to monospace, which is a good idea anyway and seems to
magically make the one-pixel difference vanish:
input.loginform { font-family: Courier New, monospace; }

Thanks for your response! I agree, it's just a login form, but I'm
incredibly anal. (insert dirty joke here) little things like that really
bother me. I was setting the size in the form, but once I changed it to
6em, as stated above, they looked great. You also stated that
changing both inputs to text improves security? I thought the whole
idea behind a password field was to stop people from looking over your
shoulder and getting your password? How would changing them both to
text improve usability or security? Again, thanks for your help.

Greg

 

[Jukka K. Korpela]

You also stated that
changing both inputs to text improves security?

May improve.

I thought the whole
idea behind a password field was to stop people from looking over your
shoulder and getting your password?

Thus, when you think so, so will type your password with full confidence on
security, without realizing how easy it is to get the password by looking at
the keyboard. Moreover, since there is a dummy ("*") echo, you will mistype
your password and retype it a few times, mumbling "was by password here
'gerg' or 'greg'?"

How would changing them both to
text improve usability or security?

Usability is surely improved, since it is easier to type something when you
see your text echoed visibly. Usually usability and security are
contradictory goals, but maybe not here.

An author could provide _two_ fields for password, a normal field and
a masked-out echo field (misleadingly called "password" field), letting the
user decide. The problem is that this is not common, and users are not
familiar with it, and many people would have difficulties in getting the
idea.

 

[Richard]

Greg
I have tried to copy the same code and viewed it in my browser (IE).
The text boxes look the same. I do not think it is IE problem. Try to
put the text boxes in the cells of a table

Richard