HomeОбразованиеRelated VideosMore From: DewClarke

How to create a login page with HTML CSS and Javascript

1850 ratings | 268621 views
How To Create a Login Form or page with HTML CSS and Javascript. All source code can be found in the description. All links for source code in the description. Thanks for watching! Please Rate, Comment & Subscribe! Check out my channel :) To edit source code. Right click on html file, then click edit with notepad, or whatever text editor you're using. Login Source Code: www.dewclarke.com http://adf.ly/7277656/source-code Notepad ++: https://notepad-plus-plus.org/ Brackets: http://brackets.io/ Colour Picker: http://www.w3schools.com/colors/colors_picker.asp This is for educational purpose. Please Subscribe and Share if the Tutorial helped you! :) Rate Comment & Subscribe - Tutorial by Dew Clarke Follow on Twitter @DewClarke
Html code for embedding videos on your blog
Text Comments (210)
Spectrainler Gamer (1 month ago)
I tried the website to merge with my site but its not working lol
Zira (2 months ago)
If it is not working, you may have forgot to add this code before typing in the ".header" stuff: <style> </style> Those are the two most important things before doing this tutorial. Learn some HTML by W3Schools or some other website before doing this. Thanks! Peace.
MPYuton (1 month ago)
nice thanks
Gracias!!!!!
Evan Pacini (2 months ago)
Unsafe....
Laércio Filho (2 months ago)
Apesar de não ter gostado do lugar onde os campos de user e senha ficaram, seu trabalho ficou bom. Parabéns.
John symon Melarde (4 months ago)
can i have the code plss?for school project?plsss
Eden Roth (4 months ago)
click bait. reported. out.
King Ajacks (1 month ago)
Lol, what??
Alya Almarzouqi (4 months ago)
Thank you very much!! it worked :D and you have a new subscriber ;)
batte eriah (5 months ago)
Why should u be so first ?..
RifaiFriez (5 months ago)
i want the data login
Kabiraj Adhikari (6 months ago)
sir I wanna make login form like you in my first website but how can I get the users login data
dek haji (2 months ago)
i think you need to have a data holder like data.json to hold you data
Shadow (4 months ago)
You can save the login data in a database
Mercedes Taylor (5 months ago)
I have this same question
GuruDev Techno (6 months ago)
your source code is note working............pls provide any valid site with source code plssssssss
GuruDev Techno (6 months ago)
your source code is note working............pls provide any valid site with source code plssssssss
GuruDev Techno (6 months ago)
your source code is note working............pls provide any valid site with source code plssssssss
Arnold Machalaga (6 months ago)
awesome
TekTalkCode4Kids (7 months ago)
font not working
TekTalkCode4Kids (7 months ago)
sorry it is
Rushikesh Electronic (7 months ago)
You source code URL not working
Muhammad Sameer (7 months ago)
too fast
Gavin White (7 months ago)
So how can I add multiple different Usernames and Passwords, each one going to a different URL? I tried it in my code and it opened the new tab but also displayed the alert for incorrect text.
Manteh Official (7 months ago)
Try using JavaScript Switch Statement.
Ruffneck cat (8 months ago)
too fast wtf xD
Snake (9 months ago)
hey, im interrested in the code, where is it?
Sairam Varnakavi (9 months ago)
Nice bro
Nicky Heijningen (10 months ago)
Not working
harsh kaushik (11 months ago)
where is the code buddy!!!!!!
nikhil rao (11 months ago)
Its not good to go so fast, it doesnt serve purpose.
Elmedin Aliji (10 months ago)
yes it serves a purpose, if you already know html and css there's no point on him explaining it ... this isn't for an absolute beginner
Sharma KillerZ (11 months ago)
Jo Chizzy chahiye vo to sala koi nhi inter net pay dalta hai
Diane Canggat (11 months ago)
Too fast wtf.
Mint-O (1 year ago)
eh...... wtf, so on somethings you explain llike we are beginners and then the harder parts you just skip
Puucho (1 year ago)
Where is the code
L Ghebrekidan (1 year ago)
where s the code you said you will post it on the description section, its not working
GamingTV (1 year ago)
not how youtube works
Priyanka Mane (1 year ago)
Where is the code
Zubair Hassan (1 year ago)
Can u give me this login page.
misui chan (1 year ago)
THANK YOU BRO! WE LOVE YOU!
ItsQuinten (1 year ago)
How would I create multiple logins?
John Smith (9 months ago)
have fun learning about sql databases
Mr M Trott (1 year ago)
Yes switch statement using cases or using multiple else-if statements
Saifeddine Rashed (1 year ago)
with the switch case method
Ps Sarvna (1 year ago)
Given URL is not working
anwar shaikh (1 year ago)
give the sourse code[given url not working]
Lassi Pitkänen (1 year ago)
Is there a way to make this popup when you try connect to wifi? Like this would be login page
Lassi Pitkänen (1 year ago)
sovaMavu ok, thanks!
Kazbek G (1 year ago)
search for "Login modal tutorial" :)
YuroArtz (1 year ago)
can i use more usernames and passwords?
Nitesh Bhagat (1 year ago)
where is the code bro ?
fred rawllings (1 year ago)
the code is in the description.Just click show more you'll see it
josh housley (1 year ago)
Thank you so much. The only issue I see is that someone could look at your code and get the login info. I'm still new, so correct me if I am wrong, but couldn't you link a custom .js file and put the script there so it is not in plain sight? even if you eliminate right click, they can still get to the code from the top menu in any browser.
Dreamer Plays (9 months ago)
Btw, with local variables I mean environment variables
A2Zkiller ZA BEST (1 year ago)
But there is a way on google to find all the files and even if its a seperate js file and find it out
richard richardson (1 year ago)
thank you so much! it is just what I needed.
Vandana Avvaru (9 months ago)
i too need the source code plz mail me
anwar shaikh (1 year ago)
Yeah....bro i also need code can you mail me
Chiranth (1 year ago)
richard richardson can u please mail me thd code plsss
Reymartin tigbao (1 year ago)
how to automatic close the login tab when i enter a correct information??
TMN Bruce (1 year ago)
help, what if you do it in visual studio for an app
Neeraj yadav (1 year ago)
Please the zip file
Neeraj yadav (1 year ago)
Please send the zip file
KaceAlexi (1 year ago)
sry, but very useless...the page doesnt load if you code like that
Vanisheq Booki (7 months ago)
Worked for me but it took a lot of time and I needed to refine some details
Roland Doctor (1 year ago)
What text editor you use?
Lawrence Tech (1 year ago)
or u can use sublime text 3
DewClarke (1 year ago)
Brackets
CRISSCROSS (1 year ago)
Can i use this code for my website?
Funny WhatsApp (1 year ago)
Very useful information bro
I am not getting source code
Must Mees (1 year ago)
In the description, you dummy.
Khamza TILEK (1 year ago)
code
Must Mees (1 year ago)
In the description, you dummy.
Technical Sharma (1 year ago)
bro i want to save user input in a txt file
Arjun Angomcha (1 year ago)
Can u provide ur code
Must Mees (1 year ago)
In the description, you dummy.
nurul athirah (1 year ago)
where is the source code?
Must Mees (1 year ago)
In the description, you dummy.
Christoffer Gavin (1 year ago)
what editor do you use? i mean how do u do that both star and ending tags pop up?
DewClarke (1 year ago)
Christoffer Gavin Brackets
DewClarke (1 year ago)
Christoffer Gavin Brackets
Ram-Ram Simon (1 year ago)
verry cool.. I can make now my website very cool. perfection, perfection.
Chiranth (1 year ago)
Ram-Ram Simon hey
Noah Toftalid (1 year ago)
howi login?
Mini Joker (1 year ago)
Thank you! I'm creating a signup pop up, this is very helpful!
Chiranth (1 year ago)
Mini Joker hey
Bitcoin Beginners ph (1 year ago)
nice design and thank you!
Chiranth (1 year ago)
bitcoin beginners hey
Lem E (1 year ago)
too fast to capture - write each slowly next time please
DewClarke (1 year ago)
source code in the descripton
Aadil (1 year ago)
nice! ;)
Riccardo Bosio (1 year ago)
to fast man
Techno Tutorials (1 year ago)
my background image is not showing
Fahraynk (1 year ago)
mine either also he has div class="grad" but no css using class "grad"
Sneha Kharel (1 year ago)
What was that??Why is that so fast???It's not understandable at all. The main purpose is sharing knowledge right?? In this speed we cannot even see the words.So what's the use of it?
Babar jutt (1 year ago)
same question
Kavya Anshumala (1 year ago)
which software
Heiwa Xiao (1 year ago)
to fast!!! i need more detail how to make that thing in slow motion T-T) GOD DAMN IT! what am'i watching!!!!
Darda (1 year ago)
Yup
lotachukwu ugochukwu (1 year ago)
nice but were are the codes
Gamesmash (1 year ago)
Great Video📣📣📣📣📣📣📣📣
mordeci (1 year ago)
wasted 3 hours
Ching Pang (1 year ago)
Can I have the codes please? Where is it!!!
tkco (1 year ago)
Question. how can i set mutliple user names?
Sappy (1 year ago)
What do you mean? If you mean create different accounts, then just add extra exceptions in the Javascript. If you mean you want it to be stored in the server information however.... You'll need to use other backside coding languages like PHP to manage information, and then combine it with frontside coding languages like HTML, CSS, Javascript in order to create a fully functional login page. Sorry but this is more just for the looks.
Yemane Okubagebriel (1 year ago)
helpful. thanks
polly (1 year ago)
why do you write your CSS before your HTML? is this even your own code??
polly (1 year ago)
that depends if your can visualize your html in exact detail. Usually you would write css after your html for the reason it is easier.
DewClarke (1 year ago)
It doesn't matter... It's like putting milk before cereal. The outcome is still the same.
nazeeh orfali (1 year ago)
where is code?
Wajahat Ahmed (1 year ago)
errrm, I cannot view my website. Every time I try opening the site it appears to be blank on internet explorer and chrome browser.
Wajahat Ahmed (1 year ago)
Thank you bro but I fixed the issue. Thanks anyways though :)
Christian K (1 year ago)
Omni Technology maybe wrong File typ
Daniel Meza (1 year ago)
how i can open in the same windows?
IamPRN 6246 (1 year ago)
where do i find Sorce Code Please Tell
VGV Fuss (1 year ago)
where is the code?
Giles Crandall (1 year ago)
How do I make it so the page opens in the same window? I'm new to Java.
Queno (1 year ago)
okay genius answer the question
Ravi kumara kg (1 year ago)
sir source code
__David_ (1 year ago)
sir description xDDD
Hi4E (1 year ago)
You can just type color picker in google and google displays one
Nanda Janakiraman (1 year ago)
how to add multiple username and psw?
Sappy (1 year ago)
What do you mean? If you mean create different accounts, then just add extra exceptions in the Javascript. If you mean you want it to be stored in the server information however.... You'll need to use other backside coding languages like PHP to manage information, and then combine it with frontside coding languages like HTML, CSS, Javascript in order to create a fully functional login page. Sorry but this is more just for the looks.
Evanjushoa Saniel (1 year ago)
can i have REGISTER too ? Hhhihihi that connect that login html :) NEWBIE
Sappy (1 year ago)
Very late reply but... If you mean create different accounts, then just add extra exceptions in the Javascript. If you mean you want it to be stored in the server information however.... You'll need to use other backside coding languages like PHP to manage information, and then combine it with frontside coding languages like HTML, CSS, Javascript in order to create a fully functional login page. Sorry but this is more just for the looks.
Harsath Zuckonit (1 year ago)
it is perfect and good looking but ur showing it too too fast
zulqarnain majeed (1 year ago)
this is good but you are too fast
KinezThe (1 year ago)
change the speed to 0.75
Bharathi S (1 year ago)
this gives useful tips
Allan Mora (2 years ago)
is this working in simple notepad ? can i use the login without internet connection ? i need it for my project please answer me thanks
Mr_Padingy (1 year ago)
Yes you can code this in notepad and yes it will work without internet connection as long as you don't upload it to a site, so just run the HTML file that you saved from the notepad.
offline (2 years ago)
how can you have multiple passwords/usernames
Mathias Brekkhus (1 year ago)
offline. yes you can. I think you use the "|" operator btw the values in the js code. For example if(form.userid.value == "username1" && form.pswrd.value == "password1" || form.userid.value == "username2" && form.pswrd.value == "password2")
Galex (2 years ago)
exactly 1 year
faisal taher (2 years ago)
YOU FORGOT INDEX!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Fendoran (2 years ago)
i just got this working, how do i make it so that when people wisit my website, this will pop up first? so they have to login?
Cj (2 years ago)
rename the login.html as index.html
Mauriceje (2 years ago)
how can i add multiply usernames and passwords?
Sappy (1 year ago)
What do you mean? If you mean create different accounts, then just add extra exceptions in the Javascript. If you mean you want it to be stored in the server information however.... You'll need to use other backside coding languages like PHP to manage information, and then combine it with frontside coding languages like HTML, CSS, Javascript in order to create a fully functional login page. Sorry but this is more just for the looks.
Kian Principe (2 years ago)
Thanks.. :)
Biswajit Pramanik (2 years ago)
doesnt looked like your page'
ARIVILIAR (2 years ago)
Some HTML bangout.... Thank you! Is there any method you recommend I could get as good? At the moment all I can do is create a simple webpage with a marquee, pictures and maybe a hover attribute
lumarq03 (2 years ago)
funciona divinamente. Gracias!
Tarunkumar vishwa (2 years ago)
awesome! tut bro...... source code is not working .. upload the source code plz
recktard (2 years ago)
awesome! thank you :D
Davids Berzins (2 years ago)
Ty.. works perfect :)
Hi, I'm still confused on one simple thing that I have been trying to figure out... In CSS how to I make a button with text in it? I am only 12 and small things set me back like this one. Can Somone please send me basic code of how to do so?
r4xe thanks!!! Does padding give the div its position on the page?
Aseem Lalfakawma (2 years ago)
you can use almost any tag, button, div, span, etc, write a text in it, give it a bg color, border, padding, cursor:pointer, and give it :hover and you got your button ready.
Potential Poacher (2 years ago)
You could just use the HTML5 button tag or if you want to style it you can make a list and change the background colour of the list item in css. There are plenty of tutorials on it mate.
Rajesh Kumar (2 years ago)
Can you please send me the full code.. I'm not able to get it perfect.. I'll be waiting for the code.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.