![]() | |
![]() |
| | Thread Tools | Display Modes |
#1
| |||
| |||
|
#2
| |||
| |||
|
|
How do you create those small textfields that I see for inputing passwords and such? |
#3
| |||
| |||
|
|
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... |
#4
| |||
| |||
|
|
-- 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. |
#5
| |||
| |||
|
#6
| |||
| |||
|
|
I appreciate your insights |
![]() |
| Thread Tools | |
| Display Modes | |
| |