Create Fancy Login / Signup Form In HTML5 & CSS3:-
In this post I am going to share very useful code snippet to create fancy login / signup form for your website, User can easily toggle between login and signup form at any time. because this script creates both the form signin and signup in single frame with toggle behaviour like you have seen many websites.
Creating Fancy Login / Signup Form
Libraries
Include all the necessary libraries on page like font library and jQuery.
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>script> |
HTML
Creating simple html login and signup form with login and Sign Up toggle tabs.
|
CSS
Styling your HTML login and signup form with some cool and colour and effect.
JS
Now finally enable toggle behaviour between login and signup form you may switch any time between login and signup with fade effect.
<script> $('.form').find('input, textarea').on('keyup blur focus', function (e) { var $this = $(this), label = $this.prev('label'); if (e.type === 'keyup') { if ($this.val() === '') { label.removeClass('active highlight'); } else { label.addClass('active highlight'); } } else if (e.type === 'blur') { if( $this.val() === '' ) { label.removeClass('active highlight'); } else { label.removeClass('highlight'); } } else if (e.type === 'focus') { if( $this.val() === '' ) { label.removeClass('highlight'); } else if( $this.val() !== '' ) { label.addClass('highlight'); } } }); $('.tab a').on('click', function (e) { e.preventDefault(); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); target = $(this).attr('href'); $('.tab-content > div').not(target).hide(); $(target).fadeIn(600); }); script> |
See live demos and download source code.
Visit official repository for more information and follow for future updates. Don’t forget to read license for using this code snippet in your projects.
