To associate the text with its corresponding radio button so that clicking on the text will select that button, we need to make a further addition to the code for each button by surrounding the entire button and its associated text within a label.
Provided that you use the correct naming conventions and layout for your buttons, you will not have any trouble.
The first thing that to look at when using radio buttons on our form is how the buttons need to be coded in order for them to function properly as radio buttons.
In actual fact the setup of these fields is the most simple of all form fields to validate as radio buttons set one value that only needs to be tested when the form is submitted.
The difficulty with radio buttons is that there are at least two and usually more fields that need to be placed on the form, related together and tested as one group.
The desired behavior we want is to have only one button selected at a time; when one button is selected then any previously selected button will be automatically deselected.
The solution here is to give all of the radio buttons within the group the same name but different values.
See HTML5: How to use the "required" attribute with a "radio" input field for more information on how to do this well. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
The value that will be passed for a specific group when the form is submitted will be the value of the button within the group that is selected at the time that the form is submitted.
In order for the person filling out the form to understand what each radio button in our group does, we need to provide descriptions for each button.
Would you like to answer one of these unanswered questions instead?