473,657 Members | 2,476 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

sizing textfields

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

Kevin

Dec 29 '07 #1
5 2103
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">Passw ord:
<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.tu t.fiwrote in message
news:zi******** *************@r eader1.news.sau nalahti.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">Passw ord:
<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******@sbcgl obal.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
2608
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 the pulldown value using javascript I can open the database and select the record using php how can i combine the 2 to within the onchange option of the pull down.
1
2272
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
1919
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, the new textfields in the div element are not there anymore. Does anyone know how this scenario is usually handled?
1
1228
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 re-directed to a page based off of their inputs into those fields. Some of the code is <form name="SomeForm"> <tr><td colspan="1"><img src="default.aspx?uid=SomeID&coid=SomeOtherID&pgid=31&key=SomeKey"
6
9965
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
1275
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 button in that grid when i click on edit button it has to populate the corresponding userid items to the another asppage containing textfields. i had tried this by querystring but it is not done.please help me . ...
1
1847
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, ie as many records in the MySql-table as many rows in my Html- table(say T1).I am creating this dynamic table using a Jsp-scriptlet and I have set a vertical scrollbar on the <divsuch that user can see 5 rows of T1 at a time.Each row in T1 has a...
3
2969
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 parameter as trig functions and roots. when i enter 1 value in the first textfield and leave the other blank, the program doesnt give any output. Is there any way so i can use only 1 textfield for functions which take 1 parameter?
9
2048
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 fixed width and you want textfields to be as wide as textareas. Now, we can use a bit of CSS to set the width and for textareas also the height.
0
8420
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8324
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
8516
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6176
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5642
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4330
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2743
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1970
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1733
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.