HighDots Forums  

sizing textfields

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss sizing textfields in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Kevin R
 
Posts: n/a

Default sizing textfields - 12-29-2007 , 04:41 PM






How do you create those small textfields that I see for inputing passwords
and such?

Kevin


Reply With Quote
  #2  
Old   
Jukka K. Korpela
 
Posts: n/a

Default Re: sizing textfields - 12-29-2007 , 04:58 PM






Scripsit Kevin R:

Quote:
How do you create those small textfields that I see for inputing
passwords and such?
I don't know what fields you see, so I cannot answer that specific
question.

But a "password" field (I use quotes, since it need not be a password
that is being input, and you can use a normal text input field for
passwords as well) can be sized just as normal text input fields can.
This means that it is pretty simple in principle and somewhat messy if
you consider all the browser oddities.

Here's what I recommend, assuming that the password length (or the
length of the significant part is at most 8 characters):

<label for="pwd">Password:
<input type="password" class="pwd" id="pwd" name="pwd" size="8"></label>

with

input.pwd { font-family: Courier New, monospace;
font-size: 100%; }

Using a monospace font virtually guarantees that the field is rather
exactly 8 characters wide, or of the width specified in the size="..."
attribute in general. Setting font size to 100% defeats the common
cluelessness in browsers: by default they may display form fields in a
font smaller than the page's overall font size. This is absurd since
form fields are an important part of the interaction and their text must
be easy to read, for checking. Password fields echo a generic character,
so this is less important, but for uniformity, they should have the same
font size as text input fields.

Actually what I'd _really_ recommend is two alternative fields for
password input, one with type="password" and another with type="text",
with a short explanation. This lets the user decide whether he wants
"bullet echo" (or "asterisk echo") or normal echo.

It would be foolish to make password fields small. There's almost always
at most one such field on a page, and it is supposed to do a useful job
in the interaction with the user, i.e. be useful, rather than small,
pretty, and sexy to the dee-ziner's eye.

Incidentally, I first considered making Consolas the primary font
suggestion. However, on IE 7 (checked both on XP and on Vista), the
generic echoing character (a largish bullet) does not appear but a
symbol of unrepresentable glyph (a small "?" in a rectangle) appears
instead. While this is not that bad as such, it might be confusing and
alienating to users who are accustomed to a different echo. This might
be some oddity in the Consolas font or in the implementation of the
echo. (What _is_ that largish bullet, anyway, in Unicode terms?)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/



Reply With Quote
  #3  
Old   
Kevin R
 
Posts: n/a

Default Re: sizing textfields - 01-02-2008 , 12:31 AM




"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote

Quote:
Scripsit Kevin R:

How do you create those small textfields that I see for inputing
passwords and such?

I don't know what fields you see, so I cannot answer that specific
question.

But a "password" field (I use quotes, since it need not be a password that
is being input, and you can use a normal text input field for passwords as
well) can be sized just as normal text input fields can. This means that
it is pretty simple in principle and somewhat messy if you consider all
the browser oddities.

Here's what I recommend, assuming that the password length (or the length
of the significant part is at most 8 characters):

label for="pwd">Password:
input type="password" class="pwd" id="pwd" name="pwd" size="8"></label

with

input.pwd { font-family: Courier New, monospace;
font-size: 100%; }

Using a monospace font virtually guarantees that the field is rather
exactly 8 characters wide, or of the width specified in the size="..."
attribute in general. Setting font size to 100% defeats the common
cluelessness in browsers: by default they may display form fields in a
font smaller than the page's overall font size. This is absurd since form
fields are an important part of the interaction and their text must be
easy to read, for checking. Password fields echo a generic character, so
this is less important, but for uniformity, they should have the same font
size as text input fields.

Actually what I'd _really_ recommend is two alternative fields for
password input, one with type="password" and another with type="text",
with a short explanation. This lets the user decide whether he wants
"bullet echo" (or "asterisk echo") or normal echo.

It would be foolish to make password fields small. There's almost always
at most one such field on a page, and it is supposed to do a useful job in
the interaction with the user, i.e. be useful, rather than small, pretty,
and sexy to the dee-ziner's eye.

Incidentally, I first considered making Consolas the primary font
suggestion. However, on IE 7 (checked both on XP and on Vista), the
generic echoing character (a largish bullet) does not appear but a symbol
of unrepresentable glyph (a small "?" in a rectangle) appears instead.
While this is not that bad as such, it might be confusing and alienating
to users who are accustomed to a different echo. This might be some oddity
in the Consolas font or in the implementation of the echo. (What _is_ that
largish bullet, anyway, in Unicode terms?)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
I appreciate your insights...

What I was specifically refering to was the small password fields found just
below the header so that they could be included in every page so that the
user doesn't have to travel to a specific page to login. They tend to be
smaller by almost half the normal password and user id fields. It is so much
about looking good as reducing the amount of real estate that these two
field box take up.

Thank You
Happy New Year
Kevin Raleigh



Reply With Quote
  #4  
Old   
Jukka K. Korpela
 
Posts: n/a

Default Re: sizing textfields - 01-02-2008 , 04:11 PM



Scripsit Kevin R:

- -
Quote:
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
I appreciate your insights...
Your fullquote (even including my sig) contradicts your statement.

Quote:
What I was specifically refering to was the small password fields
found just below the header so that they could be included in every
page so that the user doesn't have to travel to a specific page to
login.
I was afraid it was something like that.

How often did you hear an actual, living user complain that he "has to
travel to a specific page to login"? I hear people complaining that they
have to login at all, on sites that really wouldn't need any login. But
if they have to login, they expect to find the login form on the main
page.

Quote:
They tend to be smaller by almost half the normal password and
user id fields. It is so much about looking good as reducing the
amount of real estate that these two field box take up.
You save space and make the page look better by _omitting_ such a form.

You should make up your mind. Either it's needed, or it is not. If it is
needed, it needs to be operational and easy to use, and even people with
reduced eyesight should be able to use it conveniently.

Of course, I could tell you how to make them small (and I indirectly
told it by revealing how the size can be "controlled"), but then I would
have to... be first convinced of the utmost uselessness of the site as a
whole, so that I can help to destroy it with good conscience.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Quote this sig to join the Clueless Club!



Reply With Quote
  #5  
Old   
Kevin R
 
Posts: n/a

Default Re: sizing textfields - 01-06-2008 , 09:24 PM



I appreciate your insights

Thank You
Kevin

Reply With Quote
  #6  
Old   
Sherman Pendley
 
Posts: n/a

Default Re: sizing textfields - 01-07-2008 , 06:38 AM



"Kevin R" <kraleigh (AT) sbcglobal (DOT) net> writes:

Quote:
I appreciate your insights
Whose insights? About what?

Please learn to quote properly, thanks.

sherm--

--
My blog: http://shermspace.blogspot.com
Cocoa programming in Perl: http://camelbones.sourceforge.net


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.