Are there differences between `name` and `id`?

Are the “name” and “id” always the same? what is an example of when we would need them to be different?

3 Likes

Hello and welcome on the site :grinning:
They can be different, Id is to identify the element in CSS or in JS, name is to identify element in HTML and in PHP for form handling

Hope this helps :grinning:

68 Likes

This question has been asked many times in this HTML Forms unit, and the best answer I’ve seen so far is this: FAQ: Learn HTML: Forms - Adding a Label

1 Like

I’ve noticed that the instructions mention name but not id, however to pass the code you need to have both.

4 Likes

Use name attributes for form controls, as that’s the identifier used in the POST or GET call that happens on form submission.
Use id attributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier.
It’s possible to look up elements by name too, but it’s simpler and more reliable to look them up by ID.
Name is used for form handling in PHP when a form is submitted via HTML, name doesn’t have to be unique on a page, as it can link other elements together.

Hope this helps :grinning:

9 Likes

I still don’t get it.
Why is the id attribute to identify the element in CSS/JS even though in the lesson whe saw that it’s related to the attribute “for” in the label element (which is html language or I am wrong?)?
Sorry for my bad english!

2 Likes

Id is used in CSS and in JS as you said:

document.getElementById("someId") // javascript

#someId {
  color: green; /* CSS */
}

For is used for labeling as you said, and name too.

But beacuse Id-s are unique it’s easier to handle them in JavaScript.
So that name’s aren’t unique they return an array even if there is only one name, just like classes:

document.getElementsByName("someName") // Names

document.getElementsByClassName("someClass") // Classes

As I said they return an array so we target one of them with:

document.getElementsByName("someName")[0] // Names

document.getElementsByClassName("someClass")[0] // Classes

We can even target all of them (or some of them) with a for loop:

for (let i = 0; i < document.getElementsByClassName.length; i++) {
  document.getElementsByClassName[i].style.color = "green";
}

And we use names to work with forms in PHP.

Hope this helps :grinning:

1 Like

Hello,

Just wondering if “name” and “id” must be passed to the same string. Can anyone help with this?

1 Like

They’ve answered that question before. You can and is often see it on big companies as the moderator said in another FAQ.

Is there a way where Codecademy forum hightlights the code depending on the language?

For example python print("Hello World")

I don’t know I would like to have some colors in the text to differentiate the languages like Discord does.

Basically an ID isn’t going to have an effect on your actual html but it serves as a variable name in your CSS and Javascript, meanwhile a name is going to be the variable name to use in your html.

1 Like

It makes sense, thank you :slight_smile:

If “name” is for identifying elements in HTML, then why don’t we pass the “name” in the for="", in a label tag. Why we pass “id”?? And I’ve also seen, we almost always keep the values of Ids and names, in an input tag, the same.

I never write in these forums but I had to this time because this really did help a lot thank you!!

Is the “<input id=” supposed to reference the “<section class=” or “<label for=”

The prompt says: Associate the <input> to the first <label> by assigning the correct value to id .

How do I know what the correct value is? Am I missing something?

It’s referencing the <label for="" section.

I read over this forum post and don’t fully understand all of the relationships but id and for are always the same and have a direct relationship to each other. From what I’ve read so far id and for are the direct links between <label> and <input>.

I am a beginner but I believe that you may be wrong here because when we remove the ID from the input statement and then click on the label on the browser it will not highlight/select the input square however when you remove the name attribute and then click on the label it sill highlights/ selects the input box.

Basically I am almost certain that the ID and the for attribute correspond with each other.

Then again I am just a beginner I would love for a experienced programmer to clear this up.

For someone who is just learning HTML and do not know about CSS and JS.

The ID attribute helps in relating to the label for that input. So the code rendering software would understand which label is for which input or vice versa.
The Name attribute is the identifier for the text attribute. When the form is submitted, the value of the identifier i.e. name attribute is combined with what the user would input and sent.