Simple Form Animation With Javascript Tutorial | HTML Forms | Learn Javascript
❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed
Today we are going to use Javascript to add some animations to our html forms. You can use this to create simple html login forms or registration forms. Including animation for form validation using html and javascript.
We are also going to learn how to structure all your inputs and icons inside each form group. Taking the data from a form and submitting it will come in a later tutorial.
This video is made for people who want to learn more about HTML Forms and Javascript in very easy steps.
📔 Materials used in this video:
Font Awesome: https://fontawesome.com/
🛴 Follow me on:
Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin
Original source
21 responses to “Simple Form Animation With Javascript Tutorial | HTML Forms | Learn Javascript”
where is the regex in the description ?
Please record tutorial on how to use fingure print Reader with javascript to sign in to php login form
Hi friend, how can we do to change this body tag ??? and change the style of another block for example ??? I want to know how we can use this script in the other medium than the body. for example I create a class and I apply this script to this class. but also I would like to know if we get to the end of these tests is what form must submit without submit button ????
Can this work with HTML CSS too?
need more HTML and Javascript tutorials
this isn't a tutorial this is just watching you copy and paste , you teach nothing!
if you are looking for the regex : /^[^s@]+@[^s@]+.[^s@]+$/
inactive
hi, mr. dimitri marco, why validate email not execute red color althought i didn't input email sign @ ?? i try to follow by video to write that crazy sign like this /^[^s@]+@[^s@]+.[^s@]+$/ but it still execute the green one.
java script file is not wprking as u said to us in code
icon are not showing my chrome browser and am using sublime text editor pls tell me how to solve problem
dev ed ……….. im so in love with ur videos ………. i want something from u
i want a full registration form with a React JS ………ill be thankful for u ….. thanks in advance
Can we use this in a section ? U have used it in a complete body but I want to use it in section . When somebody will scroll down then they should be able to use it. I tried but it’s not happening. The problem is : when u checked the condition for the input value , is its false then you changed the colour by using – document.body.style.background – colour; . Here As I have two section in the body so I was passing the class name and that is – middle . So my code was document.middle.style.background – color. But it’s showing problems. I tried to get the element of the class as well but nothing happening. Please help me
Thank you for another great tutorial, finally, JS is starting to make sense! I like your videos as they are bite-sized and they don't take up 3-4 hours like some tutorials. Another idea of progressing this further would be to change the placeholder to a label above on click for accessibility 🙂
Thanks a lot….
yes do it man we need that. and one more thing plz make a tutorial on any database, how to store in database that taken input from user?
your voice is too amazing specially when you say "oh my goodness" (once in your tutorial)
Hey Ed, man I love really you. like not love love. it's a freind's love. You really helped us lot (as a beginner).
Where is the regex
Doing everything exactly as you are. Can't get the transition to work. It isn't even printing out the console log on my screen. It's as if the selectors aren't working but I'm unsure if that's it. Frustrating. Thank you for these vids anyway. WIll have to just watch the rest and quit my own project -_-
Loving the tutorials dude! i'm going to be applying for my first frontend job in the next few weeks and your channel has been an amazing help 🙂