• Главная»
  • Уроки»
  • CSS»
  • Простая и эффективная выпадающая форма регистрации на сайте

Простая и эффективная выпадающая форма регистрации на сайте

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

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

demosourse

 

Идея

Основная задача - избежать ожидания загрузки отдельной страницы для входа на сайт. Таким образом повышается уровень удобства использования интерфейса и пользователь получает возможность немедленной регистрации на сайте.

 

Ингредиенты решения

Для индикации состояния формы будут использоваться элементы HTML, которые преобразуются в кнопки с помощью CSS3 - стрелки, показывающие состояние формы (развернуто/свернуто).

Также будет использоваться jQuery для анимированного разворачивания/сворачивания формы.

А в самой форме будут использоваться новые свойства HTML5.

 

HTML

Ниже приводится разметка 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

Правил CSS достаточно много:

		nav ul {
		  margin: 0;
		  padding: 0;
		  list-style: none;
		  position: relative;
		  float: right;
		  background: #eee;
		  border-bottom: 1px solid #fff;
		  -moz-border-radius: 3px;
		  -webkit-border-radius: 3px;
		  border-radius: 3px;    
		}
		
		nav li {
		  float: left;          
		}
		
		nav #login {
		  border-right: 1px solid #ddd;
		  -moz-box-shadow: 1px 0 0 #fff;
		  -webkit-box-shadow: 1px 0 0 #fff;
		  box-shadow: 1px 0 0 #fff;  
		}
		
		nav #login-trigger,
		nav #signup a {
		  display: inline-block;
		  *display: inline;
		  *zoom: 1;
		  height: 25px;
		  line-height: 25px;
		  font-weight: bold;
		  padding: 0 8px;
		  text-decoration: none;
		  color: #444;
		  text-shadow: 0 1px 0 #fff; 
		}
		
		nav #signup a {
		  -moz-border-radius: 0 3px 3px 0;
		  -webkit-border-radius: 0 3px 3px 0;
		  border-radius: 0 3px 3px 0;
		}
		
		nav #login-trigger {
		  -moz-border-radius: 3px 0 0 3px;
		  -webkit-border-radius: 3px 0 0 3px;
		  border-radius: 3px 0 0 3px;
		}
		
		nav #login-trigger:hover,
		nav #login .active,
		nav #signup a:hover {
		  background: #fff;
		}
		
		nav #login-content {
		  display: none;
		  position: absolute;
		  top: 24px;
		  right: 0;
		  z-index: 999;    
		  background: #fff;
		  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
		  background-image: -webkit-linear-gradient(top, #fff, #eee);
		  background-image: -moz-linear-gradient(top, #fff, #eee);
		  background-image: -ms-linear-gradient(top, #fff, #eee);
		  background-image: -o-linear-gradient(top, #fff, #eee);
		  background-image: linear-gradient(top, #fff, #eee);  
		  padding: 15px;
		  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
		  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
		  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
		  -moz-border-radius: 3px 0 3px 3px;
		  -webkit-border-radius: 3px 0 3px 3px;
		  border-radius: 3px 0 3px 3px;
		}
		
		nav li #login-content {
		  right: 0;
		  width: 250px;  
		}
		
		/*--------------------*/
		
		#inputs input {
		  background: #f1f1f1;
		  padding: 6px 5px;
		  margin: 0 0 5px 0;
		  width: 238px;
		  border: 1px solid #ccc;
		  -moz-border-radius: 3px;
		  -webkit-border-radius: 3px;
		  border-radius: 3px;
		  -moz-box-shadow: 0 1px 1px #ccc inset;
		  -webkit-box-shadow: 0 1px 1px #ccc inset;
		  box-shadow: 0 1px 1px #ccc inset;
		}
		
		#inputs input:focus {
		  background-color: #fff;
		  border-color: #e8c291;
		  outline: none;
		  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
		  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
		  box-shadow: 0 0 0 1px #e8c291 inset;
		}
		
		/*--------------------*/
		
		#login #actions {
		  margin: 10px 0 0 0;
		}
		
		#login #submit {		
		  background-color: #d14545;
		  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
		  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
		  background-image: -moz-linear-gradient(top, #e97171, #d14545);
		  background-image: -ms-linear-gradient(top, #e97171, #d14545);
		  background-image: -o-linear-gradient(top, #e97171, #d14545);
		  background-image: linear-gradient(top, #e97171, #d14545);
		  -moz-border-radius: 3px;
		  -webkit-border-radius: 3px;
		  border-radius: 3px;
		  text-shadow: 0 1px 0 rgba(0,0,0,.5);
		  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
		  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
		  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
		  border: 1px solid #7e1515;
		  float: left;
		  height: 30px;
		  padding: 0;
		  width: 100px;
		  cursor: pointer;
		  font: bold 14px Arial, Helvetica;
		  color: #fff;
		}
		
		#login #submit:hover,
		#login #submit:focus {		
		  background-color: #e97171;
		  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
		  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
		  background-image: -moz-linear-gradient(top, #d14545, #e97171);
		  background-image: -ms-linear-gradient(top, #d14545, #e97171);
		  background-image: -o-linear-gradient(top, #d14545, #e97171);
		  background-image: linear-gradient(top, #d14545, #e97171);
		}	
		
		#login #submit:active {		
		  outline: none;
		  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
		  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
		}
		
		#login #submit::-moz-focus-inner {
		  border: none;
		}
		
		#login label {
		  float: right;
		  line-height: 30px;
		}
		
		#login label input {
		  position: relative;
		  top: 2px;
		  right: 2px;
		}

 

jQuery

JavaScript код достаточно простой. Структура 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 на странице с формой.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/simple-and-effective-dropdown-login-box
Перевел: Сергей Фастунов
Урок создан: 29 Ноября 2011
Просмотров: 69761
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 29 Ноября 2011 17:28
    IKLO
    [b]выпадающая форма регистрации[/b] - нечего не перепутали, ну как всегда просто и красиво.
    • 30 Ноября 2011 22:04
      rubyx
      чтото я не заметил ВВ коды тут. "[/b]" :)
  • 29 Ноября 2011 18:11
    Sprime
    спасибо, хороший урок... побольше бы таких
  • 29 Ноября 2011 18:39
    imaxest
    А где форма регистрации? Видно только форму авторизации. Под пунктом "Регистрация" ничего не выпадатет.
  • 29 Ноября 2011 19:03
    vadik21
    Да какая разница регистрации/авторизации?! Сделайте на его основе форму регистрации. Автор -5
    • 4 Декабря 2011 10:55
      m_hamlet
      +1! Все хотят только использовать готовые решения, а создавать свои никто не хочет. На основе этого разработчик может создавать что угодно: выбор языка сайта, регистрация, инструменты юзера ("Профиль", "Выйти"...) и т.д.
  • 29 Ноября 2011 19:36
    mask
    Спасибо! Отличный урок!
  • 29 Ноября 2011 20:33
    Vladiag
    Отлично, даже ослик не так уж и плохо отображает)
  • 29 Ноября 2011 22:20
    Frimen
    просто и привлекательно.молодец! + тебе
  • 29 Ноября 2011 23:13
    will_smeet
    Очень красиво, спасибо большое, за перевод!
  • 30 Ноября 2011 00:01
    d1gn
    "Происходит переключение содержания элемента span между символами ? и ?" => "Происходит переключение содержания элемента span между символами &#9650; и &#9660;"
  • 30 Ноября 2011 08:16
    Пунин Александр
    Хмм, а у меня вопрос. Как можно сделать вот эту форму авторизации с другим форумом? Например, вводишь тут свои данные и что бы залогинелся на форуме. Например сайт тут site.ru а логиниться нужно тут forum.site.ru. А то я не в понятках :(
    • 30 Ноября 2011 22:07
      rubyx
      форма регистрации своя, тут не указана она:(
  • 30 Ноября 2011 11:57
    sadchenko
    Хороший урок, в принцепе таким макаром можно что угодно сделать выпадающим))
  • 30 Ноября 2011 12:17
    kokill
    У меня возник вопрос, как эту красоту вписать в меню Joomla?, если модель меню не стандартный а стороннего разработччика, да и просто в Joomla(е), как это релизовать. не реклама, вот сайт http://apgo2006.ru
    • 30 Ноября 2011 14:45
      WI_Wind
      да, такие модули есть зайди поищи на extensions точка joomla точка com (офф. сайт)
  • 30 Ноября 2011 22:09
    rubyx
    отличный урок! ещёбы в комплект форму регистрации :)
    • 1 Декабря 2011 05:09
      FackDsYes
      Кто может помочь установить этот код напишите мне в ICQ:376903210 Email:FackDsYes@mail.ru , спасибо.
  • 15 Декабря 2011 12:42
    vistar
    в чудо-ie будет смотреться ужасно - он не поддерживает атрибут placeholder
  • 18 Декабря 2011 19:32
    reanima
    Подскажите как можно отредактировать стиль всплывающего предупреждения об обязательном поле?
    • 25 Декабря 2011 18:50
      t1mon
      Никак это встроено в браузер.
  • 9 Января 2012 02:48
    dima80
    добрый день! у меня небольшая проблемка, когда я скачал исходники и закинул их на свой локальный сервер, запустил Denwer, увидел такое чудо , вместо руских слов какието каракули, попробывал поменять кодеровку в index.html с <meta charset="utf-8"> на <meta charset="windows-1251"> но не чего не помогло, подскажите как решить эту проблемку. Заранее спасибо за помощь.
    • 2 Февраля 2012 12:07
      reeadmin
      Ты место стандартного доктайпа поставь джумловский и голову укажи данно ниже : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" />
  • 10 Февраля 2012 17:24
    reeadmin
    У меня проблемка не такая важная но нервирует! 1 К URL на конце добавляется #; 2 Когда нажимаю кнопку авторизации все действия на сайте слетают, тоесть я допустим ищу через поиск слово и я решил залогиниться, я ввел данные и вошел но тут же все найденные страницы пропали и пишет "Всего найдено 0 записей.", а было "Всего найдено 1 записей." и если слабая память я забуду и выйду на!Х!рен с сайта и не зайду пока не вспомню! Вот так теряются пользователи! Зыыы. Все подключено прямо и робит надо просто исправить эти 2 проблемки. помогите!!!
    • 23 Февраля 2012 22:44
      ygolkova
      Здравствуйте, подскажите пожалуйста новичку: пытаюсь на странице поставить 2 модальных окна (http://gipros.kiev.ua)одно уже есть "о проекте", когда ставлю второе, которое в будущем будет регистрация, тогда оно автоматически приобретает стили первого окна. Возможно, я не правильно подставляю ему нужные стили?! Буду рада получить от Вас ответ.
  • 25 Марта 2012 22:04
    Miheros
    Помогите, как можно изменить текст всплывающих подсказок при проверки формы
    • 4 Апреля 2012 13:05
      derision
      Это в свойствах браузера, никак не сможешь поменять. В разных браузерах отображается по разному.
  • 1 Мая 2012 04:02
    SyncAllow
    Автор красавец мне осталось написать регистрацию и сделать таблицу users
  • 18 Мая 2012 15:10
    centurion123
    Народ! а кто подскажет, какое действие происходит при нажатии на "красную" кнопку "войти"? мне нужно, чтоб после ее нажатия юзер переходил на главную страницу...где и что надо дописать?
    • 1 Июня 2012 11:21
      Lebannen
      Центурион, кнопке войти присвоен тип "Submit", т.е. она отправляет данные на форму, в которой ты проверяешь, есть ли такой логин и пароль в таблице БД. Если все введено корректно, то перенаправляешь пользователя на страницу, которая тебе нужна.
      header("Location: <название страницы>.php");
  • 10 Июля 2012 12:30
    centurion123
    Еще вопросик...в гугл-хром все отображается отлично, но как только перехожу в эксплорер-все плывет...как исправить? у меня в index.php есть тэги <div>, может из-за них что-то не так? кстати и сама форма ж тоже в этом тэге...
  • 30 Марта 2013 13:20
    CВасилий
    Друг!!! Реально у тебя очень полезный сайт, уже не первый раз попадаю на сайт и нахожу полезную информацию. Но как полный новичок и не могу ничего применить из предложного. Получается вижу но применить не могу. Потому что новичок. Большая просьба если бы, были бы подробные инструкции куда код это вставлять (пошагово прописано возьми этот код зайди туда вставь там). То тебе вообще цены не будет!!! А так респект все очень качественно и красиво.!!!
  • 5 Июня 2013 16:06
    skylinex
    Могли бы вы сделать видео урок как к этой форме прикрепить php регистрацию? В заранее спасибо.
  • 10 Июня 2013 17:46
    imperator71ru
    а зачем нужно css и без него работает?
  • 7 Января 2015 03:01
    Artem12
    Здравствуйте помогите пожалуйста разобраться Куда вставить html код ? В файл headr?
  • 10 Сентября 2015 10:52
    elmin95
    Здравствуйте,вот уже второй день сижу над этой проблемой...в общем с хтмл я разобрался....с css тоже...у меня появилась форма...но с джава скриптом я не разобрался...то есть я не знаю куда его впихнуть так скажем...у меня на движке wordpress сайт...помогите пжлст?
^ Наверх ^