Responsive Login Page using HTML CSS and JavaScript|| Code With Neha
Hello Everyone welcome back to my channel Code with Neha
Today I am back with another interesting topic I.e responsive login page using html css and javascript
So without any further delay let's get started
Starting with saving a file name y5.html and keeping sublime text editor and the default browser side by side so that we can evaluate the code
Starting with the basic essential html tags
Same as we did in our last html Code
Now within the body tag
Using our first heading tag as h1 Login Page
Followed by div tag
The HTML div tag is a container that groups other HTML elements together for styling or Scripting
to style small box as login form using the div tag
So div class = d1
Followed by form tag
The form tag is used to create an HTML form for user input
So opening tag a form name = f1
and closing tag as backslash form
Within form tag
Writing all the elements
As enter name input type is text and name is sname
Similarly enter password input type is password and name as pass
Followed by button input type name btn value login and the event will be onclick
I.e onclicking this button your input data will be evaluated
This responsive step will be completed using javascript
Inserting br tag for the respective gap between the input types
Now to style the div part
Using start and endstyle tag just above closing head tag
Width as 400px
Height as 200px
Padding as 15px
Background color as yellow
And box shadow as 10px 10px 5px greyyellow
The box-shadow property attaches one or more shadows to an element.
Control s and refresh for the result
Now to make this form responsive
Using start and end script tag just below style tag
Function name is check ()
Declaring the two variables var a and var b as input of two form inputs
If a==null
Then the alert message pops out as Enter name
Else if b==null
Then the alert message pops out as enter password
If both the conditions get satisfied
Then
The alert message pops out as login successful
Control s refresh the browser for result
So that's all for today Hope you all will get some help from this video If it's so then don't forget to subscribe my channel Code with Neha and press the Bell Icon for Regular Updates See you in the next video till then Stay Safe Stay Happy
#loginforminhtmlandcss
#loginforminhtmlandcssandjavascript
#loginforminhtmlandcssresponsive
#ResponsiveLoginPageusingHTMLand CSSresponsiveloginform
#responsiveloginformusinghtmlcssandjavascript
#responsiveloginformusinghtmlandcss
#howtocreateloginform
#howtocreateloginforminhtml
#responsiveloginpagewithhtmlandcss
#responsiveloginformwithhtmlandcss
#howto create login forminhtmlandcss
#howtocreateloginforminhtmlcssandjavascript
#responsiveloginformhtmlcss
#howtocreateloginformusinghtmlandcssresponsiveloginpage
#responsiveloginpageusinghtmlandcss
#howtocreateresponsiveloginforminhtml
#howtocreateresponsiveloginforminhtmlandcss
#howtocreateresponsiveloginformwithhtmlandcss
#howtocreateresponsiveloginforminhtmlcssandjavascript
#howtocreateresponsiveloginformwithhtmlandcss
#howtocreateresponsiveloginformusinghtml
#howtocreateresponsiveloginformusinghtmlandcss
#howtocreateresponsiveloginformusinghtmlcssandjavascript