CSS forms?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi everyone...Hope you can help me...

I have quiet a few forms to create soon and Iam not totaly up on
What I would link to to do is instead of having the <lable> then the
is just have the form field with the instructions in side eg:
[__Enter Your First Name Here_____]
and when the user click in the filed the text disapears.

I know this can be done with javascript and the ecomerce site I am
doing needs to have javascript switched on

But what do I do with the lable field?
and what impact does the senarion have on accessability?


Re: CSS forms?


Silkster wrote:

Quoted text here. Click to load it

I don't think, this is a good idea - even if you can rely on the presence of
JS in the user-agent.

Can you rely on the inputs always being wide enough to show the complete
instructions? If the instructions are clipped, there's no way for the user
to see the hidden part, because once she clicks on it to scroll to the
right it will disappear.

And a problem that people like me with a very 'selective' short-term memory
will have: click on the input and immediately forget what was written
there, e.g. for dates: "was is YYYY-MM-DD or MM-DD-YY or ... ?"

If your layout is so tightly packed that you think there's no space left for
labels beside the form controls, than the real problem is your layout.


Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://pink.odahoda.de /

Re: CSS forms?

Quoted text here. Click to load it

If they're all text inputs then could you not use the value attribute to
enter the instructions within the input?  Of course, it wouldn't disappear
when they clicked it (could make it do that with JS for those with it
enabled) and you could end up with them posting your labels back at you.


Re: CSS forms?

Silkster wrote:
Quoted text here. Click to load it

Don't know, but I think most are intuitive and can understand when they
see a label "Name;" and a text box to the left that their name should be
entered in that box. LABEL and INPUT will work on all browsers and even
text only ones (e.g., Lynx) whereas JavaScript will not. If extra
instruction is required you can always add it "Date (yy-mm-dd):" and
follow up with your validation...

There is something to be said for convention, put a cylindrical knob
half way up and on the right side of door and folks' first impulse will
be to turn it and not press that button in the center to open the door.
Convention is your friend as a designer...

Take care,


Site Timeline