Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Radio Buttons

Paul Kelly
Paul Kelly
3,541 Points
Posted by Paul Kelly
Paul Kelly
3,541 Points

I still don't understand why you need to both attributes 'id' and 'value', and why they are/have to be the same. 

<input type="radio" id="under_13" value="under_13" name="user_age">

The teacher slightly glossed over this bit, saying:

"So all of the other attributes are pretty much self explanatory. We've used the id attribute and the value attribute previously."

Can someone please explain to me these attributes and the difference between them more clearly, specifically in relation to this exercise.

Thank you Paul

4 Answers

Antti Lylander
Antti Lylander
9,686 Points
Antti Lylander
Antti Lylander
9,686 Points

At this point, I suggest to concentrate on learning how something works and not bothering yourself too much with trying to understand why it is the way it is. I don't have an easy answer to your question but i have a couple guesses:

  • some historical reason
  • value gets sent to server and it's nice that you can name it anything that fits your programming and it's never shown to user. Maybe you'll sometimes even create the value dynamically. I don't know, but there must be some use case where it is necessary to have both.
Paul Kelly
Paul Kelly
3,541 Points
Paul Kelly
Paul Kelly
3,541 Points

Thank you Antti, I do sometimes have a habit of needing to understanding every reason behind every minute detail, it's just the way I learn I guess. I do understand that you have to walk before you can run though.

Thanks for the help

Paul

Antti Lylander
Antti Lylander
9,686 Points
Antti Lylander
Antti Lylander
9,686 Points

Yes, I understand. I also like to understand rather than just take everything given, but I've also learned that sometimes it's not the best way. Often, when you just keep going, the pieces will fall into places and one day you just notice that everything is clear. In programming, there will always be something that you don't know and you'll have to live with it.

Christopher Phillips
Christopher Phillips
10,061 Points
Christopher Phillips
Christopher Phillips
10,061 Points

id's are associated with css as well as html element relations.

value is what gets sent to the server for a stored answered.

It's purposeful (helps with code readability) that in some of these examples, they are the same but they accomplish separate tasks.

Paul Kelly
Paul Kelly
3,541 Points
Paul Kelly
Paul Kelly
3,541 Points

Thank you, I can see this site will be my friend in the coming months.

OK so let's see if I have got it:

'name' refers to the group that the buttons are all in (ie. the question being asked "are you over 13?")

'value' is the record of the answer the user chose

And I thiink..

'id' is there so that it can be linked to the label element.

But this is the bit that's confusing me, why do you need both? In the example in the lesson the 'answer' (sorry I don't know the term, I'd never done any coding before a month ago) to both 'value' and 'id' are identical, and in the example on the mdn link they are 'email' and 'contactChoice1' respectively. Can't you just have one question and one answer?

There is clearly something fundamental that I'm not getting, like I said I'm new to this, please can someone help me to understand?

SURENDRA MALLA
SURENDRA MALLA
3,727 Points
SURENDRA MALLA
SURENDRA MALLA
3,727 Points

while skipping to understand why "id" "name" and the rest of attribute is used,. even more confusing, the code below just works with the same results without the use of any attributes

     <label>age:</label>

    <input type="radio">

    <label class="light">under 13</label><br>

    <input type="radio">

    <label class="light">over 13</label>