Barbara Seidel beseidel
This Is Animated Form Created By Saeed Nofal : )
A Pen by saeed nofal on CodePen.
UPDATE: This is now pure JavaScript. It was jQuery. UPDATE: Using delegates instead of loops with event listeners. UPDATE: Added check for inputs with values already set, adds 'focus' class to parent. This is a pretty simple example of how to animate form elements on the focus event. The order of the input and label elements is important. The CSS targets the next sibling of the input, which gets the focus event. There are probably other ways to do this with just JS, but I like this because it works regardless of the form blocks or form width. It takes advantage of flexbox. JS is simply adding the class. The rest is CSS.
| <form class="validate-form"> | |
| <div class="form-group"> | |
| <input type="email" class="form-control" id="exampleInputEmail1" placeholder="[email protected]" required title="please enter an email address"> | |
| <label for="exampleInputEmail1">Email address</label> | |
| </div> | |
| <div class="form-group"> | |
| <input type="password" class="form-control validate-form" id="examplePassword" placeholder="Numbers Letters Symbols" required > | |
| <label for="examplePassword">Password</label> | |
| </div> | |
| </form> |
| <form class="awesome-form"> | |
| <div class="input-group"> | |
| <input type="text"> | |
| <label>Your Full Name</label> | |
| </div> | |
| <div class="input-group"> | |
| <input type="email"> | |
| <label>Your Email Address</label> |
A Pen by Tranquility on CodePen.
A Pen by Michael Weslander on CodePen.
A Pen by Barbara Seidel on CodePen.