HTML Forms and Inputs | HTML5 Tutorial for Beginners
Рет қаралды 34,889
Күн бұрынWeb Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
HTML forms and inputs can be confusing for beginners. In this tutorial, you will learn about HTML forms and many HTML5 inputs and attributes. Adding forms to your web pages make them interactive for your users.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of an HTML for Beginners tutorial series playlist:
• HTML Tutorials for Beg...
🔗 Starter Source Code: github.com/gitdagray/html_cou...
📬 Course Updates ➜ courses.davegray.codes/
HTML Forms and Inputs | HTML5 Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:25) Forms make your pages interactive
(01:11) Adding a new anchor link
(01:56) Adding a new article element
(03:24) Form element
(04:19) Text input
(08:48) Adding a 2nd text input
(10:00) Wrapping inputs in block elements
(10:40) Password input
(12:08) tel input
(14:36) Number input
(16:55) Select, option and optgroup elements
(23:28) Datalist
(26:03) Adding semantics with fieldset and legend
(27:39) Radio buttons
(30:51) Checkboxes
(33:22) Textarea
(35:43) Email and other inputs
(36:02) Button elements
(38:45) Submitting the form
(40:45) Last button, Post vs Get Requests
(44:26) Validate your HTML
🔗 All Resources for this HTML Tutorial Series: github.com/gitdagray/html_course
⚙ Web Dev Tools:
Chrome Browser: www.google.com/chrome/
Dark New Tab Chrome Extension: chrome.google.com/webstore/de...
Visual Studio Code (VS Code): code.visualstudio.com/
Prettier VS Code Extension: marketplace.visualstudio.com/...
vscode-icons VS Code Extension: marketplace.visualstudio.com/...
Github Themes VS Code Extension: marketplace.visualstudio.com/...
W3C HTML Validator: validator.w3.org/
HTML5 Outliner: chrome.google.com/webstore/de...
📚 References:
MDN HTML: developer.mozilla.org/en-US/d...
MDN HTML Elements Reference: developer.mozilla.org/en-US/d...
HTML Entities Character Chart: html.spec.whatwg.org/multipag...
🚀 Semantic HTML References:
MDN Web Glossary for Semantics: developer.mozilla.org/en-US/d...
w3Schools Semantic HTML: www.w3schools.com/html/html5_...
MDN Document and website structure: developer.mozilla.org/en-US/d...
🚀 HTML Table References:
MDN Table Basics: developer.mozilla.org/en-US/d...
MDN Advanced Tables and Accessibility: developer.mozilla.org/en-US/d...
🚀 HTML Forms References:
MDN Web Forms: developer.mozilla.org/en-US/d...
MDN Form Element: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about creating HTML Forms helpful? If so, please share. Let me know your thoughts in the comments.
#html #html5 #forms
@DaveGrayTeachesCode 2 жыл бұрын
When you add forms to your HTML, you are making your web pages interactive. Users will be able to send you information if they choose, and that allows two-way communication instead of just presenting information to the user. There's a lot to learn about HTML forms. In this tutorial, we'll go over many of the basic form inputs as well as how to submit the information to a web server. If you are just getting started with HTML, I recommend starting at the beginning of this HTML for Beginners playlist here: kzfaq.info/sun/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu
@_Rohit_Kumaar 2 жыл бұрын
Dave Gray
@DaveGrayTeachesCode 2 жыл бұрын
Rohit, I am honored! And you have applied what you learned - great job! 🙏💯
@CelestialsBnK 9 ай бұрын
Very professionally and educationally presented. When you talk, you're not trying to set a speed record, and the room you're in doesn't create an echo. Very good. I will follow your chanel.
@felicialeann547 Жыл бұрын
Honestly, each time I finish following along with one of your videos and look at everything, I feel so excited that I'm learning this. Thanks so much!
@DaveGrayTeachesCode Жыл бұрын
That's awesome, Felicia! Keep making progress! 💯🚀
@user-sv8bg6fu9r 5 ай бұрын
Your the best teacher on KZfaq
@konstantinzakharov5643 8 ай бұрын
Finally I feel confident creating HTML forms! I am smashing that like button!
@yatin1370 6 ай бұрын
Here for a refresher after going through this series some months back. Completed in just 2 days now. Nothing better like Dave's teachings to get back on track! 😎
@gustavogus692 2 жыл бұрын
Just wanted to say thank you for all the great classes you provide. Exceptional way of teaching! Thanks a lot!
@DaveGrayTeachesCode 2 жыл бұрын
You're very welcome, Gustavo! 🙏💯
@natnaelgetachew325 Жыл бұрын
I am very happy to learn this lesson with you. The way you explain HTML tools one by one in each of your lessons, I've started and given up on so many HTML lessons because they were boring, but your lessons are so clear. Thank you very much. But there is still a lesson that I need from you and that is C++ and if you please give a lesson on it in the same way, I would appreciate it.I was looking for it on your channel and lost it.
@DaveGrayTeachesCode Жыл бұрын
Thank you - I'm glad I have helped you. C++ is a programming language I do not currently teach. freeCodeCamp has some good tutorials for it though.
@andygordon6880 3 ай бұрын
Fantastic tutorial, absolutely perfect for beginners. Thank you
@fairytail6896 5 ай бұрын
Excellent video Sir!!!
@dinesh3246 6 ай бұрын
You deserved a support,but underrated 😢❤
@garikmelqonyan6011 Жыл бұрын
Great as always!
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@iambrijeshtoo Жыл бұрын
Thank you!
@kirkb2665 Жыл бұрын
You've got great content. I really appreciate what you do.
@DaveGrayTeachesCode Жыл бұрын
Glad you enjoy it!
@bumbaismail1004 Жыл бұрын
Best Tutorial ever. Thanks from Uganda Africa❤❤❤
@DaveGrayTeachesCode Жыл бұрын
You're welcome! And hello 👋 to Uganda!
@homeofqualitymovies8185 6 ай бұрын
Great Work! Please i would like to see how would style your forms.(semantic elements or divs ?)
@pablo20237 2 жыл бұрын
Thanks, Dave
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 🙏
@CanDoSo_org 2 жыл бұрын
Very nice tutorial, thanks, Dave.
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! Rush fan or name coincidence?
@CanDoSo_org 2 жыл бұрын
@@DaveGrayTeachesCode Sorry, I don't know what "Rush fan" means😀.
@DaveGrayTeachesCode 2 жыл бұрын
@@CanDoSo_org Rush is a rock band. Their singer is named Geddy Lee. Must be a coincidence!
@estherokiki5894 Жыл бұрын
I love you Dave Gray❤️❤️.... thanks a lot for this video
@DaveGrayTeachesCode Жыл бұрын
Thank you for the kind words! 🙏🚀
@Grihlo Жыл бұрын
Thanks for another detailed HTML5 lesson! I really enjoy following your explanations. 32:55 - looks like for the checkbox input type all the name attributes must be different. I also checked the examples on MDN website. And in fact in previous section of this video you emphasized that name attribute should be the same for single-choice radio input. As checkbox is multiple choice, name has to be unique if I understood correctly.
@DaveGrayTeachesCode Жыл бұрын
Great question! This is a good discussion to have. I prefer what I have in this example because the form processing will show one heading "pets" with an array of results - you will learn about arrays in Javascript - for example: ["dog","cat","fish"] ...if I name one checkbox dog, another cat, etc... the form processing is cluttered and they are not all identified under one header (pets). Complete the example form the way I did and submit the form to the httpbin.org address. Now change the form to match up the names with dog, cat, fish... instead of pets. Submit the form again and see the difference. 💯
@Grihlo Жыл бұрын
@@DaveGrayTeachesCode thanks a lot for the detailed explanation!
@chidungphan1516 Жыл бұрын
Too good lessons to me, Great tutor. What’s about receiving form when I filled out the form after submit. Just like feedback form from customer.
@DaveGrayTeachesCode Жыл бұрын
You need to a server to process the form as we used for the example here. A server could send you an email or you might login to see results from many forms. You learn how to build that in backend web development.
@sakariye.maxamed9090 Жыл бұрын
your tutorial is very Awesome I loved IT , thank you so much .
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@scopeinsurancebrokerage5283 Жыл бұрын
you've a Great teacher .thank you
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@tchippat7634 Жыл бұрын
He is among the best teachers on youtube !!!!
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@yavuzselimoksuz6795 5 ай бұрын
Thank you so much
@dinesh3246 6 ай бұрын
Underrated 😢
@luciendenarend-sculptor3693 5 ай бұрын
Very informative and clear. I don’t know if you answer questions; but I came across your channel because I’m searching how to get rid of unsafe warnings when visitors start to click a field on my form. I think I discovered that it is the “mailto” that is in the code. What must I do to avoid this?
@Modest480 Жыл бұрын
Wahooo, this is awesome ✨
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that!
@ahmedafgooye3427 Жыл бұрын
May be you don't know me! you're my yt teacher always enjoy your web dev courses and learned from u more thank u !
@DaveGrayTeachesCode Жыл бұрын
You're very welcome! 💯
@shahenalam9904 Жыл бұрын
Very nice explanation
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@fireworks6795 Жыл бұрын
thanks
@DaveGrayTeachesCode Жыл бұрын
Welcome!
@codingSparrow143 Жыл бұрын
Sir, Is it ok if we use to start form elements from new line instead of wrapping them in ? Btw, Thanks for your tutorials. 👏❤️❤️.
@DaveGrayTeachesCode Жыл бұрын
Yes, you can. After you learn CSS, you may decide to use and set margin rules instead of the . However, is a valid element and can be used.
@codingSparrow143 Жыл бұрын
@@DaveGrayTeachesCode Thank you, Sir. 😊
@viniciusm.m.7822 2 жыл бұрын
Forms and Inputs are not "that easy"! haha Thanks, Dave! Obrigado, meu irmão!
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Vinicius! 🚀
@Valdaur Жыл бұрын
How do you get your multi-line comments looking like that with the coloured starting and ending comment tags with the line between them? 24:08
@DaveGrayTeachesCode Жыл бұрын
This short shows the VS Code settings for that: kzfaq.infoMDaxWffMjrQ
@Sonu-tg6tg 2 жыл бұрын
can you please suggest me some free resources to get into UI/UX roles, currently I am in third year of computer science engineering, i am not able to find right mentor who can guide me in this UI/UX journey can you please help me out
@DaveGrayTeachesCode 2 жыл бұрын
At the end of this HTML series, I will be starting a CSS for Beginners series. If you already know CSS, you can find more advanced design tutorials on these great YT channels: 1) Kevin Powell, 2) Design Course, 3) Adrian Twarog, and 4) freeCodeCamp. I hope those help out! 💯
@Sonu-tg6tg 2 жыл бұрын
@@DaveGrayTeachesCode thank you for sharing, i am familiar with HTML, CSS, JavaScript and Basic React which i learn from your channel. But now I found that my interest is not much in coding part, but i am interested in more UI/UX or user experience roles. But for that I don't know how to start, which resources to follow and move forward. What kind of projects should I do, and how to get entry level jobs or Internships
@DaveGrayTeachesCode 2 жыл бұрын
@@Sonu-tg6tg The Design Course channel I recommended shares many of these resources. freeCodeCamp recently shared a full Figma tutorial for design, too.
@Sonu-tg6tg 2 жыл бұрын
@@DaveGrayTeachesCode thanks a lot!!
@e.svarunkumar6318 3 ай бұрын
it would have been more beautiful sir if you could provide us notes !!
@Valdaur Жыл бұрын
19:34 An American prefers an Americano, makes sense! :P
@DaveGrayTeachesCode Жыл бұрын
In my case, this is very true. 💯☕
@pablo20237 2 жыл бұрын
Hola
@DaveGrayTeachesCode 2 жыл бұрын
Buenos dias 😎
@MehndiBySoukayna Жыл бұрын
sorry but i see that you are using tag to move to the next line !!!!!! it's wrong and if someone did that in the interview he will never get the job. guys use tag tag is only to write a paragraph.
@DaveGrayTeachesCode Жыл бұрын
This is bad advice. A div is not a semantic HTML element and should only be used when a semantic HTML element does not provide what is needed. There is a previous lesson in this series on semantics HTML. I suggest you view it to learn why it is important.
@rrasch8125 Жыл бұрын
Totally confused with this section..too much too fast.
@DaveGrayTeachesCode Жыл бұрын
I always recommend learning at your own pace. Please feel free to review and re-watch sections. Break one lesson / chapter into smaller ones for easier digestion. Anything that helps. 😀
@rrasch8125 Жыл бұрын
@@DaveGrayTeachesCode It’s not the pace…I can go as slow or fast as need be and re-watch over and over... I don’t understand whats being said re: labels, names, values and id’s and what’s the difference between them all and how they are used.. 🤷♀👍
MOONCAKE FACTORY
Рет қаралды 66 МЛН