HTML Forms and Inputs | HTML5 Tutorial for Beginners

Поділитися
Вставка
  • Опубліковано 20 січ 2025

КОМЕНТАРІ • 80

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  3 роки тому +13

    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: ua-cam.com/play/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu.html

  • @_Rohit_Kumaar
    @_Rohit_Kumaar 3 роки тому +25

    Dave Gray

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому +9

      Rohit, I am honored! And you have applied what you learned - great job! 🙏💯

  • @CelestialsBnK
    @CelestialsBnK Рік тому +4

    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
    @felicialeann547 2 роки тому +7

    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!

  • @konstantinzakharov5643
    @konstantinzakharov5643 Рік тому +1

    Finally I feel confident creating HTML forms! I am smashing that like button!

  • @yatin1370
    @yatin1370 Рік тому +1

    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! 😎

  • @KeanuCharlesReeves-c4r
    @KeanuCharlesReeves-c4r Рік тому +1

    Your the best teacher on UA-cam

  • @natnaelgetachew325
    @natnaelgetachew325 Рік тому +4

    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
      @DaveGrayTeachesCode  Рік тому +1

      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.

  • @gustavogus692
    @gustavogus692 2 роки тому +2

    Just wanted to say thank you for all the great classes you provide. Exceptional way of teaching! Thanks a lot!

  • @Ennla
    @Ennla 5 місяців тому

    You are amazing i really was going to give up, until I found your channel, thank you sooo much, I will watch all your videos you are best teacher on UA-cam thank you keep it up 🙏🙏

  • @i-jamesazubuike9208
    @i-jamesazubuike9208 5 місяців тому

    Excellent teaching method...I just learned a lot from a single lecture.

  • @Grihlo
    @Grihlo 2 роки тому +1

    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
      @DaveGrayTeachesCode  2 роки тому +1

      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
      @Grihlo 2 роки тому

      @@DaveGrayTeachesCode thanks a lot for the detailed explanation!

  • @andygordon6880
    @andygordon6880 10 місяців тому

    Fantastic tutorial, absolutely perfect for beginners. Thank you

  • @ahmedafgooye3427
    @ahmedafgooye3427 2 роки тому

    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 !

  • @bumbaismail1004
    @bumbaismail1004 Рік тому

    Best Tutorial ever. Thanks from Uganda Africa❤❤❤

  • @dinesh3246
    @dinesh3246 Рік тому

    You deserved a support,but underrated 😢❤

  • @kirkb2665
    @kirkb2665 Рік тому

    You've got great content.
    I really appreciate what you do.

  • @fairytail6896
    @fairytail6896 Рік тому

    Excellent video Sir!!!

  • @chidungphan1516
    @chidungphan1516 Рік тому +1

    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
      @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.

  • @IG7799-c4u
    @IG7799-c4u Рік тому

    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
      @DaveGrayTeachesCode  Рік тому +1

      This short shows the VS Code settings for that: ua-cam.com/users/shortsMDaxWffMjrQ

  • @sigmatronX
    @sigmatronX 3 місяці тому

    @Dave Gray, you are special!

  • @scopeinsurancebrokerage5283

    you've a Great teacher .thank you

  • @HOQM8185
    @HOQM8185 Рік тому

    Great Work! Please i would like to see how would style your forms.(semantic elements or divs ?)

  • @garikmelqonyan6011
    @garikmelqonyan6011 2 роки тому

    Great as always!

  • @luciendenarend-sculptor3693

    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?

  • @estherokiki5894
    @estherokiki5894 2 роки тому

    I love you Dave Gray❤️❤️.... thanks a lot for this video

  • @codingSparrow143
    @codingSparrow143 2 роки тому +2

    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
      @DaveGrayTeachesCode  2 роки тому +1

      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
      @codingSparrow143 2 роки тому

      @@DaveGrayTeachesCode Thank you, Sir. 😊

  • @sakariye.maxamed9090
    @sakariye.maxamed9090 2 роки тому

    your tutorial is very Awesome I loved IT , thank you so much .

  • @CanDoSo_org
    @CanDoSo_org 3 роки тому

    Very nice tutorial, thanks, Dave.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому

      You're welcome! Rush fan or name coincidence?

    • @CanDoSo_org
      @CanDoSo_org 3 роки тому

      @@DaveGrayTeachesCode Sorry, I don't know what "Rush fan" means😀.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому +1

      @@CanDoSo_org Rush is a rock band. Their singer is named Geddy Lee. Must be a coincidence!

  • @Modest480
    @Modest480 2 роки тому

    Wahooo, this is awesome ✨

  • @shahenalam9904
    @shahenalam9904 2 роки тому

    Very nice explanation

  • @brijeshkumarchavda
    @brijeshkumarchavda 2 роки тому

    Thank you!

  • @pablo20237
    @pablo20237 3 роки тому

    Thanks, Dave

  • @dinesh3246
    @dinesh3246 Рік тому

    Underrated 😢

  • @riyadsheikh495
    @riyadsheikh495 2 місяці тому

    Such a smart guy

  • @fireworks6795
    @fireworks6795 Рік тому

    thanks

  • @viniciusm.m.7822
    @viniciusm.m.7822 3 роки тому

    Forms and Inputs are not "that easy"! haha
    Thanks, Dave!
    Obrigado, meu irmão!

  • @Sonu-tg6tg
    @Sonu-tg6tg 3 роки тому +1

    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
      @DaveGrayTeachesCode  3 роки тому +4

      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
      @Sonu-tg6tg 3 роки тому

      @@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
      @DaveGrayTeachesCode  3 роки тому

      @@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
      @Sonu-tg6tg 3 роки тому

      @@DaveGrayTeachesCode thanks a lot!!

  • @andromilk2634
    @andromilk2634 7 місяців тому

    By curiosity : how is a beginner supposed to understand the difference between "posts" and "get" and what those are for and imply? I feel like this type of content is a tiny bit more "advanced" compared to the level of someone completely new to HTML. I only was able to understand the reference (as a beginner) because I did a bit of MERN. But I don't believe I would have understand that part if I saw this for the first time in my life.

  • @IG7799-c4u
    @IG7799-c4u Рік тому

    19:34 An American prefers an Americano, makes sense! :P

  • @MehndiBySoukayna
    @MehndiBySoukayna 2 роки тому

    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
      @DaveGrayTeachesCode  2 роки тому

      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.

  • @e.svarunkumar6318
    @e.svarunkumar6318 11 місяців тому

    it would have been more beautiful sir if you could provide us notes !!

  • @rrasch8125
    @rrasch8125 Рік тому

    Totally confused with this section..too much too fast.

    • @DaveGrayTeachesCode
      @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
      @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.. 🤷‍♀👍

  • @pablo20237
    @pablo20237 3 роки тому

    Hola

  • @yavuzselimoksuz6795
    @yavuzselimoksuz6795 Рік тому

    Thank you so much