Здравствуйте. В этом уроке Вы научитесь размещать название поля в нем самом же. При этом при клике на поле, например поисковой формы, название будет послушно скрываться. Это, я думаю очень интересный и практичный метод, который обязательно найдет свое место на любом сайте. Однако, вопреки Вашим ожиданиям, я буду применять данный урок на форме входа в систему. Ниже Вы можете просмотреть пример того, что получилось у меня и скачать исходники к данному уроку:
Шаг 1. Каркас формы.
Как и всегда, в самом начале, мы займемся созданием конструкции нашей формы. К ней мы сразу привяжем несколько стилей, о которых немного позже... Итак, ниже я расположил код основной конструкции нашей формы:
<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:
<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:
<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>
Заключение.
Наша стилизация формы для входа полностью готова. Надеюсь, Вам урок очень понравился, жду Ваших комментариев. До новых встреч!