Основное меню

Улучшение формы входа пользователей

Первым делом нам потребуется собственно сама форма входа, создаем HTML-файл и добавляем туда этот код:

<div class="login_box">
<div class="login_title">Войти на сайт</div>
<center>
<form method="post" action="enteruser.php">
<input name="login" value="Логин" class="login_input" type="text">
<br>
<input name="login_password" value="password"class="password_input" type="password">
<input onclick="submit();" class="bottom_input" name="image" src="images/enter.jpg" value="" type="submit">
</form>
<span class="regtext">
<a href="register.php">Регистрация</a>
&nbsp;&nbsp;
<a href="lostpassword.php">Напомнить пароль?</a>
</span>
</center>
</div>

Теперь приукрасим данную форму при помощи CSS, задаем стили:

.login_box {
margin:0;
width:190px;
overflow:hidden;
color:#fff;
background:url(images/bg.png) top no-repeat;
border:1px solid #CCC;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.login_title {
font:12px Arial;
color:#fff;
margin:0 0 5px 0;
text-align:center;
}
.login_input {
background:url(images/login.png) top left no-repeat;
width:165px;
}
.password_input {
background:url(images/password.png) top left no-repeat;
width:102px;
}
.bottom_input {
background:url(images/enter.png) no-repeat;
width:58px;
margin:3px 0 5px 2px;
}
.login_input, .password_input, .bottom_input{
height:20px;
line-height:20px;
padding:1px 5px;
margin:0 0 5px 0;
border:none;
color:#555;
font-size:12px;
}
.regtext a {
font:9px Verdana;
color:#fff;
line-height:18px;
}

Сохраняем выше указанный код в файл style.css, а теперь посмотрим что получилось. Откройте HTML-файл и посмотрите форму входа и кликните мышкой по полю "Логин". В поле слово "логин" не исчезло, ничего так же не произойдет если вы кликните на просто пустое место страницы. Чтобы все заработало, нужно воспользоваться javascript. Отредактировав оба поля при этом применив javascript, мы получаем следующий код:

<input name="login" value="Логин" class="login_input"
onfocus="if(this.value=='Логин'){this.value='';}"
onblur="if(this.value==''){this.value='Логин';}"
type="text">

<input name="login_password" value="password"class="password_input"
onfocus="if(this.value=='password'){this.value='';}"
onblur="if(this.value==''){this.value='password';}"
type="password">

Давайте немного проясним ситуацию разобрав по полочкам, то что мы отредактировали.
Значение "onfocus" - кликнув по полю, мы меняем значение "Логин" на пустое поле
Значение "onblur" - кликнув по пустому месту на странице мы восстанавливаем значение "Логин"
Исходные файлы в архиве.

Скачать файл
размер файла: 25,99 Kb
cкачиваний: 40

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.