473,383 Members | 1,788 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 software developers and data experts.

sizing textfields

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

Kevin

Dec 29 '07 #1
5 2082
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/

Dec 29 '07 #2

"Jukka K. Korpela" <jk******@cs.tut.fiwrote in message
news:zi*********************@reader1.news.saunalah ti.fi...
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

Jan 2 '08 #3
Scripsit Kevin R:

- -
>--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
I appreciate your insights...
Your fullquote (even including my sig) contradicts your statement.
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.
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!

Jan 2 '08 #4
I appreciate your insights

Thank You
Kevin
Jan 7 '08 #5
"Kevin R" <kr******@sbcglobal.netwrites:
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
Jan 7 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: R.G. Vervoort | last post by:
I would like to select an option in a pulldown, select a record in a mysql database depending on the pulldown selection and then put the data from the record in the textfields. I can retrieve...
1
by: Filips Benoit | last post by:
Dear All, After copying a record using an Stored procedure all textfields (nvarchar) has max lenght ! See VBA-code and SP below VBA-code tos execute SP
1
by: Ed | last post by:
Hi, I have an html page with a div element within a form for dynamically creating textfields. The problem is when I click a link on the page, or the submit button, then click the back button,...
1
by: Rich Wahl | last post by:
Ok, This may sound like a noob question, but I have an application, that asks the user to fill in fields from a pre-generated list of possibilities. And upon clicking submit, the user is...
6
by: anirban.anirbanju | last post by:
hi there, i've some serious problem to add rows dynamically in a table. my table contains 5 cell. | check | from_value | to_value | color_text | color_value |...
0
by: chandutp | last post by:
hi i am new to this forum can i populate datagrid items of asp page to another asp page having textfields. in this datagrid userId is the index key by which it referenced.and i am using edit...
1
by: eureka | last post by:
Hi folks, I am working on a webapplication using Jsp and JS. On my main Jsp(Jsp1) I have a table which is created dynamically inside a <divand contains all the backend-table's records as rows,...
3
by: bravephantom | last post by:
In my project "scientific calculator", im using 2 textfields in my GUI app. the problem now (or actually what i dislike) is the user has to use the 2 textfields even if he needs a function of only 1...
9
by: Jeff | last post by:
I've always set form element sizes by using size on textfields and rows and cols on textareas. That's always lead to inconsistencies and a bit of guesswork when you want a form element to fill a...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.