FAQ: Learn HTML: Forms - Radio Button Input

This community-built FAQ covers the “Radio Button Input” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Radio Button Input

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

please explain briefly
<input id=“answer” name=“burger” value="yes" type=“radio”>YES

please why is there two values when we have already add a value of yes in the input element> and another >yes< again.
and explain more on id attribute

When we give an INPUT element an ID attribute, it is there as a hook for a LABEL.

<input id=“burger” name=“burger” value="yes" type=“radio”>
<label for="burger">YES</label>

or

<label for="burger">YES</label>
<input id=“burger” name=“burger” value="yes" type=“radio”>

The text in the label goes to the screen, the value goes to the POST data with the name burger

burger = 'yes'

Extended

<label>YES
<input name=“burger” value="yes" type=“radio”>
</label>

or

<label>
<input name=“burger” value="yes" type=“radio”>
YES</label>

Note above that the label wraps the input control. In that case we do not apply an ID attribute since the control is a child of the label.

2 Likes

In the exercises shared for checkbox and radio buttons, the values provided for id and value attributes are always same. Is this a convention? Can the id and value attribute values be different?

The two attributes are in no way related. The id is purely a reference, whereas the value is what will be in the POSTDATA for that control, assuming there is a name attribute to pair it up with.

I’m quite out of date in terms of modern form handlers, but still feel pretty sure that id is not parsed when POSTDATA is constructed. It may well be, meaning if the control has an id, it wouldn’t need a name. I’d be suspect of this, though, and would give name precedence over id if the control has both attributes.

Bottom line, value is a field all to itself and is populated by the user who happens to be filling in the form, or preset if it is a checkbox or radio button.

If I have multiple questions on form using radio buttons, how do differentiate the set of choices for EACH question?

Not sure I follow the question. Radio buttons permit only one choice from the group. They should all have the same name attribute value.

    <fieldset>
      <legend>Choose a color</legend>
      <label><input type="radio" name="color" value="red"> Red</label>
      <label><input type="radio" name="color" value="green"> Green</label>
      <label><input type="radio" name="color" value="blue"> Blue</label>
    </fieldset>
1 Like

Exercising “checkbox” attribute in an element in a previous section I see that a “class” in a element and “name” attribute in the element are same.
So, I thought that the reason for a same “name” attributes in the elements is that the “group” is used in “class”.

this “class” is different with “name” attribute in the element. I see that it is okay to be different between a class and a name attribute but I couldn’t understand the reason for the differences in the context of a previous exercise.

    <section class=**"cheesy"**>
      <span>Would you like to add cheese?</span>
      <br>
        <!--Add your first radio button below-->

      <label for="yes">Yes</label>
      <input id ="yes" type='radio' **name='cheese**' value='yes'>
        <!--Add your second radio button below-->

      <label for="no">No</label>
      <input id='no' type='radio' **name='cheese'** value='no'>

The class attribute is a CSS hook (and possibly JS behavior) and in no way related to the name attribute.

Radio buttons only permit one selection from the group, hence they all have the same name attribute. It does not conflict with a class of the same name.

name attributes are associated with the user input of that control group.

POSTDATA = {
    cheese: 'yes'
}

what is the purpose of name attribute?

Suggest search for html attributes mdn. It will turn up a page that lists all the attributes recognized by HTML5, and if one digs deeper, all the attributes of earlier iterations of HTML.

Also suggest delving into form element mdn. That will turn up a description of the form and its attributes and child elements, known as controls.

It’s important that we understand the action attribute and how it relates to the submit type of user input.

Submit is a JavaScript event that triggers a request to the URL in the action attribute of the form opentag. The control data (values) is paired up with the name of the controls to create a key/value pair known as the POSTDATA which is then transmitted as a queryString appended to the request URL. The program at the other end of the request is known as the reqyest handler.

The request handler parses the POSTDATA it receives and usually stores it in a database, but may even just parse it to a response page. Some form of response is sent back to the client to confirm the web transaction.

The purpose of the name attribute is to give a name to the value inputted by the user on that control so it gets properly entered into the query string of the request.