Build an HTML Form From Scratch

► Forms allow us to collect information through user inputs. These include fields for entering text and elements we can click. Such as buttons, checkboxes, and dropdown menus that allow us to choose from a series of options.
There are many things that we can do with forms. They are an essential part of any website and one of the most important web concepts to learn. Google search is a form, Logging in to Facebook and Twitter is done with a form. Entering your payment details for an Amazon order is done with a form.
In the last video, we learned what forms are, how we use them, and then we looked at the various text-based and clickable form fields brought to us by the HTML input element.
In this video, we will bring together all of the work in the two previous form videos and build an entire form from scratch.
Part 1: • Form Inputs - Text, Em...
Part 2: • Form Inputs - Checkbox...
► Timestamps:
0:00 Start
1:08 The form we will build (styled & unstyled)
1:40 The forms are presentational only
2:48 Client side validations
3:31 The required attribute
4:04 Creating name & email inputs nested in labels + the required & autofocus keywords
5:48 Grouping inputs & labels within a fieldset & adding a legend
6:35 Using a. span to isolate some text
7:22 Creating the provisional structure of the next two sections
9:16 Building the dropdown menus with Emmet
10:41 Adding the information for the dropdown menus
11:33 Adding dropdown, radio, checkbox, & textarea inputs for the 3rd section
15:20 Associating radio inputs
16:01 Checking the labels and associated inputs are bound
16:21 Adding a submit button
17:05 Testing the form
18:15 Summary
► Get the code:
Styled Form: codepen.io/craigabourne/pen/b...
Unstyled Form: codepen.io/craigabourne/pen/z...
GitHub Repo: github.com/craigabourne/html-...
--------------------
Part 1 code: codepen.io/craigabourne/pen/Q...
Part 2 code: codepen.io/craigabourne/pen/w...
► Links used in the video:
Form Attributes: www.w3schools.com/html/html_f...
The Fieldset Element: developer.mozilla.org/en-US/d...
► The HTML for Absolute Beginners Playlist: • HTML for Absolute Begi...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

Learn HTML: kzbin.info/aero/PL4cTxE4s2XIYJL6uPQUwMt25M70gPl-O6

[@pranavguly]

This is a very good series Craig

[@craigabourne]

Appreciate it 🙏

[@Naz-yi9bs]

Forms FTW!!!

[@leonardreveira]

Nice project for forms that really helped me

[@craigabourne]

Good job! Hope you found them useful 👍

[@wandafish]

Thanks! Forms are scary but this helps ❤

[@craigabourne]

Happy to help!

[@shansutherland]

This was such a fun way of learning! Coded along with. Thanks! Loved it!

[@craigabourne]

Glad you enjoyed it!

[@marinstrup]

Thanks for these they are really helping me 🙏

[@craigabourne]

Happy to hear that!

[@ovidiu2394]

Thank you!

[@craigabourne]

You're welcome!

[@flashcsgo4559]

hi (saying hi to help with youtube algorithm)

[@craigabourne]

Thanks! Appreciate it 👍

[@davidbreitner]

The multi cursors you do are crazy. So cool. What is this witchcraft? How are you doing that?

[@craigabourne]

I'm on Mac and just hold ⌘ (command) + click where you want the cursor. On Windows I believe it is ctrl+alt+click.

[@davidbreitner]

@@craigabourne That's awesome bro. Thanks for the info

[@clinthoon]

Thanks. A good useful practice to go through and build a nice form. Thanks for the CSS too. It is helpful to look at and understand what it is doing 👍

[@craigabourne]

Glad it was helpful! You're most welcome. Glad you're using the CSS. I was hoping some people would take 5 minutes to have a glance through it and see if they can understand it.