I don't understand the name or value attribute

So far I am on the (new) responsive web design cat photo app section.

While on here I have seen the name attribute used two ways now, here are some examples:

1:

<input id="snow" type="**radio**" value="snow" name="snow-rain"> 
<label for="snow"> Snow </label>

2:

<input id="snow" type="**checkbox"** name="weather">
<label for="snow"> Snow </label>

Why have this difference? Does this mean that name could actually have whatever you want in it as long as every (radio/checkbox) option shares the same name?

I have also seen name and value share similar text, from what I have gathered it seems like name is for grouping things together and value is for giving the data for individual things.

For example:

If I was sending data out that was about favourite types of weather ,the name would be weather and the value would be rain.

Is this correct? Is there more to it? I have asked someone before and they said name and value swap roles depending on what you are doing, is this accurate?

Thank you to anyone who is reading this

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

Difference between?

Yes, its so that you can send data to the backend and know which radio or checkbox is part of a field (like what is the weather, in this case)

Yep you are right

Yes

You will learn more when you start sending data from front-end to back-end.
I think the type= and name= attribute is all that there is to it. Later you will learn about form methods, form actions to send data from html to backend servers.

I don’t think that’s accurate nor have I heard about that.

You can read more about it here

As you can see, data are being sent to server in name/value pairs, like weather: rain, or weather: sunny, not the other way around

Hope this help :+1:

2 Likes

Yes! This absolutely helped! Thank you so much, I was thinking about this for so long yesterday I am glad I finally got some feedback :slight_smile: