link label with input type radio in html

In this lesson we'll discover how to generate from a list multiple html label tags and input type radio. We'll link the label with the input, so that when you click on the label the corresponding input is activated / toggled. We'll also find out how to group multiple input type radio together and we'll create the functionality to be able to reset it. The reset is an html hack, as there is no way to reset an input radio group once a selection has been made with native html.
Once the structure is done all all we need is to style it and see the magic happening.

## Related videos ##
Create Social Media buttons using Custom Icon Font - CodeTap

Your resume online for free, your CV using HTML5 and CSS3

# Free resources
W3Schools where you can discover HTML, CSS, JavaScript and more

Free Code Camp - Amazing community where you can test your skills in well prepared challenges

# Powered by

### What do you get with CodeTap? ###
Build websites and get paid $30,000 and reach as much as $200,000 per year as a senior web developer with or without any knowledge of coding.
20 years of experience crammed into one master plan will be revealed to you, full of shortcuts to empower you to build websites from day one and learn how to while you do it.

[timoteidumitru]

I've been looking for awhile for an explanation regardless how to make the connection between label and input, but here is explained even more, how to make that conection in an dynamic way. This made video answer to few questions i had for so long time, many thanks to CodeTap.

[dumitratandara]

Very well explained how to create html label tags and input type radio, and then link them together in a simple way. Thank you!!

[cornelcristianfilip]

One more awesome thing I learned: how to dynamically connect input and label by pairing up the value of the id attribute for the input tag and the value of the id attribute for the label tag! :)
Awesomeness! :D:D:D

[dumbfoundtown]

I need to beef up my JS, I understand the concept but need more time with it to see how you make the connections. Definitely will have a more in depth look into w3schools and learn about syntax, structure etc.

[That_Flav]

What changes do you have in Visual Studio Code to have the "M" and "U" with orange and green? Because it looks different then my code editor.

[ancutaHANTARI]

Maybe first time if never haven't heard about tags or any programming language, maybe you feel scared about coding (like I was), but the key is when you start to have a deep understanding and the meaning of what you are doing in Visual Studio Code, then it becomes easier to do the tasks from todo.list, you can progress and enjoy your work. Just watch the video and follow the steps. If you have an error and cannot sort it out, call for help to someone who is better than you and you can carry on till you finish the project. I am writting this from my experience as it is not first time I am learning coding but till now I was not able to understand what I am really doing. The key is to understand what you have to do, then you can start to create website after website.

[codetap]

Have you ever used labels in forms to focus the input elements? You can focus the elements using label for attribute linked to the id attribute of the input, no JavaScript needed.

[edutxu]

Is there any chance you make public the extension you are using to create the todo list? :P