Главная->Уроки по js->Красивая форма с индикатором заполнения
Красивая форма с индикатором заполнения
Привет всем. Сегодня я хочу показать вам, как можно быстро создать красивую форму с индикатором заполнения. Зайдите на сайт 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(). Попробуйте каждую и посмотрите, что изменится. В конце стоит сказать, что размер полоски, ее положение и прочее вы можете поменять в стилях. Итак, на этом все. Спасибо за внимание.
