Здравствуйте, есть форма авторизации, поле для ввода пароля нужно оформить след.образом: внутри input'а при загрузке страницы находится поясняющая надпись "пароль", когда <input> в фокусе надпись исчезает (например, как это сделано в форме авторизации на Яндексе). Делаю так: на input накладываю label с текстом «пароль». <label> связан с <input> через атрибут «for», который соотвествует идентификатору <input>, у которого для событий «onfocus» назначен обработчик события, изменяющий положение <label> (скрывающий его).

<input style="z-index:1" name="password_auth" type="password" onFocus="$(this).next('label').hide()"><label for="password_auth" style="position:relative; top:-20px; color: green; z-index:2; line-height:12px; font-size: 9px">пароль</label>

Но здесь есть два неприятных момента:
1. Если попытаться мышью сделать <input> активным и щелчок попадёт в надпись, то поле не активируется и надпись не исчезает
2. <label> немного сдвигает вниз то что находится под ним, соответственно при введении <input> в фокус, когда <label> исчезает, контент под ним резко "подпрыгивает", что тоже не хорошо.

Подскажите пожалуйста, как можно дополнить код?