Website : Login Form
- Login 1 -
A user dashboard login form with animated input. This form will also work with register form or other type of forms. Just design the form as you want. This is just html and css form and does not contain actual member login implementation. You will need mysql and php to make your members register and login action. To make this form responsive you will just need to adjust the width of the main container according to the media query. Tablets and mobile media query is added in the download source code.
/* Media query for mobile */ @media (max-width: 767px) { #main-container { width: 50%; } }
Validating email addresses
I have not added email address validation in the source code. You can use any validation method from below. Both methods has some pros and cons. But use just one method and don't mix both. Combining both methods may confuse the browser.
Adding email as type in input.
<form> <input type="email" id="email" name="email" required> </form>
Using pattern to validate email addresses.
<form> <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required> </form>
This image is taken from computer and its main container width is 30 percent.
I captured the designing of the login form and uploaded on youtube. You can watch the video on youtube.
You can download the file below and change it as you want.
