Vigyata.AI
Is this your channel?

Building Elegant Forms with HTML Tutorial

5.3K views· 223 likes· 13:01· Sep 22, 2022

🛍️ Products Mentioned (11)

Check Out GCore ► https://gcore.com/cloud/?utm_source=bloggers&utm_medium=link&utm_campaign=filipdev_youtube_cloud_ai-platform Forms are the foundation of our HTML knowledge. It's the first thing you implement on your first website that is that little bit more complex. HTML Forms are important, and in this video I teach you a more elegant and professional way of implementing forms programatically. We also learn some great VS code extensions to drive your projects, and a neat little tricks you use to disable your forms. INQUIRIES AND COLLABORATIONS ► grebowskifilip@gmail.com SUPPORT MY CHANNEL via PayPal ► paypal.me/FilipGrebowski BUY Developer Resume Template ➡ https://shop.developerfilip.com ✏️📋 Join my Newsletter ► https://shop.developerfilip.com/sign-up 🔥 Join my Discord Server ► https://discord.gg/VBj4yZH Follow me on Twitter ► https://www.twitter.com/developerfilip Follow me on Instagram ► https://www.instagram.com/developerfilip Check me out on GitHub ► https://github.com/FilipGrebowski VIDEO TIMESTAMPS: 0:00 - what we will cover 0:59 - starting the implementation 1:40 - must have vs code extension 2:35 - another neat vs code extension i use 3:58 - position anything in the center of a div 4:58 - the ELEGANT form explained (watch all) 10:36 - the INERT attribute (amazing) 11:50 - style your INERT forms with css //CAMERA GEAR USED ○ My Laptop - https://amzn.to/3Nw8vz5 ○ Camera Body - https://amzn.to/3wI3zBu ○ Wide Angle Lens - https://amzn.to/3wHbAqi ○ All Around Lens - https://amzn.to/3MJKJPT ○ Mic - https://amzn.to/3MNfEuW ○ Rode Mic Boom Stand - https://amzn.to/3lFLRs5 DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week! MUSIC BY ► @epidemicsound #webdeveloper #htmlforms #htmltutorial

About This Video

Today I’m teaching two small HTML form tweaks that make a massive difference in how “professional” your forms feel—especially when you’re triggering submissions programmatically. I start with a super simple forms.html setup in VS Code (I’m using the Emmet “!” shortcut to scaffold the page), then I show you my must-have workflow basics: Live Server so you can see changes instantly, and Prettier so your formatting stays consistent and Top Notch. From there, I build a basic form (label, text input, button), center it with flexbox, and wire it up with JavaScript. Here’s the big lesson: if you submit a form using form.submit(), the browser can completely ignore your built-in HTML validation—like required fields. That’s why I switch to form.requestSubmit(), which respects required and the rest of your validation rules. It’s a tiny change, but it makes your forms way more robust and your data more consistent. At the end, I show a really neat trick: the inert attribute. Add inert to the form and everything inside becomes unclickable—inputs, buttons, the lot—while still looking the same. Then I show you how to style inert forms (like lowering opacity) so it actually looks disabled.

Frequently Asked Questions

🎬 More from Developer Filip