Do we need both name and id? Can they be the same thing?

Would there be any problem if I set the same word for an id and a name attribute inside an <input>?
For example:

<label for="username">Username</label>
<input type="text" id="username" name="username">

Is this valid or will it cause any problem?

No, perfectly valid and quite common. In fact, if you inspect facebook (big company with good coding practice) email login field:

<input type="email" class="inputtext" name="email" id="email" data-testid="royal_email">

you see that name and id are the same, you see this a lot.

39 Likes

Oh my god I didn’t think I would receive such a quick answer! thank you so much! great course and great web! I use to have such a hard time trying to learn any kind of programming, but this website is taking me places with web programming!

33 Likes

Why do we need to specify the name of the form we use when using labels, isn’t <label> just like a <p> ?

2 Likes

It is not like P in the true sectioning aspect since it applies to only a single INPUT.

<label for="id">ID</label> <input id="id">

or,

<label>ID <input></label>

Note that when the label wraps the input it does not require a for attribute. INPUT is a child of the element. When the two elements are sibling elements, we need to specify which input field the label applies to.

17 Likes

Why do we include <h1> and <p> elements in <form> element?
If we have <label> that determines context of <input> element, than what is the goal of<h1> and <p> elements in<form></form> part of the page?
Is it a bad idea to write header and paragraph before (and more independently) <form></form> element?

3 Likes

Inside a form element, H1 and P are generally there to inform the user. They are not form controls, but signal the type of input expected.

LABEL is for individual form controls. They tell the user (and user agent) what that particular field is expected to contain. labels are not headings unless we view them in the specialized sense of the word.

7 Likes

I’m a little fuzzy on the verbiage here and hope someone can help me understand it a little better.

 <label for="username">Username</label>
        <input type="text" name="username" id="username">

What is the difference between ‘name’ and ‘id’ as it pertains to 1) the code and 2) the output?

And:

 <label for="meal">What do you want to eat?</label>
  <br>
  <input type="text" name="food" id="meal">

What is the relationship between ‘label for=‘meal’’ and ‘id=‘meal’’?

Thanks everyone for your help!

3 Likes

when submitting a form, the value of the name attribute is used,simple example:

https://jsbin.com/qavizakume/edit?html,js,output

see how i use username (value of name attribute) to retrieve the value from the form element?

for and id associate the label with the input element.

I think it’s starting to make sense. So in this example

<label for="name">Who Are You?</label>

The element designates the section of the code that will output, and so ‘name’ is arbitrary. It just makes deciphering the code easier to know what is being referenced?

<input type="text" name="name" id="name">

The element then calls out the type of input as ‘text’ as opposed to an integer or something else. And the ‘name’ and ‘id’ are simply references to the section of the code that designates this particular field. Is that correct? And if so, are the call outs for ‘name’ and ‘id’ redundant?

id and name have distinctly different purposes, so clearly they are not redundant.

Every form control that is intended to be transmitted to a server based handler on Submit will have a unique name. When the user clicks Submit, the form is parsed into key-value pairs in a special POSTDATA object. The name is the key, and control value is the value in this pair.

id is a page fragment identifier, and ties back to the label attribute, for. It has no role in the handling of the form data.

17 Likes

For those still wondering why we need both name and id attributes, it becomes clear in section 8.

5 Likes

this is not a reply it is a question: can the input tag have type,name,id and value attributes all together in one tag or some have to exists separately but in the same form tag. plus i dont know how to ask a question

Why should that not be possible? Each attribute serves a distinct purpose, so they can be used together on a single <input> element.

As long as we understand the exact purpose being served we can use which attributes we see a need for. Is the form being submitted to a form handler on the server? If yes, then it MUST have a name attribute and value attribute, as applies to the specific control. These are paired up in the POST DATA as &name=value. Does the input have a unique handler on the client side, then very likely an id attribute will help to facilitate this. Is the control one of the non-text type? Then a type attribute will be needed to describe it.

Rather than thinking in terms of what should be there think in terms of actual purpose and need. Don’t think in terms of rules, but intended use.

1 Like

In the 4th lesson of creating a form, the name and id attributes inside the input tag are the same. Does it make a difference whether they are different or the same?
Screen Shot 2020-02-23 at 4.39.15 PM

1 Like

often you want logic names for name and id, so often they are the same. You see many sites do this. You can have different names, but its not common to do so

1 Like

placeholder attribute can do the same work. So there’s no need of element.

Section 5: What function does the name vs. id vs. label have again (The ‘label for’ links to ‘id’, so what does ‘name’ do? Sorry for the trouble!!

isn’t that already covered in this topic? Here for example: