Learn HTML Forms In 25 Minutes

Рет қаралды 951,116

5 жыл бұрын

Data is key to the web, and the only way to collect data is HTML forms. In this video I will be covering absolutely everything you need to know about HTML forms in under 25 minutes. We will cover the main attributes of the form tag, how to create input elements with labels, and how to properly submit a form. This video is packed with every piece of information you need to know about HTML forms.
We will start by building a registration form with basic input fields and expand upon the example covering all form elements. We will discuss everything from text input, to check boxes. We will also cover form validation as well as label placement. By the end of this video you will know everything you need about HTML forms.
📚 Materials/References:
CodePen Code: codepen.io/WebDevSimplified/p...
🧠 Concepts Covered:
- Form tag attributes
- GET vs POST
- Label tag attributes
- Input tag attributes
- All important input tag types
- Select and option tag
- Textarea tag
- Submit and reset button
- HTML form validation
- Form accessibility best practices
🌎 Find Me Here:
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#HTML #WDS #Forms

Пікірлер: 901

@rohitmajnekar 4 жыл бұрын

That is how I want every tutorial to be... right on the point, no wasting of time talking nonsense......This is what i searched for specifically and got Edit(after watching the whole video): Subscribed *you earned this*

@WebDevSimplified 4 жыл бұрын

I'm really glad you enjoyed it. I try to cut out as much downtime and nonsense from my videos so you can learn what you want as quickly as possible.

@Max-tq1ig 2 жыл бұрын

EXACTLY

@rogercanda2504 2 жыл бұрын

You are not alone

@OperationAndrew. 4 жыл бұрын

The reason why you are the best on KZfaq for what you do, is that you seem to understand the viewer - you break it down in such a simplistic manner, that complex problems are easily understood. A lot of concepts (headaches) that I previously struggled with have been removed because of your channel. Great work, you are making a difference.

@dominikl2815 5 жыл бұрын

Keep going - you are doing extremely good job with creating one of the simplest, well crafted, web development tutorials on youtube.

@WebDevSimplified 5 жыл бұрын

Thank you!

@ShawnRitch 3 жыл бұрын

I agree, very well done :)

@Alexander-re8vz 3 жыл бұрын

@@WebDevSimplified How do u make the info submit but only the admin can see the info and not the other users

@defaultaccount9522 3 жыл бұрын

@@WebDevSimplified what software do you use?

@defaultaccount9522 3 жыл бұрын

@airusjhan francisco thanks

@bhavyamishra7035 4 жыл бұрын

never have i ever found any tutorial on HTML forms, so up to the point , short and crisp. Thanks for the wonderful video.

@darshitpandey8642 4 жыл бұрын

Ohhhhhhh 🤭

@louie_sevilla 4 жыл бұрын

I like your pace. I usually don't finish tutorial videos that are 20+ minutes long coz they make me sleepy but your way is fast and covers a lot in a short period of time just the way I like it. Please keep going. I want to learn more from you. Really simple. Thank you.

@WebDevSimplified 4 жыл бұрын

Thank you so much. I like to make my videos so that they have a high amount of knowledge per minute of video. I am just like you and usually find long tutorials to be boring and drawn out so I try to make my videos as condensed and short as possible. Usually when I have a long video it is because there is just too much knowledge I want to portray and it is not possible to do in a short time frame.

@RadiergummiXD 3 жыл бұрын

I just turn up the speed to 1.5x

@worldofcarsCA 3 жыл бұрын

kzfaq.info/get/bejne/b6qedqac1Nmyk5c.html

@s.akhtarjoomun263 3 жыл бұрын

I agree with you, but for me, it was even too fast. I watched the video at 0.75 speed. And I liked it very much. Now, if I have to watch it again, I'll watch it at normal speed. Great tutor, by the way. One of the bests I've known.

@infogiver972 Жыл бұрын

@@RadiergummiXD yeah thats what i do

@jamesaapollock 2 жыл бұрын

Yeah this is super helpful. I’m taking an accelerated degree program for web dev and I watch your videos before I start my chapter work. Gives me an excellent foundation for the chapters and makes them significantly easier to go through. Awesome content man.

@qhubbles Жыл бұрын

I've just fallen in love for every single thing shown on this video. Appart from the obvious good-looking teacher, the content, the pace and the seamless teaching is awesome. Everything was so clear that it's time for practice. Thank you so much!

@achengster4 4 жыл бұрын

Spent a few hours trying to understand forms and labels. You clarified it for me in under 25 mins. Thank you!

@mohammedalmukhtar8949 5 жыл бұрын

Another huge "Thank you!" from Seattle, Kyle!! I remember going through these elements in school but now I refreshed my memory.

@WebDevSimplified 5 жыл бұрын

I'm really glad I could help

@MrBryan4you 4 жыл бұрын

All my life of existence this is the most informative and brief tutorial i had ever seen... God bless you and may you live long enough to do this good job for generation to generation... lots of tutorials on KZfaq did it for 2 hours with no impact whatsoever.. professors at uni did for a whole session with no effect and waste of student precious time... here you are for less than 30 minutes.. xx

@donjayspace Жыл бұрын

I will say this is the best tutorial on coding I have ever come across, even a person that has never written a single line of code before will understand this video

@Jade_Hanson Жыл бұрын

yeah Kyle is one of the best. His explanations are near flawless and his demos are amazing.

@Nick-lh3vw 3 жыл бұрын

My guy! Great video man! I really appreciate the help! Straight to the point and well communicated in a way that is easy for beginners to understand. I'm watching this over a year after you uploaded it and I have to say man keep it up!

@filon861 4 жыл бұрын

✔ Great explanation ✔ Great Examples ✔ Clear Voice Thanks bro.

@higherpurpose1212 3 жыл бұрын

You forgot, GREAT HAIR!

@geton7942 5 жыл бұрын

I was trying to find a video about forms, but yours is the most informational and chill, keep it up man!

@WebDevSimplified 5 жыл бұрын

Thanks

@bernadettemoreno3086 4 жыл бұрын

Thanks for breaking it down and condensing everything into a small video. I am learning little by little in web dev.

@stevegibson1279 3 жыл бұрын

This is an outstanding tutorial. All essential, nothing wasted. Perfectly presented.

@VANTABL4CK 4 жыл бұрын

Thank you so much I was a little confused in the attributes of __ But you cleared my doubt and taught me some new stuff. Also, I like the way you talk and explain. It's so nice and peaceful. And this was the first time I completely watched a tutorial 20+ minutes long

@shreypatel9379 4 жыл бұрын

Best video on HTML forms .. just what i was looking for , simple and lucid explanations with a perfect pace.. thanks for such videos

@LucasA84 4 жыл бұрын

I wish I had found this tutorial before dropping out of Web class. Loved this video. Thank you. Keep them coming.

@sanjanagl 3 жыл бұрын

This was such a cool way of learning! Coded along the away. Loved it! Thanks a lot!

@riffatishfaq8496 3 жыл бұрын

I am speechless. Definitely deserves to be subscribed.

@prostockservices2560 3 жыл бұрын

FINALLY, A GOOD EXPLANATION!

@stephenofosuwilson993 Ай бұрын

my lecturer has been trying to get this to us for the past four months, and you just did more in just 25 mins... you are super

@kencroker6206 2 жыл бұрын

Wow! Thank you for describing all of the different input types and explaining how it connects to the idea of HTTP requests. I understand forms so much better now, and I'm glad I watched this video.

@DeVinhone 5 жыл бұрын

You've published that tutorial just in time, becuase I was looking for it few days ago. Thx bro!

@WebDevSimplified 5 жыл бұрын

I'm glad I could help!

@cryptorace3501 Жыл бұрын

I had no idea about html. But you made me learn it very fast. Love your teaching skills. You teach to the exact point without nonsense. Many thanks and good luck ❤️❤️❤️❤️

@benjamin2713 2 жыл бұрын

15:08 Pink Dyed Hair Social Justice Warrior Identifying as an apache helicopter: "That's where you're wrong kiddo"

@zainkhan-tc7bh 4 жыл бұрын

Concise , Simple and well crafted . Thanks a lot for making my concepts clear !

@mariacintamadicotresserras6566 Жыл бұрын

I'm teaching HTML and CSS and I find all your videos great for my students. In this video, though, I miss the explanation about two important tags to structure forms: and and, also, bananas and apples should have the same input name, so as their values are sent to the server as only one field: favourite fruits.

@dmitryhalavach4622 3 жыл бұрын

You are doing sterling work, this is one of the best and clearest explanation of forms in html I have ever heard. Many thanks!

@gloryudochi5023 3 жыл бұрын

YOU ARE SUCH A GREAT TEACHER! A GENIUS! YOU BROKE IT DOWN BIT BY BIT IN SUCH A WAY THAT EVEN A NOVICE WILL UNDERSTAND. PLEASE KEEP UP THIS GOOD WORK. GOD BLESS YOU.

@SuperHaunts 6 ай бұрын

Wow! BEST form intro/tutor that I've seen! Concice & to the point!

@nekitamocovek9491 4 жыл бұрын

I need help when i go on submit and it opens my results.html page i only get to see the link to go back on the form page i typed everything the same as you did and it wont show up on the screen

@AleksaTz 3 жыл бұрын

me too

@sovdi-funeral 3 жыл бұрын

@@AleksaTz I had the same problem. Further below someone posted a copy of the results.html page code that works. Copy and past the code below: Results Back to Form const resultsList = document.getElementById('results') new URLSearchParams(window.location.search).forEach((value, name) => { resultsList.append(`${name}: ${value}`) resultsList.append(document.createElement('br')) })

@AleksaTz 3 жыл бұрын

@@sovdi-funeral thank you!

@nols10 3 жыл бұрын

@@sovdi-funeral Why do the "/" takes us back to the form page?

@Tadae323 3 жыл бұрын

If you just style inputs and labels in CSS to have "display: block;" you will have one element per line without much effort.

@omegafala720 Жыл бұрын

Thanks!! I from Brazil 🇧🇷 , and i like so much your tutorials!! It's helping a lot to learn web sites development, THX!!

@mazenal-ali3543 3 жыл бұрын

Yup are the most brilliant nerd I have ever seen till now. You saved my day. Thank you very much

@ireallyamayuube 2 жыл бұрын

WDS: Let's use a radio button for gender because you can only have one gender Left Twitter: TRIGGERED Jokes aside, great tutorial! I'm following TOD and honestly forms have always got me sleepy, but you managed to condense so much info in 25 minutes, in a clear and direct way. I'd subscribed if I wasn't already :)

@maharshipandya189 4 жыл бұрын

be like - "AM I JOKE TO YOU ???" 😜😜

@MegaDani00 2 жыл бұрын

Mate you are amazing. You explain everything so simple and clear. Thank you!

@zm690 4 жыл бұрын

What a clear expliantion ! It is so useful. Since I was always confused with form and its structure attributes..

@jonathanmoore2139 Жыл бұрын

3 years ago was a simpler time when people would not be triggered at 15:09

@violet-trash 2 жыл бұрын

"They can only have one gender" Based.

@BreakingElegance 2 жыл бұрын

LMFAO how about the people that want 17 different genders? LMFAO!!!!! Super based

@andreaedmond1043 2 жыл бұрын

Thank you for simplicity and REPETITION. Thank you thank you thank you. Keep putting them out.

@barbarachamberlin7251 2 жыл бұрын

THIS was just what I was looking for in a presentation on HTML forms. Thank you SO much! Amazing!!

@ShubhamSingh-xt9ft 4 жыл бұрын

i m still wandering , how u brought that results script. except this flaw, very nice tutorial. i would like to suggest that before u take any step keep in mind that whether a beginner will understand it or not. in this case i didn't understand how u brought results script. i would rate it 99 out of 100. 1 - because of that flaw. :)

@WebDevSimplified 4 жыл бұрын

The result script was included into the head of the HTML page so it can be run when the page loads. This video is not about that script or javascript at all so I didn't want to waste time explaining it. I just used that script to make explaining concepts easier.

@azzazz3057 3 жыл бұрын

@@WebDevSimplified can you post a copy of the results script? we are trying to follow the guide step by step and can as part of the guide is missing, i understand that you say the video is not about the result script, but you show it in the tutorial, so people want to follow step by step to ensure that they are seeing the same results as you.

@WebZoneCode 5 жыл бұрын

Good Tutorial, but where is

@WebDevSimplified 5 жыл бұрын

I don't find the range input being used very much at all so I decided not to include it.

@WebZoneCode 5 жыл бұрын

Ok..

@tekkytammy8733 3 жыл бұрын

Dude, I just watched 1:56 seconds of your video and figured out why I couldnt see my form submissions in my address bar of the browser. And from there, I was able to test each one of my submit buttons and get the correct results in the address bar on most of them and the ones where I didn't , I had to research and figure out the nuances b/t the ones wher I just used button creating attributes or the button element itself. I can not thank you enough. I've subbed. Now imma watch the rest.

@nikitak9628 2 жыл бұрын

Awesome screencast. Thank you for breaking it down from the very basics and building on top of forms.

@spondoolie6450 2 жыл бұрын

15:09 facts

@cy_ 4 жыл бұрын

"because you can only be one gender"

@noblenormie1179 3 жыл бұрын

u trying to claim something different?

@wotizit 3 жыл бұрын

facts

@liviuvieru5060 Жыл бұрын

And whats's wrong with that?

@lazarus9581 Жыл бұрын

look man idc what ur gender is or what side of the argument you’re on, dont bring discourse into a programming video 😭

@SeekerAndLearner Жыл бұрын

I identify as an HTML form 😂

@rebeccaefetie1382 2 жыл бұрын

On point and straight to the point..... Simply amazing!!!

@hashninja 3 жыл бұрын

im 26 and getting into this I have a buddy whos going to the bootcamp im taking hes in the bay making a great amount of money as well as investing and just enjoying every moment of it im on the same path and i really appreciate all this informative videos cause even watching this to kind of go over the information really helps to get the full concept so thank you.

@Jason_Lucero 3 жыл бұрын

"they can only have one gender" In 2021 that's so edgy to say

@handsomeinosuke3628 3 жыл бұрын

so true XD

@defaultaccount9522 3 жыл бұрын

Ikr, not woke enough.

@nerioamg 2 жыл бұрын

i thought the same thing XD

@aamirayub8564 3 жыл бұрын

TO THE POINT tutorial! Great work!

@Amdebirhan_Abebe Жыл бұрын

Thank you. This is why i love youtube. There is always guy who make things easier

@vivianeb90 3 жыл бұрын

You are sooo clear, I love it. Thank you so much!

@umairbashir8266 3 жыл бұрын

I have been reading a book on HTML and in the form section, I just got confused. Your video has been proved helpful a lot. Thanks

@user-xv8vm1nk3k 4 ай бұрын

You are amazing! Never have I thought that learning HTML would be this easy. You made it look easy.

@prabhatniroula5953 2 жыл бұрын

It is really great like its first time that I was able to do with such a flow that I enjoy writting every letter of code. Thank you man! Keep it up

@kitboklanglaloo6663 Ай бұрын

Wow. Almost everything covered with form in a simplest way to understand. Keep it up

@ROBIN-kl5vr 4 жыл бұрын

After a long time of searching, I found this topic video. Thank you so much.

@SeekerShady 2 жыл бұрын

Best toturial I ever seen. Great job !!!! Thanks for taking the time to prepare it.

@konstantinoskoutras3342 3 жыл бұрын

bruh you explain these better than my lecturer does , thank you

@ancrobot Жыл бұрын

The best tutorial I've seen in my life!

@saj1006 3 жыл бұрын

Really awesome. simple, to the point and very clear. And I like the topics you choose & the learn in x minutes series is fantastic.....thanks a lot and subscribed.

@neerushokeen8920 2 жыл бұрын

Thanks a lot. Cleared all my doubts in just 25 minutes.

@Clickinqq Жыл бұрын

ty for teaching us, I struggled on this concept because the other tutorials rushed through everything so ty for not rushing and explaining every option thoroughly.

@anselmenounagnon4560 3 жыл бұрын

YEEEEAAAAAAHHHHHHH, really appreciate it. Your video is clean and explicit. Thank you.

@tylervaughan1387 2 жыл бұрын

Saving a student's life right now, can't thank you enough for this great video!

@techniquejoseph Жыл бұрын

Had to bookmark this one. It's a keeper!

@Zen-lz1hc 2 жыл бұрын

Extremely rich video. Thank you for cramming a lot of content in just 20min. Great video on forms :)

@felstawad6224 3 жыл бұрын

For people that just starting to learn Html this is super nice! grreat repetition if you do this yourself while watching this on a secound screen! good phase so most of the times you dont need to pause but still you wont get boored by someone explaining stuff slow. Im 15 hours in to Html and Css and this was perfect ty!

@LL-ko5qu 2 жыл бұрын

I understood everything very clearly. Thank you very much for explaining in such a good way with compiled code along side the written code

@mahammadnisar182 4 жыл бұрын

Fast and clear. Thanks man

@akimyoung8507 2 жыл бұрын

Dude this video was SUPERRRR helpful. Many many thanks man

@emcsquared9 2 жыл бұрын

Thank you for this! Really clear explanation. You are a very good teacher. Now I need to learn how to collect the data.

@hanlinwu1060 2 жыл бұрын

Your tutorial is so simple to understand and make me learn a lot! Thanks

@farzona1507 2 жыл бұрын

One of the best tutorials ever on html forms. Tnank you dude for your efforts!

@marcomacaluso7724 2 жыл бұрын

This really made forms so much easier to understand, thanks

@peacy7184 4 жыл бұрын

Thanks for this video, everything was really well explained! :)

@CJ-DailyCook12 Жыл бұрын

you're the best, thanks for breaking this down you really know what the user/ viewer wants , you're the best keep the good work.

@mariamminasian1018 4 жыл бұрын

wow!! you expain clearly and fast!! keep going!!

@agnespeuten5171 2 жыл бұрын

Man, you're so good at explaining *.*

@tausiqzuman9196 4 жыл бұрын

Best tutorial i have ever seen of Web dev keep rocking :)

@georgebassey3911 Жыл бұрын

This is the best video I’ve watched on web development

@ivandavidcarmona8384 Жыл бұрын

Dude, you've literally done my homework. Thanks a lot.

@sohailsaha7427 2 жыл бұрын

This was a very crisp tutorial, and I learnt a lot. Thank you. :)

@srikarravoori124 4 жыл бұрын

Great! All the form elements have been covered.

@patriciocorvalan1298 2 жыл бұрын

Great tutorial man. You feel like you are not wasting your time. Thanks!

@yummyjackalmeat 4 жыл бұрын

Thanks my man. Just what I needed.

@DjSeymur 4 жыл бұрын

You're so good at making these tutorials. Keep going

@eumm11 3 жыл бұрын

yo Kyle, you're an enormous help, thank you man, really!

@ghasemabd5595 3 жыл бұрын

I become happy when I see your tutorials :D

@elmarkmeres59 2 жыл бұрын

I forgot some of my lessons from 2019 thank you for posting this brilliant video this is really helpful.

@umojacolorado7360 3 жыл бұрын

Thanks for these videos. I really love that I can follow along and code.

@anjalikandhol 2 жыл бұрын

this is the video I was looking for 2 days......thankuu so much.....its all right on point

@elusivekro3837 3 жыл бұрын

Thanks for this was stuck trying to figure out labels for accessibility really helped alot

@vladtudorache2483 4 жыл бұрын

Man, congratulations on this video. I think this is a very good tutorial, well crafted. Thank you.

@gagan9872507229 4 жыл бұрын

wonderful combination of fast and easy way.

@Munzi89 4 жыл бұрын

Subscribed. You’re very thorough and easy to follow while helping me understand the reasoning behind it all. Thank you so much. Keep them coming like this.

@WebDevSimplified 4 жыл бұрын

Thank you! I'm glad my video was helpful.