Code
<form name="login" action="#" method="post">
<div id="username">
<label for="username-field" class="overlabel">Имя пользователя...</label>
<input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" />
</div>
<div id="password">
<label for="password-field" class="overlabel">Пароль...</label>
<input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" />
</div>
<div id="submit">
<input type="submit" name="submit" value="Войти" tabindex="3" />
</div>
</form>
Code
<style type="text/css">
form#login {
position:relative;
}
div#username,
div#password {
position:relative;
float:left;
margin-right:3px;
}
input#username-field,
input#password-field {
width:10em;
}
label.overlabel {
position:absolute;
top:3px;
left:5px;
z-index:1;
color:#999;
}
label.overlabel {
color:#999;
}
label.overlabel-apply {
position:absolute;
top:3px;
left:5px;
z-index:1;
color:#999;
font-family: Verdana;
font-size: 11px;
}
</style>
Code
<script type="text/javascript">
function initOverLabels () {
if (!document.getElementById) return;
var labels, id, field;
labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
if (labels[i].className == 'overlabel') {
id = labels[i].htmlFor || labels[i].getAttribute('for');
if (!id || !(field = document.getElementById(id))) {
continue;
}
labels[i].className = 'overlabel-apply';
if (field.value !== '') {
hideLabel(field.getAttribute('id'), true);
}
field.onfocus = function () {
hideLabel(this.getAttribute('id'), true);
};
field.onblur = function () {
if (this.value === '') {
hideLabel(this.getAttribute('id'), false);
}
};
labels[i].onclick = function () {
var id, field;
id = this.getAttribute('for');
if (id && (field = document.getElementById(id))) {
field.focus();
}
};
}
}
};
function hideLabel (field_id, hide) {
var field_for;
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
field_for = labels[i].htmlFor || labels[i].getAttribute('for');
if (field_for == field_id) {
labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
return true;
}
}
}
window.onload = function () {
setTimeout(initOverLabels, 50);
};
</script>