Шаг 1. Каркас формы.
Как и всегда, в самом начале, мы займемся созданием конструкции нашей формы. К ней мы сразу привяжем несколько стилей, о которых немного позже... Итак, ниже я расположил код основной конструкции нашей формы:
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>
Шаг 2. Стилизация формы:
Теперь для более престижного вида формы мы применим ей несколько стилей. Это будет и размер полей, и дизайн текста, и многое-многое другое. Ниже я разместил код с каскадными таблицами, который Вы должны разместить между тегами <head> и </head> своего документа:
CSS:
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>
Шаг 3. "Привязка" основного JavaScript'а
Следующим шагом нашей работы будет вставка JavaScript'а, очень нужного для правильной работы нашей формы. Для этого Вам необходимо просто разместить нижеприведенный код перед закрытием тега head:
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>
