Загрузка...





Выпадающая форма для входа и регистрации

Выпадающая форма для входа и регистрации


Урок по созданию выпадающей формы для входа и регистрации на сайте с использованием CSS3 и jQuery. Использование такой формы поможет избежать ожидания загрузки отдельной страницы для входа на сайт.

Для создания формы будут использоваться элементы HTML, которые преобразуются в кнопки с помощью CSS3 - стрелки, показывающие состояние формы (развернуто/свернуто). Также будет использоваться jQuery для анимированного разворачивания/сворачивания формы. А в самой форме будут использоваться новые свойства HTML5.

HTML

<nav>
	<ul>
		<li id="login">
			<a id="login-trigger" href="#">
				Войти <span>&#x25BC;</span>
			</a>
			<div id="login-content">
		<form>
			<fieldset id="inputs">
				<input id="username" type="email" name="Email" placeholder="Ваш email адрес" required>   
				<input id="password" type="password" name="Password" placeholder="Пароль" required>
			</fieldset>

			<fieldset id="actions">
				<input type="submit" id="submit" value="Войти">
				<label><input type="checkbox" checked="checked"> Запомнить меня</label>
			</fieldset>
		</form>
			</div>                     
		</li>
		<li id="signup">
			<a href="">Регистрация</a>
		</li>
	</ul>
</nav>


CSS



jQuery

avaScript код достаточно простой. Структура if…else организует индикацию текущего состояния формы. Происходит переключение содержания элемента span между символами ? и ?.

$(document).ready(function(){
$('#login-trigger').click(function(){
	$(this).next('#login-content').slideToggle();
	$(this).toggleClass('active');					
	
if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
	else $(this).find('span').html('&#x25BC;')
	})
});


Примечание: обязательно включите библиотеку jQuery на странице с формой.шаблоны для dle 11.2


    Как сохранять введенные в форму данные?

    Как сохранять введенные в форму данные?
    Думаю, многие из Вас встречали сайты, где Вы полчаса заполняли какую-нибудь форму, затем у Вас была какая-то ошибка, и Вы возвращались обратно к форме, однако, все данные были стёрты. Чтобы так не бесить пользователей, надо обязательно позаботиться о

    Как сделать подсказку для поля формы

    Как сделать подсказку для поля формы
    В этом уроке я покажу, как в поле формы для заполнения данных добавить подсказку, которая поможет правильно заполнить то или иное поле. Делается всё просто надеюсь вы поймёте.

    Защита Email от спамеров на своём сайте

    Защита Email от спамеров на своём сайте
    Многим уже надоели спамеры и часто приходиться менять свои почтовые ящики, для того что бы от них избавиться. Но это не выход! В этой статье я расскажу вам о простом и быстром способе как защитить Email сайта от спамеров зашифровав его.

    Создание простой формы регистрации для сайта

    Создание простой формы регистрации для сайта
    В этом уроке покажу вам как создать простую форму регистрации на сайте на PHP и MySQL которую вы сами потом сможете усовершенствовать по своему желанию. Добавить защиту, оформление, поля с данными, загрузку аватаров.

    Функция генерации пароля

    Функция генерации пароля
    Как написать простой генератор паролей на правильно составленный пароль - это максимальная длина, максимальное количество используемых символов и отсутствие каких-либо повторений. В наше время уже лучше пароль выдавать пользователю чем просить его


Просмотров: 4 033
Добавлено: 11-07-2013, 17:39
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Наверх
[X]
Добро пожаловать на сайт!

Войти | Зарегистрироваться