HTML - The Label Element

HTML Forms
The web is a two-way communication medium. There’s lots of HTML elements for displaying data and producing output, and conversely, there’s also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.
1. Form Basics
To learn about forms, we’re going to create a simple sign up form for an imaginary web app. Our form won’t actually submit anywhere, since that requires additional server-side code. However, we will learn about all the most important HTML form elements.
1:37
Overview of Forms
3:11
The Form Element
5:30
The Input Element
2:08
The Textarea Element
2:06
The Button Element
2. Organizing Forms
A form can be created with just a form element and some controls, but it's helpful to the user if the form is organized with labels and fieldset elements.
4:05
The Label Element
3:39
Fieldsets and Legends
3. Choosing Options
Sometimes when creating a form, it's better for the user to choose from predefined options rather than typing in text. This can be accomplished with select menus, radio buttons, and checkboxes.
6:40
Select Menus
5:38
Radio Buttons
4:15
Checkboxes
1:20
Going Further

[@jayshiku]

I am new to HTML and this label bit had me confused. Thank you for this.

[@creationstudios8715]

Love this video he really explains it well

[@ellenniles660]

Thank you for the quick video explanation. The working examples really make it clear how everything lines up.

[@PepiVibes]

Thank you!

[@andreiinteamo2981]

thx good explain

[@arafatrahman4047]

many many thanks brother ,,, for this tutorial

[@chrisreybastian5549]

7 years ago but still helpful

[@gowthamginfinity]

thank you brother

[@Sadaf_gazala]

Thhhhkkksss for the explainationnnn

[@itsOmSarraf]

Thanks :)

[@svenp6592]

great video!

[@leticiaespino7251]

Great Short explanation.

[@vk-fb4ox]

awesome. thanks

[@LucianoClassicalGuitar]

Great and easy video to follow. Freecodecamp is great but sucks at explaining stuff.

[@Harsha_47]

thank you

[@beatzoid]

Thank you so much!

[@PrAsHaNtHdUke1093]

thanks a lot bro... post more videos

[@rakibulhashanrabbi]

Good!!!!

[@soewaiyanaung9168]

it really really helpful thanks

[@rejowanahmed6819]

Thanks!

[@TheJordon125]

i get this but would i not just type in name in text above the input field,which creates the same visual representation, except for that click feauture???????????

[@TheJordon125]

good video by the way

[@lalaithan]

Accessibility for visually-impaired.

[@jamalmonawer1964]

Thanks a lot

[@RamisaAnjum]

Thanks a lot!

[@paulhetherington3854]

X- a whole element. Label is in - circuit X.

[@orenelias_art]

good vid thanks

[@Aminulbd1]

thanks boss.

[@LoktionBanger]

Hy, is this applicable to hmtl 5? Is the 'for' tag still being used?

[@pgrmoja]

there is no reason for a placeholder if you have a label already right??

[@popoporifox4229]

its just safe to have booth, but I think placeholder is more practical than label. Otherwise label can be used to direct the user to input if the design is hard to navigate. I hope this help =)

[@lalaithan]

Popopori Pori Placeholders can cause confusion and users tend to leave them blank. Labels are smarter accessibility-wise.

[@linguaray8315]

thank u

[@csikosghost4302]

I'm still slightly confused, how do I access what they inputted?

[@david-stewart]

Within the form coding, you specify a URL for the data to be sent to. But this video is solely concentrating on labels.

[@northcote3070]

1:21 i will be clicking on the white space where I can type not on the NAME: .

[@paulhetherington3854]

HTML txt fields, fade in / out. Hence; default - only works, vs no other - active field.
You need, triple matrix field - Bin commandsz. You will catch / many a hack.

[@paulhetherington3854]

/4 signa w''(8x' -> 4xyX''rRo') for labels AVN in A1-cells / headers - arraylist /
/aka 8 - 4 frqsz u temporized labels light blue - dark blue from R-L shifts in cell headers tachron - compilers = active fire wallsz //use legit QRST wavesz as radio navigator - templatesz of steel shapesz - lines - mechanical design //AKA Mercedes Benz Compresor(Germanic) modelsz //where (4y'' u rRo' xX''V(w'')pMva''') display as hexagonal hollogramsz - 3-D active tachron(V-game) reads /

[@fragrantbloom]

Thank you!

[@14amina1]

Thank you!

[@ravense8337]

Thank you!