Красивая форма с индикатором заполнения.
Привет всем. Сегодня я хочу показать вам, как можно быстро создать красивую форму с индикатором заполнения.
Зайдите на сайт https://github.com/Colourity/Fort.js и скачайте архив со стилями и скриптом. Создаем html файл следующего содержания:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fort.js</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fort.min.css">
<script src="fort.min.js"></script>
</head>
<body>
<div class="form-wrapper">
<div class="top">
<div class="colors"></div></div>
<h1 style="color: #000; text-align: center;">Fort.js</h1>
<form name="form" action="#">
<div class="form">
<div class="form-item">
<label for="text">
<span class="fontawesome-user"></span></label>
<input type="text" name="text" required="required" placeholder="Name" autocomplete="off">
</div>
<div class="form-item">
<label for="text">
<span class="fontawesome-user"></span></label>
<input type="text" name="text" required="required" placeholder="Username" autocomplete="off">
</div>
<div class="form-item">
<label for="password">
<span class="fontawesome-lock"></span></label>
<input type="password" name="password" required="required" placeholder="Password" autocomplete="off">
</div>
<div class="button-panel">
<input type="submit" class="button" title="Sign In" value="Test It Out">
<p class="view">
<a href="https://github.com/Colourity/Fort.js" id="ref">View on GitHub</a></p>
</div>
</div>
</form>
</div>
<script>
sections();
</script>
</body>
</html>
Подключаем стили и скрипт в теге head, затем создаем форму строго такой структуры и вызываем функцию в теге script. В зависимости от того, какую функцию мы вызовем, эффект будет разным. По мере заполнения формы, сверху будет двигаться линия. Если, к примеру, вы вызовите функцию sections, то полоска будет разбиваться на секции причем разного цвета.
Эффекты могут быть такие: default(), sections(), gradient(), flash(). Попробуйте каждую и посмотрите, что изменится.
В конце стоит сказать, что размер полоски, ее положение и прочее вы можете поменять в стилях.
Итак, на этом все. Спасибо за внимание.
-
Создано 01.06.2014 20:32:16
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.