How is name used for grouping?

In this section we use the name attribute for multiple inputs. In the lectue it says, that this would be used to group the values together. How would that look like on the receiving end?

We are using same name value TOPPING . for example, what if i need checkboxes to select bunā€™s size or bunā€™s materials? Can i use the NAME ATTRIBUTE with DIFFERENT VALUES in the same section or create a different section? i am asking because checker threw me error when i compiled with spelling mistake in NAME VALUE.

1 Like

Radio buttons that are grouped all have the same name since we can only pick one. Check boxes, even when grouped still get their own individual names since we can select one, all, or none.

Spread to use
<input type="radio" name="spread">Butter
<input type="radio" name="spread">Margarine
<input type="radio" name="spread">Oleo
23 Likes

Nice topic
ā€œUsing the same name for each checkbox groups the <input> s together.ā€
What does it mean?
I even tried puting different names for each inputā€™s name, like topping1, topping2 and topping3, but didnā€™t see any difference on the screen.

If you see anywhere that I state checkboxes cannot have the same name, tag me in so I can correct that. They can be grouped, but there are provisos.

https://www.dyn-web.com/tutorials/forms/checkbox/same-name-group.php

Note the use of FIELDSET to indicate grouping. More importantly, the use of [] to indicate an array of choices.

3 Likes

i think you are going too fast, at this point, we are not at the ā€˜radio lessonā€™ yet, itā€™s the next exercise :wink:
Unless the questions section of the radio buttons will take us here too and iā€™m not aware of it yet. but you seem to do that often (giving answers based on exercises we are not at yet).
this is just something i noticed and is meant to be constructive, itā€™s not a blame or anything!

7 Likes

When there is no link to the exercise we are left guessing. Itā€™s why we stress so much posting the link and code with oneā€™s question.

10 Likes

my bad, i thought the question section was automaticaly linked to the exercise page. thank you for your quick reply :smiley:
we were here: https://www.codecademy.com/courses/learn-html/lessons/html-forms/exercises/checkbox-input

11 Likes

Hi, thanks always for replying to the questions written in the board. Your replies have been most helpful.
Pretty much the syntax in the examples you have given is pretty self-explanatory. Otherwise, it is enough for anyone to go away and do their own individual research from the various sources available online.
I appreciate the help :slight_smile:

4 Likes

https://www.codecademy.com/courses/learn-html/lessons/html-forms/exercises/checkbox-input
Hello Roy,
I have a question regarding this exercise.
The section class=ā€œtoppingsā€. Shouldnā€™t the name= in each input be set to ā€œtoppingsā€ as well? The exercise instructs to use ā€œtoppingā€, dropping the (s).
Thank you!

There is no real problem in the singular term being used. However, it would be nice if we could somehow examine the POSTDATA to see how it appears in the request header. The multiple values come into question in terms of how they get passed as a group. Will need to do some research on that.


Just now spotted the query string in the localhost location bar.

https://localhost/?patty=beef&amount=2&doneness=3&topping=lettuce&topping=tomato&topping=onion

Not sure how that will get resolved by the form handler.

2 Likes

Thanks! I was curious about that :slight_smile:

1 Like

According to your query string name topping has been mentioned three times and all those have different values. if i am not wrong name is like a variable which holds the value of input. In this query string what is the actual value hold by topping. if all of three values are being stored simultaneously then how it works. I am finding it hard to understand what it will store value and how it will transfer this information to the server.

TBH, I donā€™t have a good answer. That query string is not my invention but copied from the location bar of the localhost browser in the LE.

In this case, my question is do we need to define ā€œspreadā€ somewhere first in our code? because when it is shown in the screen, spread does not appear at all. so I thought it is kind arbitary by just naming it or in our tutorial, i think they name it ā€œtoppingā€ but how did the server recognize such name?

Short answer, no. It does not need to display, but the label does stateā€¦

Spread to use

In the above form, name="spread" identifies the key name to assign to the value in the Submited form data associative array. Radio buttons cannot be selected in multiple so only one of the values will apply.

[ spread => Butter ]

Why does this exercise on Codecademy use the same name despite using checkboxes?

https://localhost/?patty=&amount=&doneness=3&topping=lettuce&topping=tomato&topping=onion

This results in an array of selections as the value of topping.

Checkboxes - The complete HTML5 tutorial

Try the example under ā€˜Multiple choicesā€™. Check all the boxes and submit to see the result.

4 Likes

Will giving multiple inputs the same ā€œnameā€ help in the css file to style them as a group rather than individually?

It can be done, yes, but it might be simpler to use a FIELDSET, instead.

1 Like