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

FAQ HTML FAQ
,
#1

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

3 Likes
FAQ: Learn HTML: Forms - Number Input
FAQ: Learn HTML: Forms - Number Input
#2

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:

44 Likes
#3

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
#4

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

4 Likes
FAQ: Learn HTML: Forms - Number Input
#5

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:

7 Likes
#6

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
#7

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
#8

Hello,

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

1 Like
FAQ: Learn HTML: Forms - Number Input
#10

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

#11

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.

#12

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.

#13

It makes sense, thank you :slight_smile: