Can `name`, `value`, and `id` be the same? Should they be?

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.


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>
        <!--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.

    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.

1 Like

“To group radio buttons together, we assign them the same name and only one radio button from that group can be selected”
does this mean that in the checkbox we can use different names? is grouping just used for radio buttons?

Grouping can be used with both check boxes and radio buttons by giving them the same name. Multiple check boxes can be checked, whereas only one radio button can be selected.

1 Like

thank you!!
another question :slight_smile: why don’t we write the content between the tags in datalist element as we did in select?

That would be question to ask W3C. The value attribute is a suitable place for it, though, since that what will be submitted with the form POST data.

1 Like