Тёмный

Sleek & Simple Login and Sign Up Form in HTML, CSS & JS 

dcode
Подписаться 135 тыс.
Просмотров 480 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 198   
@dcode-software
@dcode-software 2 года назад
BUILD YOUR OWN FORM VALIDATION SYSTEM WITH JAVASCRIPT 🔽 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fE5ASN0sbtI.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
@funmatrikz
@funmatrikz 8 месяцев назад
I was facing another issue while coding, i hope you can help me. In the username field when i enter a single character or less than 10 character it is suppose to give me error to enter 10 characters but instead it takes me back to login page. I am using vscode latest version. I think it has to do with this.
@justinkelley111
@justinkelley111 3 года назад
Great explanations. It's insane how fast you can go.
@RodrigoMendoza7
@RodrigoMendoza7 4 года назад
Hi Dom! Have you thought of using buttons instead of links for "Already have an account? Sign in" and "Don't have an account? Create account"? The reason is they actually perform actions unlike links which they take you to another page. I think it would be more semantic, so to speak.
@larryshamala8929
@larryshamala8929 2 года назад
You can still use tge links to perform other actions like calling a function create account? my_function(){ alert("i want to create an account"); }
@RodrigoMendoza7
@RodrigoMendoza7 2 года назад
@@larryshamala8929 yes, you can... but I think that's not recommended as buttons were created to take care of actions such as those you're highlighting. If you need to run actions (through functions) on the same page, use buttons. If you need to go to another page, use links.
@Prakhar-c3f
@Prakhar-c3f Год назад
yess
@studentesamuelmanhica1405
@studentesamuelmanhica1405 3 года назад
I love your work. Wonderful job. Could you show us how to integrate a online database like firebase to this beautiful login form? Thank you very much 🥰
@aaaz3a180
@aaaz3a180 2 года назад
That is a great idea
@_.sunnyraj._
@_.sunnyraj._ 4 года назад
Would be interested in database storage of users
@boringblobking3783
@boringblobking3783 3 года назад
this was really easy for database storage: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2Vf1D-rUMwE.html
@ngocatnguyen5466
@ngocatnguyen5466 3 года назад
can u make a video with this form but using localstrorage for signup and login ? Tks you so much
@igorveljic9631
@igorveljic9631 Год назад
It will be greatful if he does it
@jubomdivnishvili8638
@jubomdivnishvili8638 4 года назад
I like your explanation, it’s always super clarified and interesting, respect❤️
@dcode-software
@dcode-software 4 года назад
Thanks Jubo!
@ThanhDoan-hb9dl
@ThanhDoan-hb9dl 2 года назад
@@dcode-softwaresự sư sẽ bị có
@Hreesang
@Hreesang 2 года назад
great explanation. I haven't touched my computer yet as I'm watching it on my phone, but I already receive a good understanding of how the html, css, and javascript work. thank you!
@jasongrace6274
@jasongrace6274 3 года назад
Can you make a working signup webpage tutorial? Please do.
@nicholasryan7612
@nicholasryan7612 2 года назад
Love the video, Would suggest you SLOW DOWN.
@goatan3003
@goatan3003 3 года назад
bro i tried it, but it only reads the html code can someone help me
@fant0m172
@fant0m172 9 месяцев назад
i have a problem when i click sign in, it appears to change. But when i click again to sign up, it still have the form--hidden class in the form. how can i prevent it (i have added preventDefault already) P.S: i forgot to add classList in the querrySelector. Thks for read this cmt
@josiah8789
@josiah8789 2 года назад
For those having trouble with the hiddern--form part of the video here's how I fixed my problem. 1. I misspelled script in this line of code and had to fix it 2. const loginForm = document.getElementById("login"); Instead of using docuemnt.getQuerySelecotr(); use getElementById instead for the loginForm and createAccount variables. Then keep querySelector for the other parts of the code
@busrauygur2893
@busrauygur2893 2 года назад
I had the same problem, thank you for the solution.
@DoggoProYT
@DoggoProYT 2 года назад
Same thing happened to me too, but i tried this and it didn't work
@KaranTandel.
@KaranTandel. 2 года назад
Hey can you help me with those code
@oksanadotsenko2550
@oksanadotsenko2550 8 месяцев назад
thank you so much! just wanted to ask if theres some way formElement recognises that it should refer to either loginForm and createAccountForm?
@cristianfz16
@cristianfz16 3 года назад
Why did you put the form__message--error in the Html if you are adding it from the JavaScript?
@321sas
@321sas 3 года назад
Cus he wanted to see if the style applies to it
@remiimartinnn
@remiimartinnn 2 года назад
This was very helpful to me thank you!
@lolernator1157
@lolernator1157 Год назад
wow, only 13 mins in and my container wont center and im getting a syntax error for putting ':' right after --color-primary
@ilijapajkanovic5784
@ilijapajkanovic5784 2 года назад
Thank you for this tutorial, you could to the tutorial for backand for this same example.
@sagarjain4128
@sagarjain4128 3 года назад
have you made any video on JWT, I want my user to signup and login but I don't want there information stored
@rinkalsolanki1062
@rinkalsolanki1062 Год назад
Hey, brother i have an qeury of this login page because i work as like you work but one error founded plz can you solve it because i need your help please
@boringblobking3783
@boringblobking3783 3 года назад
wow, underrated video
@oliverherlofsen3398
@oliverherlofsen3398 2 года назад
The link didnt work for me. could you do a follow up cause the link didnt switch. Copyed the code.
@AJBLAkX
@AJBLAkX Год назад
been following this video and im on day 2 of trying to work out this issue im having - cant tell if its from the JS or HTML however, when i click on the links that have the element " href="./" " (FOR EXAMPLE : Already have Account? Sign in same goes for the create account link I dont get the JS to activate and instead it takes me to my file directly ... i've been trying to figure this out for a while now, im a self taught noob coder lol - anyone have any solutions?
@folofusi4658
@folofusi4658 Год назад
you need to have href="#" ./ this means that it should go back a file
@kenttsou8298
@kenttsou8298 2 года назад
Hi Dom! I tried following with this, at 31:30 when you added form_ _hidden it hid the first form and when you added the second form in it showed the second form. On my side, it actually hid both the sign up form and the login form, do you know why that is? could it be due to the nesting on the html page?
@mathperson6927
@mathperson6927 2 года назад
I think you might have form--hidden on both forms. Or maybe you forgot to change some tags?
@Davide-jc1ox
@Davide-jc1ox 2 года назад
In the index.html you have to add in the body this:
@blackwacks5517
@blackwacks5517 2 года назад
Same problem here, did you manage to find anything?
@Davide-jc1ox
@Davide-jc1ox 2 года назад
@@blackwacks5517 read my comments
@blackwacks5517
@blackwacks5517 2 года назад
@@Davide-jc1ox I have it linked already :/
@adityagogoi5394
@adityagogoi5394 3 года назад
Why inserting PHP code inside the code prevents the JavaScript event's
@jamiemapes1394
@jamiemapes1394 2 года назад
Idk what I’ve done but when clicking on the create new account button or clicking already have an account login it just takes me to index of c:\ n then then navigation of the file can anyone help
@BlocksaverMax
@BlocksaverMax 2 года назад
Same issue here
@Fynn588
@Fynn588 2 года назад
when i click the Link, nothing happen can u help me pls?
@UtzuGaming
@UtzuGaming 3 года назад
Ok but how to I make the login and signup buttons actually do anything but be buttons.. I have NOT found any tutorials on the whole internet on how to do it using Visual Studio Code
@dcode-software
@dcode-software 3 года назад
The reason why you can't find any videos on it is because there are many different server-side technologies you can use for your websites. This video focuses on the front-end of creating a signup/login form. I suggest you look up how to create login/signup form using PHP - try the "codecourse" RU-vid channel.
@UtzuGaming
@UtzuGaming 3 года назад
@@dcode-software Thank you!
@danteeep
@danteeep Год назад
11:25 - how to add color properties as "constants"
@chaiwaritkhaobang5210
@chaiwaritkhaobang5210 3 года назад
Your video is good but even if I write the correct password it would still be wrong can you help me?
@alphankocak2605
@alphankocak2605 2 года назад
It's an amazing video but i got a question i can't configure .form__input-group and i looked everywhere
@mubashirbinnasim5917
@mubashirbinnasim5917 2 года назад
yes
@mazeedsalvador8578
@mazeedsalvador8578 2 года назад
please can you create a food ordering webpage
@lionm.4573
@lionm.4573 3 года назад
why use DOMContentLoaded Javascript
@zanderland4088
@zanderland4088 3 года назад
Great video
@FOXDRT
@FOXDRT Год назад
31:36 it's don't work with me ):
@lenonalf8621
@lenonalf8621 Год назад
thankuuu!!
@enderknight1048
@enderknight1048 2 года назад
Does it actually work?
@RobertParslow
@RobertParslow 3 года назад
dcode, thanks for the video. It was a great help in creating a Login and Sign up page. Just need some assistance with the "forgot Password" button. was it covered or am I missing something? Thanks again.
@giovannimichel5506
@giovannimichel5506 2 года назад
Thank you for the intel
@romuloalves9349
@romuloalves9349 4 года назад
Ótimo vídeo parabéns ✌.
@VCodeIt
@VCodeIt 2 года назад
forgot password??? no code
@plqaq1201
@plqaq1201 2 года назад
Hahahaha hi she هههههههههههههههههه لا انا اسمك
@adepojumoyosoreoluwa1858
@adepojumoyosoreoluwa1858 8 месяцев назад
Please slow down
@عمارياسر-د6و3ث
@عمارياسر-د6و3ث 2 года назад
Gcubes plz 199.plz
@harthackersumit7534
@harthackersumit7534 3 года назад
Hii
@sopky43
@sopky43 3 года назад
Very complicated
@gozalogomez4764
@gozalogomez4764 2 года назад
Z
@jefawksspaghettorium
@jefawksspaghettorium 2 года назад
No backend, too bad
@dcode-software
@dcode-software 2 года назад
The reason for not including a backend implementation is to help this video be valuable to more people. Everyone uses a different backend, and the code is really dependent on the app itself.
@jefawksspaghettorium
@jefawksspaghettorium 2 года назад
@@dcode-software Indeed, but honestly the backend is the most important part of building a login / signup form. That's also the hardest part too (the security of it at least)
@dimedude
@dimedude 3 года назад
Great video.. I got there in the end :) it was a bit fast but I guess thats the beauty of it being a video (pause, rewind, fast forward etc :)) The JS part I'm still wrapping my head around but I would love to see a follow up of storing the usernames and validating etc
@maleaqueandrew
@maleaqueandrew Год назад
is there a tutorial on how to actually use this to be able to create a genuine account and log onto a page using said account?
@flancebeats6971
@flancebeats6971 3 года назад
hey dcode, I'm not sure why as I'm still new to js, but in using e.preventdefault, im still returned to the root index of the folder instead of hidding the register container and showing the login container. I've tried a bunch of things using stack overflow to fix it, but the issue propagates and I'm not sure why.
@SANTHOSHKUMAR-zk6uz
@SANTHOSHKUMAR-zk6uz 3 года назад
Yaa I too have the same issue
@BlocksaverMax
@BlocksaverMax 2 года назад
Same. Any fixes?
@electroash4233
@electroash4233 2 года назад
Hey! Nice Video! Just have one question, how do you make like a message that pops up when you put the right information?
@ws308
@ws308 3 года назад
Hi dcode, thanks for the video. When would you suggest creating a new html page vs. using JavaScript to hide/change the display? Would following JavaScript always cause the whole page to be loaded, so if there were certain parts of the page with heavy images (for example), best to create a new html page to speed up website use?
@systemsless
@systemsless 2 года назад
My link to the already have an account button doesn't open anything it just opens my main html folder. can anyone help?
@joaquinjulianharguindey2226
@joaquinjulianharguindey2226 3 года назад
thank you very much! your explain is perfect, maybe a little fast (for me) but perfect :D
@sasktire3039
@sasktire3039 2 года назад
What about data? how to connect in sql server
@zakmartin
@zakmartin 5 месяцев назад
But how do you get it to WORK? How do you get it to identify users by their name and PW, and how do you get it to take them to a specific page? And how do you make it possible for people to create an account in the first place? I successfully installed the login form on one of my websites. It looks great, but it doesn't actually do anything. It's like a car without an engine.
@darshanamaduranga2458
@darshanamaduranga2458 3 года назад
How to add PHP and MySQL Data base , This Login System Pls Explain Next Video
@drg9522
@drg9522 2 года назад
Everything is fantastic, but "2 times 18 is 32" did hurt me
@dcode-software
@dcode-software 2 года назад
Sometimes it gets a little difficult to do even basic math under pressure 😁
@drg9522
@drg9522 2 года назад
@@dcode-software coding isn't stressing at all, they say
@KaranTandel.
@KaranTandel. 2 года назад
I followed the video but jv doesn’t work
@leonardodejesus1779
@leonardodejesus1779 5 месяцев назад
I'm trying to do the --form hidden but for some reason it does not dissapare. Instead its ontop of the account creator. Is there a way to fix that?
@amazingescape
@amazingescape Год назад
What is the password/ username and where are they in the code?
@maddykatt733
@maddykatt733 2 года назад
HOW ARE YOU SO FAST?! LOL
@WestCoastWeirdo-g
@WestCoastWeirdo-g Год назад
hi i have done everything in this tutorial but doent work please help
@rinkalsolanki1062
@rinkalsolanki1062 Год назад
Javascript side my problem i stop my form program then
@FoxDenWorld
@FoxDenWorld Год назад
My main.jss form is not working / connecting with the rest
@Moodboard39
@Moodboard39 2 года назад
Why other people don't add container ? They ignore that .
@SuperMelibelly
@SuperMelibelly 3 года назад
So idk where I went wrong but the "hidden" class hides the whole thing and the toggle idea doesn't work. The links don't switch forms, it does nothing. I feel like finding the error would be trying to find a needle in a haystack 😔
@henriettaturi4642
@henriettaturi4642 3 года назад
have you found out the problem? I have the same problem right now.
@ritapurple9973
@ritapurple9973 2 года назад
I had the same problem and was solved after adding the right link to my js file on the code, hope it helps!
@deerman6541
@deerman6541 2 года назад
Part 2?
@xXxBo5sANaCxXx
@xXxBo5sANaCxXx 3 года назад
This is not beginner friendly at all :/
@ConsulthinkProgrammer
@ConsulthinkProgrammer 3 года назад
Try this for an alternative: Login form online without hosting with google apps script ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zbH-6r2QjP4.html
@athena8072
@athena8072 2 года назад
How did you pull up the website to run the code? Thanks
@philippb6654
@philippb6654 Год назад
I don’t know if it’s the best but I am using xampp just watch a tutorial how to download it and you can host a website locally on your PC
@yglol623
@yglol623 3 года назад
Dcode This was so useful thankyou.
@KaranYadav-qp2oo
@KaranYadav-qp2oo 3 года назад
Use brackets editor 👍
@eagleslandin1692
@eagleslandin1692 Год назад
@7:25 @dcode why does my coffee cup script editor say: "A document must not include more than one autofocus attribute" ??
@Sebwazhere
@Sebwazhere 2 года назад
I'm at the bit where you make it so that when you press login it gives an error message but I have an error when I press it saying Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). Can someone help me?
@omeeeeeeeel
@omeeeeeeeel 6 месяцев назад
send image ty po
@soughtoutcity
@soughtoutcity 3 года назад
when i click on enter in the create account form it takes me to the login form why is this happening and what should i do pls help, and how do we apply the very last function to the "invalid username/password combination" message in log in form to make it disappear when the user clicks to rewrite the input
@rdongart
@rdongart 2 года назад
I have a question: the file is called index.html but in the address field it says login-signup-demo - I didn't catch how that leads to the index.html page being shown?
@waniafalak2212
@waniafalak2212 3 года назад
it' s showing me an error of " Cannot set property 'textContent' of null ", I have to submit my assignment and i can't able to fix it
@mariusiordan5421
@mariusiordan5421 Год назад
having some issues with the js switching between login form and create account form, it just doesn't work.
@JohnCracau
@JohnCracau 8 месяцев назад
Thank you
@rinkalsolanki1062
@rinkalsolanki1062 Год назад
Like i click in the ("your allredy account exciting then not open login form ") open directory of desktop file
@strategistaow3520
@strategistaow3520 9 месяцев назад
i like how you explain things not just boldly robotickly go and just write you deserve a sub+like
@ramodsasanga6169
@ramodsasanga6169 Год назад
Thank you
@khalilboussena3514
@khalilboussena3514 Год назад
Thank You Sir, can i copy your work for profit business in my country ! i'm just beginner.
@adityapatil1279
@adityapatil1279 3 года назад
hey i trid this but m getting an error at this jscript.js:9 Uncaught TypeError: document.addEventListner document.addEventListner("DOMContentLoaded", () => { const loginForm = document.querySelector("#Login"); and nothing is working after that PLEASE HELP MAKING A LOGIN FOR OFFICE WORK
@osky6890
@osky6890 2 года назад
Thanks
@hannahwatkins7992
@hannahwatkins7992 Год назад
How do I connect it to an existing project though?
@SpaceVultureV
@SpaceVultureV Год назад
You would have to implement it, which you put behind a button, and when someone clicks on it it opens the login/sign up page
@RealMusicOfficialChannel
@RealMusicOfficialChannel Год назад
Thanks For the video, This Is Helping Our Company Lots
@mylescrowder1898
@mylescrowder1898 3 года назад
I have everything down but my continue button goes to the login screen instead of submitting it
@prabhatjena5833
@prabhatjena5833 4 года назад
Superb video, wanted to know any one video coming in future containing from frontend to backend or playlist?
@dcode-software
@dcode-software 4 года назад
Hey Prabhat, thank you. Could you please explain a little more what you mean?
@prabhatjena5833
@prabhatjena5833 4 года назад
@@dcode-software mean any full stack playlist.
@dcode-software
@dcode-software 4 года назад
Ahh ok, sorry I don't have anything like that planned any time soon 😟
@prabhatjena5833
@prabhatjena5833 4 года назад
@@dcode-software ok.
@bigmancozmo
@bigmancozmo 2 года назад
i really like your voice for some reason lol
@FoxDenWorld
@FoxDenWorld Год назад
Is there a source code? I am having some errors I'm not quite understanding.
@saniazulfiqar1516
@saniazulfiqar1516 2 года назад
can anyone suggest me a book that have all about web development
@roryboyes2307
@roryboyes2307 2 года назад
Does anyone know the name of this colour sheme if it's not custom?
@metka___2655
@metka___2655 2 года назад
if i press continue i will be forwarded to the login page
@saunaknandi1814
@saunaknandi1814 3 года назад
Sir how to make Sing Up using google or facebook ?
@Monkeyindatrees
@Monkeyindatrees 3 года назад
Have searched the whole web for this answer thx M8
@abhijeetchavan4876
@abhijeetchavan4876 Год назад
which app is used to host the project
@SpaceVultureV
@SpaceVultureV Год назад
Vscode
@thepersiancat3701
@thepersiancat3701 3 года назад
For me wheni hidden the log in also sign in goes hidden
Далее
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 342 тыс.
Трудности СГОРЕВШЕЙ BMW M4!
49:41
Просмотров 1,4 млн
Learn CSS Flexbox in 20 Minutes (Course)
20:37
Просмотров 131 тыс.
ASMR Programming - Animated Login Page - No Talking
18:18
Please stop using px for font-size.
15:18
Просмотров 169 тыс.
Build this JS calculator in 15 minutes! 🖩
15:20
Просмотров 570 тыс.
Signup and Login with PHP and MySQL
43:16
Просмотров 281 тыс.
Wordpress vs coding - why devs SHOULD learn Wordpress
11:03
Learn flexbox the easy way
34:04
Просмотров 710 тыс.