Form Inputs - Checkbox, Radio, and Submit Buttons

► 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 section, we learned what forms are, how we use them, and then we looked at the various text-based form fields brought to us by the HTML input element.
In this section, we will discuss the many interactive clickable input types available to us. Namely, the checkbox, radio buttons, submit buttons, and dropdown menus.
Part 1: • Form Inputs - Text, Em...
Part 3: • Build an HTML Form Fro...
► Timestamps:
0:00 Start
1:29 Clickable input types
2:04 Checkboxes
2:29 The checked attribute
3:02 The checkbox hack
3:43 The date input
4:32 The time input
4:52 The color input
5:20 The file input
6:21 Radio buttons
8:16 Using the name attribute to associate radio buttons
9:52 The value attribute
10:39 Dropdown menus
12:50 Setting the default option in a dropdown menu
13:49 Submit inputs
14:58 HTTP 405 error
16:25 Reset buttons
17:16 Summary
► Get the code:
START CODE: codepen.io/craigabourne/pen/Q...
END CODE: codepen.io/craigabourne/pen/w...
GITHUB REPO: github.com/craigabourne/html-...
► Links used in the video:
The Checkbox Hack: css-tricks.com/the-checkbox-h...
HTML Input Types: www.w3schools.com/html/html_f...
HTML Input 'value' Attribute: www.w3schools.com/tags/att_in...
HTTP 405: developer.mozilla.org/en-US/d...
HTML Input Type 'reset': www.w3schools.com/tags/att_in...
► 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

[@Naz-yi9bs]

Form Inputs#2 FTW!

[@createspace4368]

Nice. Never knew the 405 error stuff

[@craigabourne]

Glad it was useful!

[@janelleschuh3263]

Love this and the first one. Will you do a video showing how to handle the form data?

[@craigabourne]

Absolutely! Might be a little while though. Will include that with the backend stuff that will come later on.

[@rayasversion]

Very good video craig from the uk

[@craigabourne]

Thanks FlossyCat 👍

[@kirillbrehzkov]

Very important to understand forms inputs. Love the variation between this video and the text input video. I can build good forms now

[@craigabourne]

Yeah, totally. Forms are one of the main ways for users to interact with us developers. So if you're collecting data or communicating with users, got form structuring is an absolute must!

[@manendarpverma5252]

I learned tons from the 3 form videos. Very good teaching

[@craigabourne]

Great to hear! Appreciate the feedback! 👍

[@leelaneupane4958]

Learning a lot! Best few videos on structuring forms i have seen Thanks 👏

[@craigabourne]

Great to hear! Thanks for the feedback 👍

[@Adeyemi201]

thank you so much

[@somnarchaudhary]

Packed full of good content. Any full courses coming down the line? You are like Colt Steel

[@craigabourne]

Who knows? Nothing any time soon. Aiming to get as much as possible on KZbin and our website.

[@jovanstrickland]

Great videos bro

[@craigabourne]

Appreciate it

[@plcasiraghi4722]

Good videos. When the backend you show?

[@craigabourne]

Cannot give you a firm answer unfortunately. Its coming in future with the Node content. As quick as I can

[@ovidiu2394]

This isn't even my final form