css form elements

  • Thread starter timothy.pollard
  • Start date
T

timothy.pollard

Hi all

I've created a form where the form element and text styling is done by
css. I've also set an initial value in my html which clears when you
click in the box - so NAME appears in the form element where name goes,
but this clears as soon as you click in it. Everything is fine except I
want the initial value (NAME) to be in light grey but the text the user
types in once the initial value has cleared to be black (e.g. Tim
Pollard). I've seen this done on other sites, but can't figure out how
to do it.

Anybody know?

Here's my style css for the text boxes:

..blueform {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #96969A;
border: 1px solid #7882b8;
}

Here's a typical html form element:

<input name="EmlSubj" type="text" class="blueform" id="EmlSubj"
value="SUBJECT" size="36" ONFOCUS="clearDefault(this)">

Thanks in advance for any suggestions.

TP
 
J

Jonathan N. Little

Hi all

I've created a form where the form element and text styling is done by
css. I've also set an initial value in my html which clears when you
click in the box - so NAME appears in the form element where name goes,
but this clears as soon as you click in it. Everything is fine except I
want the initial value (NAME) to be in light grey but the text the user
types in once the initial value has cleared to be black (e.g. Tim
Pollard). I've seen this done on other sites, but can't figure out how
to do it.

Anybody know?

Here's my style css for the text boxes:

.blueform {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #96969A;
border: 1px solid #7882b8;
}

Here's a typical html form element:

<input name="EmlSubj" type="text" class="blueform" id="EmlSubj"
value="SUBJECT" size="36" ONFOCUS="clearDefault(this)">

Thanks in advance for any suggestions.

I will only comment that 8px is *extremely* small, have pity on the
middle-aged and make that font-size: 100%, and least 9em if you must reduce.

Make a class that has the input element the style you want after focus
and add to your JavaScript function "clearDefault()" to change the
className of parsed element to this class.
 
M

Michael Winter

Jonathan N. Little wrote:

[snip]
I will only comment that 8px is *extremely* small, have pity on the
middle-aged and make that font-size: 100%,

Being middle-aged is irrelevant: 8px is too small full stop. On my
monitor, which isn't all that large, 8px Verdana is blurry and barely
readable. 8px Arial (one of the fallbacks the OP specified) is a
complete mess and not at all readable (no matter how perfect your
eyesight might be).

If I increase my display settings to 1280x1024, 8px Verdana becomes
indistinct: I can't tell the difference between a "c", an "e", or an "o"
without straining my eyes. You don't want to know what Arial looks like.

All I can say is thank &deity; for decent browsers with minimum font
size preferences.
and least 9em if you must reduce.

I assume that was supposed to be 9px. If it was, I would still say
higher than that (my personal minimum is 12px). If it was meant to be
..9em, the OP could go lower, but I'd say .8em (or 80% of the browser
default) is the /absolute/ minimum anywhere within a document (including
legalese).

[snip]

Mike
 
J

Jonathan N. Little

Michael said:
Jonathan N. Little wrote:

I assume that was supposed to be 9px. If it was, I would still say
higher than that (my personal minimum is 12px). If it was meant to be
.9em, the OP could go lower, but I'd say .8em (or 80% of the browser
default) is the /absolute/ minimum anywhere within a document (including
legalese)

Typo, should have been .9em, .8em maybe for legalese but not for form
input, I would only go .9em
 
J

Jukka K. Korpela

I've also set an initial value in my html which clears when you
click in the box

A completely wrong idea. Even though the WAI WCAG 1.0 document suggests such
a technique until user agents support empty fields, it was a very bad idea
from the beginning, and the time has surely come when any user agent worth
mentioning supports empty fields.
<input name="EmlSubj" type="text" class="blueform" id="EmlSubj"
value="SUBJECT" size="36" ONFOCUS="clearDefault(this)">

Make it

<label for="EmlSubj">Subject:</label>
<input name="EmlSubj" type="text" class="blueform" id="EmlSubj" size="36">

(except that "36" is probably somewhat too small - you aren't trying to make
a form a piece of art at the cost of actual usefulness and usability, are
you?)
 
T

timothy.pollard

Hi guys

Thanks for the ideas.

Yes, my customer does feel strongly about style over usability. I did
make the point.....!

In the end I resolved this by creating a separate style and simply
calling this as below on the form elements:

<input name="EmlSubj" type="text" class="blueform" id="EmlSubj"
value="SUBJECT" size="36"
ONFOCUS="clearDefault(this);this.className='blueform2';this.size='30'">

In this example my onfocus has three elements, to clear the default, to
change the classname and also to resize the box - I chose to make my
active font larger so needed to reduce the number of chars
proportionately to ensure my layout didn't get messed up.

Haven't tested it on everything but works ok on firefox pc and safari
mac as well as IE pc.

Thanks for the help.

TP
 
A

Adrienne Boswell

Gazing into my crystal ball I observed (e-mail address removed)
writing in
<input name="EmlSubj" type="text" class="blueform" id="EmlSubj"
value="SUBJECT" size="36" ONFOCUS="clearDefault(this)">

What do you do if the user makes an error? Do you show the values the user
has already filled in? If so, if the user clicks on a correct field by
accident, does it clear? That could be really annoying for the user.
There are ways of getting around this server side.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top