You only have to set the common container of the label and the form  
element to position:relative for this to work perfectly. For example,  
if your label and field are in a p or li tag, you could do this:

form p, form li {
        position: relative;

And that's it. Now each label will float over top of the field it  
belongs to. It doesn't get inserted into the field, so you don't have  
the asterisk problem. A click on the label causes the field to gain  
focus (so there's no issue with the label masking the physical  
boundaries of the input) and when the field gains focus, the rest of  
the script hides the label so you can type in the field. When the  
field blurs, the script works out whether or not to show the label  

For another visual effect, you could use setOpacity() on the label,  
and play with the levels and font to give the label a watermark effect  
that could appear to be behind the input text.

Try it out, it works.


On Mar 3, 2009, at 5:35 AM, Quleczka wrote:

> Hi,
> On 3 Mar, 06:00, Walter Lee Davis <> wrote:
>> See if this would help you. It's based on the classic A List Apart
>> article, but just written now off the top of my head:
> I can be wrong but honestly I can't see how this script can set lebel
> text into input field with especially with "label.setStyle({zIndex:
> 2,position:'absolute',top:'3px',left:'3px',color:'#666'});" which set
> all labels in the same top corner of page ?
> Even if  it does somehow ...inserting label text value into password
> input field will produce asterixes there not letters - that is main
> problem  :)
> Quleczka
> >

You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to