What is the difference between `id` and `name`?

The understanding of all the elements of the course is going amazingly well, but one thing won’t connect in my brain: the difference between id and name? Is there a very clear explanation for this difference and wht use them both in one ?

id is mostly used in javascript or for binding labels to stuff. For example:

<input type="text" id="foo"/>
<label for="foo">bar</label>

or a javascript example:

document.getElementById("foo");

The name attribute i have only seen used for the radio type for options.
in this case the name makes sure the radio buttons are grouped to each other. for example:

<div>
  <input type="radio" id="huey" name="drone" value="huey"
         checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

As can be seen all options are grouped under the name “drone” which makes sure only one radio button can be selected.

Not sure if name is used in any other way by default. But since name is just an attribute you could also use it with javascript. It would act similar to a class attribute i believe.

Thanks. Name for grouping in something like radio buttons makes sense. I’ll let it go through my brain :wink: I will remember your help when I’m months in this Web Devloper career path and need to use it!

If I’ve this piece of code I’m currently working on as part of the course. Why do I always have id and name?

 <form action="story.html" method="get">
        <label for="animal-1">Animal:</label>
        <input id="animal-1" type="text" name="animal-1" required>
        <br>
        <label for="animal-2">Another Animal:</label>
        <input id="animal-2" name="animal-2" type="text" required>
        <br>
        <label for="animal-3">One More Animal:</label>
        <input id="animal-3" name="animal-3" type="text" required>
        <br>
        <label for="adj-1">Adjective (past tense):</label>
        <input id="adj-1" name="adj-1" type="text" required>
        
        <input type="submit" value="Form My Story!">

The id is binding to the for in the label. The name is captured by Submit and paired up with the input in the POSTDATA.

2 Likes

This is makes it clear to me! Thanks

1 Like