Learn HTML Forms In 25 Minutes
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- 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/Web...
🧠 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/Web...
CodePen: codepen.io/Web...
#HTML #WDS #Forms
![ได้เวลา! พาน้องแฝดฉีดวัคซีนครบ 1 เดือน🫣 [cc] แดนแพทตี้ SS2 | EP.52 |](http://i.ytimg.com/vi/IzeLtaXBLNE/mqdefault.jpg)
Keep going - you are doing extremely good job with creating one of the simplest, well crafted, web development tutorials on youtube.
Thank you!
I agree, very well done :)
@@WebDevSimplified How do u make the info submit but only the admin can see the info and not the other users
@@WebDevSimplified what software do you use?
@airusjhan francisco thanks
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*
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.
EXACTLY
You are not alone
The reason why you are the best on TH-cam 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.
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.
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.
I just turn up the speed to 1.5x
th-cam.com/video/9DnCCkosNcc/w-d-xo.html
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.
@@RadiergummiXD yeah thats what i do
never have i ever found any tutorial on HTML forms, so up to the point , short and crisp.
Thanks for the wonderful video.
Ohhhhhhh 🤭
15:08 Pink Dyed Hair Social Justice Warrior Identifying as an apache helicopter: "That's where you're wrong kiddo"
I knew someone noticed this and commented!
How did you get the results page? I saw you just copied and pasted it but when I tried to type in the code that you copied, it wouldn't affect the results page. I also was wondering how you made the back to form button on the second page.
3 years ago was a simpler time when people would not be triggered at 15:09
"They can only have one gender"
Based.
LMFAO how about the people that want 17 different genders? LMFAO!!!!! Super based
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 :)
"because you can only be one gender"
u trying to claim something different?
facts
And whats's wrong with that?
look man idc what ur gender is or what side of the argument you’re on, dont bring discourse into a programming video 😭
I identify as an HTML form 😂
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
me too
@@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'))
})
@@sovdi-f0 thank you!
@@sovdi-f0 Why do the "/" takes us back to the form page?
be like - "AM I JOKE TO YOU ???" 😜😜
✔ Great explanation
✔ Great Examples
✔ Clear Voice
Thanks bro.
You forgot, GREAT HAIR!
FINALLY, A GOOD EXPLANATION!
how dare you!! how dare you create such an informative tutorial that our teachers spent a month to discuss???!!!
15:09 facts
Thank you so much for this video....
This is very much useful for the beginers...
Love From INDIA
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 TH-cam 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
How dare you! your video is not woke enough for California, Gender should not be radio input! It must be a multiple select tag with infinite scrolling ...
Just kidding! great work, love your content and fully support your channel
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.
So, this video was uploaded in 2019...
I guess you need to update your video. People nowadays might need checkbox for the gender selection.
Another huge "Thank you!" from Seattle, Kyle!! I remember going through these elements in school but now I refreshed my memory.
I'm really glad I could help
this is so difficult for beginner
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 ❤️❤️❤️❤️
Thank you so much sir for making this video.This video is very helpful to me to understand the Forms in HTML
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.
Hey buddy thanks for the tutorial. Can i find the results.html page code somewhere?
You've published that tutorial just in time, becuase I was looking for it few days ago. Thx bro!
I'm glad I could help!
That's good video. But what is the code for create answer input and if it answer is true, there is a text: "Correct!"?
If you just style inputs and labels in CSS to have "display: block;" you will have one element per line without much effort.
Hey man, thanks for the tutorial. Very helpful. Could you explain the results.html as well? Seems like that is not working for me.
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. :)
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.
@@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.
World : how we can stop =deforestation ?
= world War 3 /
= climate change ?
This man : all we need is to add this simple tag and here we go .
"they can only have one gender"
In 2021 that's so edgy to say
so true XD
Ikr, not woke enough.
i thought the same thing XD
"You can only have one gender"? Careful there!
jk, thank you for all your content.
Good Tutorial, but where is
I don't find the range input being used very much at all so I decided not to include it.
Ok..
How the heck do you do the JavaScript for the results? I copied it exactly from the video and it iterates but populates the div with literally '${name}: ${value}'
Found it. It was backticks, `` instead of ''. You really should explain that part or put a link to another video about it. I hate JavaScript lol
@@ethangroat8333 yup i also had trouble with it , thanks
@@ethangroat8333 Thanks. 2 hours frustration before I found your comment.
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
thanks for this valuable content!!!!!!
I am speechless.
Definitely deserves to be subscribed.
Hi, this may be stupid question but when I submit I am getting this below${name}: ${value}
${name}: ${value}
${name}: ${value}
${name}: ${value}
${name}: ${value}
${name}: ${value}
${name}: ${value}
Back to Form ,
instead of the data I submit, that what I see when I run my browser any one who can help,
thanks!
Weird, show me your code.
Best video on HTML forms .. just what i was looking for , simple and lucid explanations with a perfect pace.. thanks for such videos
very good explanation , you simplified a lot
I was trying to find a video about forms, but yours is the most informational and chill, keep it up man!
Thanks
15:07 we're gonna create a gender, cause they can only have one gender
- all the lgbtqs crying right now
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!
I didnt really understand the code in your results.html.. would have been nice if you explained it (Im trying to learn this so I can use my js)
You are doing sterling work, this is one of the best and clearest explanation of forms in html I have ever heard. Many thanks!
15:07
It was nice to know you, buddy
rip
i think he just meant that you usually just choose one gender either male, female, non-binary, transgender, gender neutral etc not many choose two different genders but of course there are many different genders to choose from
@@Techaikosa r u for real? :dd
15:05 bro is getting cancled
Thank you
All Thanks to Web Dev Simplified
when you upload a file you need to use POST method not GET
yeah.. forms are pretty cool. But I always have to check everything in PHP to make sure some people don't just remove some properties with the browsers HTML editor..
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
Thanks!! I from Brazil 🇧🇷 , and i like so much your tutorials!! It's helping a lot to learn web sites development, THX!!
you are not okay
Thank i have this in my school practical project
Let me try to clarify this with an analogy about a drive thru restaurant. Hopefully you can make better sense of what is going on. You pull up to a drive thru speaker to tell your order:
Order your food here
You are at the speakerbox(). You see a sticker above the speakerbox that says "Order your food here"(). The for and id attribute are saying "THIS label is for THIS input" or "THIS 'Order your food here' sticker is for THIS speakerbox". If you didn't have this, it would be like someone ripped the sticker off the speakerbox and stuck it on the back of someone's car. You wouldn't know that sticker was for that speakerbox if you saw it randomly or if you saw any of those stickers you wouldn't know what speakerbox it belongs to. They link the two together.
You decide to order. You say into the speaker "burger". This would be like typing "burger" into your input box. The action attribute() is where your order, or value, goes to. Without this it would be like yelling into the speakerbox with no one on the other end listening to you.
The drive thru employee receives your order into his headset. The method attribute decides HOW he's going to tell your order. Is he going to yell it out to another employee so the whole restaurant can hear or is he going to write it down on a piece of paper and hand it to him? He decides to yell it out so he yells, "BURGER!" His coworker looks at him confused. He doesn't know the name of the person that the burger is going to. The drive thru employee says, "Sorry. Mike's order is a...BURGER!" This is what the name attribute in is for: mike's order = burger. Without this, the drive thru employee can yell out orders all day long ("burger", "wings," " french fries") without knowing who they go to.
Hope this helps.
4:20 I'm extremely confused. I have everything typed out perfectly (I was very, very careful checking it 6 times each page) and when I go to Submit, it still only shows "Back to Form." Saved everything, opened with live, made sure everything down to the exact formatting was perfect....it's weird.
how can i get the data and send them to a google spread sheets?
Thanks for breaking it down and condensing everything into a small video. I am learning little by little in web dev.
Great video, just what I needed to understand forms in HTML, this really helped, however, the results page just displays "'${name}: ${value}'" for me, any suggestions on what is wrong?
Wow I learned codding very fast
15:10 you say person can have one gender but here in 2021 people can have up to 20 genders or none :D
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
excellent review…
simple/quick…
In this case perfect…
I usually find your videos on topics that I’m just learning too fast for me to keep up with… but in this case… i haven’t played with forms in a long. time and I needed a video that could break through the rust in my head :-) This was great ! 24:55
oya mwangu unaongea chap mno dah 😥
how do you type the slanted apostrophe in the results.html page
And how to align those input fields perfectly?
Extremely rich video.
Thank you for cramming a lot of content in just 20min.
Great video on forms :)
for the submit can you use ?
Your talent is commendable. Quite a lot of planning and sequencing must have gone into creating such smooth videos.
Thank you! Videos like this do take a ton of planning and forethought. I generally put in around 5 times more effort into editing/planning than I do into recording.
Thanks for such a detail video. Can you please show how to add dynamic input field. For example, we have a input field for hobby but if the user has multiple hobbies then he can click on the add button and an additional input field is added to the form dynamically. How can we save the data of the dynamically added data to the database? If you can do a tutorial on this it will be helpful.
That is a good idea. It is a quite involved process and involves JS and a server, but I will add that to my list of things to do.
@@WebDevSimplified Will be a fun task.
Hey Kyle, I've been looking around but can't seem to find an answer. I know can use the File API, Blob API, FileReader API for files uploaded from input file. However, It only ever uses the path value which includes 'C:\fakepath\...' as prefix. Any tips on how to actually access the contents of the file? Specifically JSON. Thanks!
Dude all the paid courses are shit wen u get this sort of amazing content . Glad that i came across this channel. Love your pace man . Other vedios are too boring to even complete
I was stucked here but through your video my every confusion is gone .Thankyou so much for this helpful uploads 😀😁
Hello, nice video btw, i wanna ask that, I noticed at the URL section is a IP address (127.0.0 thingy), how do you do that? because when I tried to follow your code, it just shows the file path which is the file directory. Please help.
Great job bro. I really got so much in just 25minutes. However I am not getting how to type the link to move from the processor page back to the form. Back to Form. I need guidance on that.
Thank you for this! Really clear explanation. You are a very good teacher. Now I need to learn how to collect the data.
Very helpful and informative BUT! skipped over . ...... I am having a heck of a time finding out how to have a simple textarea that works. By works, I mean it posts to a file on the sever, and I am able to view the data submitted. I so thought this video was going to be it. Having said that, I am going to subscribe and religious view these videos of yours. A little help here por favor. Subscribed and I even hit that little bell one hears so much about. ----- Video Idea: Chrome Dev Tools - maybe you have already made such a video.
Hello. I'm confused. 2:46 you create a page called results.html where the form is submitted to. What? What does this mean? What is this page? Do you make it yourself in HTML later? How is this page accessed? How do you access information from this page? What does it look like? I have been learning HTML for months and have still not been able to understand what this part of a form is supposed to mean or how to do it or how it works.
I could've saved so many hours of validation code if I only knew about the fucking RESET. lmao.
This was very helpful... as far as it went. Now how do I take the information inputted, and store it somewhere?
You need JavaScript for that, if you're going to use it on the same page. To use is on a different page, it has to be sent to the Back-End.
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!
I copied your code exactly as it is @ 3:53 and I see the values that I typed into the form up in the URL but it's not inserting the name and value that I typed into the form on the page itself. All it shows is:
${name}: ${value}
${name}: ${value}. What's going on? Thanks for any assistance.
you have explained everything so well. Thanks😀
When I click on the back to form button this is the erroe i get: HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
What could be the problem?
i have a question, actually in the beginning of the page coding , how did you automatically put on the below code??
because i couldn't do it and i had to type it by watching your video. please is there any shortcut?
Wow @webDevSimplified exactly what i needed to know this video have thought me thank you. Please i will love to use server so i can use post and connect with an existing SQL database to update data in various tables. Please what is your recommended tutorial on this?
Why we need ?
Checkbox type works without name. Why you wrote it?
In radio type, I understand, we need "name", for choosing only one option. But in checkbox type what kind of work "name" does?
Yup are the most brilliant nerd I have ever seen till now. You saved my day. Thank you very much
3:40 Aaaaand let me just paste some weird JavaScript into this to make it all work........ Without explaining how.
Doesnt work.
Excellent tutorial, but say No! No! No! to reset buttons! It's like an Acme cartoon "self-destruct" button with no useful purpose; there's never a situation in which the user needs to clear every input on the form at once, so why even have such a button? Especially cartoon silly is the idea that you would put it right next to the submit button, so people might accidentally clear their entire form instead of submitting it. How obnoxious!
I just created forms that require zero programming. You are fed simple html and you put it on your website. Done. All processing and email response back to you is done on our site. It can't be easier any other way!?!
I can view my input values in the url bar when I click 'submit', but it doesn't display on the screen (I'm not using a server) - please help!
So im just copying this till I get it but this is my first time and I copied the results form and tried to make my own form page that didn't work so I used your form ass a placeholder is there any reason you can think of why its not working for me and I use Code Writer (The Go Back link sends me into my C Drive on the internet as well which im not worried abt since I know other ways to redirect by clicking a button or a line of text)
Edit: Could the Script not work for the same reasons flash games don't work?
Thats another sub in the bag! But quick question, have you- or can you make a video on a report a bug form?? That would be very helpful, thanks.
hell of a video man thanks
Please what browser extension are you using in your vs code? I mean, I know you've got the live server preview installed, but apparently for it to preview the work within the software ( which is what I want) rather than out of the software through other browsers, I need an in-app browser extension which seems to be what you're using so please I would appreciate if you could help me with the name of that browser extension, thanks in advance.
@Web Dev Simplified basically i'm making a song request form and i have
followed your tutorial and some how my form isn't doing what your form is doing if that makes sense
could you email me please