Up next in 10
How To Create Form With Password Strength Using HTML CSS And jQuery
309 views
Feb 8, 2024
The video "How To Create Form With Password Strength Using HTML CSS And jQuery" is a tutorial that guides viewers through the process of building a form with password strength validation using HTML, CSS, and jQuery. Throughout the tutorial, viewers are shown step-by-step instructions on how to create a registration or login form that includes a password input field with a visual indicator of password strength. The tutorial covers essential concepts such as HTML form elements, CSS styling to visually represent password strength, and jQuery for implementing the password strength validation logic. By following along with the instructions and code demonstrations provided in the video, viewers can learn how to enhance the security and user experience of their forms by implementing password strength indicators that provide feedback to users as they create passwords. This tutorial offers practical insights into using HTML, CSS, and jQuery to create forms with password strength validation, suitable for various web applications and projects.
View Video Transcript
0:00
Hi guys, welcome back to the new video of easy tutorials and today in this video you will see how to create a sign of form with password strength indicator
0:08
As you can see on my computer screen here is one form and in this password field as I will enter any password it will display the password strength just below this input field
0:18
You can see the password strength very weak, weak medium strong and very strong
0:23
So this is very easy to create this type of password strength indicator in your sign up form registration form
0:29
form. So before starting this video I will request you to please hit the like button
0:33
and also subscribe if you are new on my channel. Now let's start this video. First
0:40
I have one folder here and in this folder I have one image and one HTML file and
0:45
one CSS file. Now let me open my text editor which is bracket cditor. So this is the
0:50
HTML file and this one is CSS file. You can see CSS file is already connected with
0:55
HTML with this line of code. Now we'll come to the body tags
0:59
Now we have to add one color in the body, so just copy this one and write it into the CSS file
1:06
So here we will add background, this background color. And font family
1:16
Save these changes and open this HTML file with Google Chrome. Now you can see this color over this webpage
1:27
Let's come back to the HTML file. Now in the body tag we will create one form so I'm using form open and close
1:40
Now just copy this form and write it into the CSS file
1:46
For this one we will add one width. It will be 500 pixel margin 8% from top and bottom auto from left and right
1:56
padding 50 pixels and 0 text align it will be center and we'll add box shadow here
2:10
save these changes and reload the webpage now you can see very small box on this webpage because we don't have any content here now we'll come to the HTML file and here we will add one div and the class name I'm writing input box
2:25
And in this deep we will add one input field. So here I will add one input and type it will be text, placeholder, it will be username and required
2:46
Refresh the web page and you can see this input field over this web page
2:52
Now come back to the HTML file again and just copy this input box. Write it into the CSS file with the dot
3:00
And here we will add margin 30 pixel and auto. With it will be 80%
3:07
Position relative. And box shadow also. So just copy from here and add it here
3:16
And here we will change these box shadow. That's it. Now just copy it
3:25
again then write input for the input field for this one we'll add width 100
3:33
and height 40 pixel border it will be none and background will add one background color this one padding left 50 pixel refresh the page and you can see a large input box here
3:54
next we have to add one icon so just come to the google and search for font awesome CDN
4:01
open this first website and from here we will copy this link. Just copy this one and come to the HTML file, duplicate this line and paste the URL here
4:14
Now again come to the Google and write font or some icons. So just open this website and here
4:22
we will search for icon. So I'm searching for user icon. So this is the user icon. Just
4:28
click on this one line of code. And add this code here within span
4:36
Remove this one area hidden, that's it. So first we have one icon then input field
4:44
Reload the webpage and you can see very small icon over here in the center and below left there is an input field
4:51
So we have to align it in the left side so just come back to the HTML file and copy this span
4:55
Write it into the CSS file. For this span we will write position absolute and left 0
5:03
Top it will be 0. and height it will be 40 pixel and width also 40 pixel
5:13
background here we will add linear gradient background color so this is the first color and this one is the second color
5:32
Just copy this span again then write .FA for the icon. For this icon we'll add padding 10 pixel and color it will be white
5:44
Save these changes and reload the webpage. Now you can see this beautiful icon over here just before the input box
5:53
Just come back to the HTML file and duplicate this entire div two times
5:57
So this is the second input field. So we'll change the icon here
6:01
So this icon will be envelope and input type it will be email and placeholder it will be email ID
6:16
For the third input field we'll change the icon key and placeholder it will be password and type it will be password
6:27
That's it, save these changes and reload the vehicle. and reload the web page
6:32
Now you can see three input filled in this form. First is username, second is email ID and the third one is password
6:40
Next we have to add one submit button. So after this div, we'll create button and type it will be submit
6:50
And here we'll write the button text, which is register. So you can see this button over here in the center
6:58
So just copy this one button. And come back to the CSS file, write it here
7:03
And for this button we'll write width, 130 pixel, height, 40 pixel
7:12
And margin left, 10%. Display block Color white And border 0 font size 16 pixel Outline None and background so again copy this background here
7:36
and next we will add this box shadow will be pointer
7:49
Save these changes and reload the web page. Now you can see this beautiful button here for register
7:58
Next we will add one icon in this button also. So come back to the HTML file and just copy this icon code and paste it here
8:07
So this will be different icon so I'm writing. Sign in. Save these changes and you can see this icon in this button
8:17
this button. Now just copy this button here, then write .FA for the icon
8:26
And here we will add margin drive 10 pixel, that's it. Reload the webpage and you can see it's looking very beautiful
8:34
Now above all these input field we will add one user icon also
8:38
So come back to the HTML file again and here we'll add IMG and SRC and the image file name
8:46
which is user.png. Save these changes and now come back to the CSS file and here we will write Form IMG
8:57
So its width will be 100 pixel and margin. Top, it will be minus 100 pixel
9:04
Reload the web page and now you can see this user icon on this form
9:09
So after adding all these input field register button and image, next we will add password strength indicator in this form
9:15
in this form. So just come to this GitHub link. You can find this link in the
9:20
description. You can see he is the author for this code. And next you can see this
9:26
download button. So just click on this one, download. And you will get a zip file. Just
9:35
extract this file and here you can see so many files. So we will copy just this one
9:43
JQQoD.Password strength. 진짜.js. Copy it and add it into your project folder
9:50
That's it. Now come back to the HTML file and now we will connect this
9:57
JQaeda file here. So for that we will add script, source and the file name
10:04
Now again come to this GitHub link and you can see this script here
10:08
So just copy this script and paste it here. paste it here just above this closing body tag
10:15
That's it. So just copy this password and we will add this password as an ID in the input field
10:21
So in this password input field I will write ID is called to password. That's it
10:26
Next we will add one more thing just come to the Google and search for G-QWary CDN
10:33
Open this link and click on this one, minified and just copy this script
10:41
copy and come to the HTML file and add it here. We can remove this part, that's it
10:48
Make sure you are adding this file above this password strength.js. Save all these changes
10:58
Now reload the web page Once I will enter any password here it will display the strength over here in the left side So we have to align it
11:12
For that again come to this GitHub link and you can see these classes password strength indicator
11:18
So just copy this class name and come to the CSS file add it here
11:27
For this one we'll add font size. It will be 12 pixel and display inline block height 15 pixel
11:45
mean width it will be 20 percent text align center
11:55
Transition 1 second and margin 50 pixel 0
12:06
Color will be white. Reload the webpage and you can see this strength overhead
12:12
For all the strength it is in fixed size that is 20%
12:17
So we have to change this one. So come back to the GitHub link and you can see other classes here
12:24
very weak weak this type so just copy the class name and write it here and before that
12:38
we'll add this class name for this one we'll add background this color and width
12:49
it will be 20% now reload the web page And you can see this red background color for very weak password
13:03
Now duplicate it. And head will change the class name. So this is the second class
13:14
Add it here. Now the third one. Add it here. This is the next class name strong and this one is last class name which is very strong
13:39
Now we'll change the width for each class name so second one is 40%, next is 60%, then next is 80% and the last one is 100%
13:51
Now we'll change the color also. So this is the different background color here
14:01
Again different background color for third one. And for fourth one again different color
14:11
And this is the last one. Now reload the web page and you can see as I'm adding more character
14:21
in password field, it is changing the password strength. When it is very strong, password strength indicator is showing 100% weight
14:31
So it was very easy to add password strength indicator on your form
14:37
I hope this video will be helpful for you. If so, please hit the like button and also subscribe my channel Easy Tutorials
14:43
Thank you so much for watching this video