Вы наверное много раз обращали внимание на подсказки в полях, которые исчезают при нажатии на поле и наборе текста. В нашей форме будет использован другой приём. При наборе текста, подсказка будет не исчезать, а плавно отодвигаться вверх.
Реализовать такой эффект можно не прибегая к JavaScript, с помощью только одного CSS.
Изображение
Структура формы входа, от стандартной, будет отличаться не сильно:

Код: Выделить всё

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" action="{S_LOGIN_ACTION}" class="floating-labels-form">
<h3>{L_LOGIN_LOGOUT}</h3>
<fieldset>
<span class="form-field">
<input required type="text" name="username" placeholder="{L_USERNAME}" />
<label for="username">{L_USERNAME}</label>
</span>
<span class="form-field">
<input required type="password" name="password" placeholder="{L_PASSWORD}" />
<label for="password">{L_PASSWORD}</label>
</span>
<span class="form-autologin">
<!-- IF S_AUTOLOGIN_ENABLED -->
<label for="autologin"><input type="checkbox" name="autologin" /> {L_LOG_ME_IN}</label>
<!-- ENDIF -->
</span>
<span class="form-links">
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; / &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
</span>
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
</fieldset>
</form>
<!-- ENDIF -->
Главное отличие, это добавление в поле подсказки (placeholder). Написанная в нём подсказка будет показана в спокойном состоянии, при активации поля показывается текст в <label> и он не обязательно должен быть таким же.

CSS формы:

Код: Выделить всё

/* Form label design */
.form-field {
background-color: white;
position: relative;
width: 48%;
display: block;
float: left;
margin: 5px 1%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.form-field label {
font-size: 1.1em;
position: absolute;
left: 0.35em;
top: 0;
color: gray;
opacity: 1;
transition: opacity 200ms, top 200ms, color 200ms;
-moz-transition: opacity 200ms, top 200ms, color 200ms;
-o-transition: opacity 200ms, top 200ms, color 200ms;
-webkit-transition: opacity 200ms, top 200ms, color 200ms;
}

.form-field input:required, .form-field input:invalid {
border: none;
outline: none;
}

:-moz-submit-invalid { box-shadow: none; }
:-moz-ui-invalid { box-shadow: none; }

.form-field input, .form-field select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: none;
display: block;
width: 100%;
padding: 1.0em;
padding-top: 1.15em;
background-color: transparent;
font-size: 1.2em;
cursor: auto;
}

.form-field select {
padding-right: 0.07em;
}

.form-field input:invalid ~ label {
top: 1.3em;
left: 1em;
opacity: 0;
z-index: -1;
}

.form-field input:focus ~ label, .form-field select:focus ~ label {
color: #0D7EFF;
}

.form-autologin {
display: block;
margin: 5px 1%;
clear: both;
}

.form-links {
font-style: italic;
font-size: 11px;
padding: 8px 1%;
float: left;
}

.floating-labels-form h3 {
border-bottom-color: #BDBDBD;
color: #3C73A7;
font-size: 1.4em;
margin: 5px 1%;
padding-bottom: 5px;
}

.floating-labels-form input.button2 {
float: right;
margin-right: 1%;
padding: 7px 15px;
background: #6BB2F5;
border: 1px solid #6BB2F5;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-size: 12px;
}

.floating-labels-form input.button2:hover {
background: #2792F7;
border: 1px solid #2792F7;
}
Посмотреть работу можно здесь: IE до 10 версии не поддерживает атрибут placeholder. В нём подсказка будет видна сразу в верхней части поля.
Комментарии: 1

JuDoРафаэль 25 апр 2014, 01:22 Сообщение

спс
  • 0

Похожие темы