What's the difference between the name and id attributes?

What is the difference between name= and id= in the input tag? Are they different sometimes?

2 Likes

I tried it out, it seems that the input element can include both the name and the id attributes. Can anyone please tell me why this happens? Shouldn’t the name attribute be enough to give the input element a unique identity?

1 Like

Yes, in terms of POST DATA, the name attribute is the unique identifier of the submitted value. id is the unique identifier of the DOM element. An id selector has higher specificity, more so than a name attribute selector. There can only be one element by a given id in a web page, but there can be multiple forms with their own Submit, and their name attributes could be the same.

21 Likes

So here’s the thing. I’m learning forms now and I’m learning about input. What I know so far is this:
<input type=“text” name="…“value=”…">

Now I don’t understand what name and value means. I’m quite confused with it. So I understand that the name is for the form so for example if you write name=“username” then when you fill out a form and write in this box with the name as username, it sends out data as the username? But I am not sure if that is correct?? More so, then I can write whatever I want in the name attribute or are there some predefined values that I need to know?

And now the value attribute. It says you can leave it empty or you can have it pre-filled. I understand the purpose of the pre-filled. But if not, then why do I need to write it if it is empty?

I also know that the name and value attribues go hand in hand. So you need both for it to work since it basically means send “…” to “/example.html”. But that is also confusing

I’m just quite confused with this aspect and I want to continue learning but I feel that if I skip it, I won’t understand much soon. It sounds easy and I know it is but there is something I’m missing that I can’t put together

4 Likes

Correct, and the data itself will be whatever occupies the value attribute (what the user typed into the input field).

?username=value

It’s optional. We don’t need to include it in the tag since the browser will create it as soon as the user begins typing. Still, practice makes perfect and an empty value attribute is not hurting anything.

We only need a name attribute if the submit input is type="submit". The form may well be handled in the page itself and the data composed some other way (JSON) for sending by our program, or the data may not be sent at all, just used in the page directly (DOM insert). In those instances it is common to use id instead of name. That way it can be hooked by our script.

3 Likes

I am in the page with you, in order words, confused but I believe that all will come together soon as one moves forward. Very interesting lesson though.

2 Likes

All things being equal, I am yet to know what the element


is doing on top of element , plus it doesn’t have a closing tag anywhere in the html.

…element hr on top of element form…

… and also, the id will be useful when you do CSS

2 Likes

So the input has a specified type of value and a name, is this a variable?
if it is, is it used to manipulate data on the back-end? @mtf

Yes, The name it comes up with is the name of the variable on the back end.

I’m not sure ‘mainipulate’ is the term I would use, but one supposes, by the same token.

1 Like

Recall that variables arrive at the server in the form of query strings (GET) or in a message with header and data (POST). Our forms give the names that appear describing those strings.

?name=name&password=password

in a loose form of reference. Our form would have submitted two named control outputs, namely, ‘name’ and, ‘password’. Those names are passed along in the network transmission. The server gets them and assigns them internal variables as suffice. The OS on that side can then discern them.


Recall that ? is part of a request. The server is obligated to respond in kind, mind it is on us to give it that response. Once a query string is in play it is OUR software that handles it. This is not on the server. It is doing its job by handing this request detail off to us. That’s the beauty.


We have a static page/template that is the default response when there is no query string in the request; then, we have inbuilt code to handle queries. This will obviously have an effect on the response document as the templates will dictate. The nice thing is we can respond with real data.

3 Likes

Stupid question but how can you do those lines?

I’m typing -------------------, and doesn’t look the same.

Sorry for the offtopic question.

@pa_u_los, it may be in the html. In the old days, we used “horizontal rule” to create the lines.

<hr></hr> Is what we used to create the line.


Let me test it here and we’ll see if it works.


UPDATE. It worked.

1 Like

Sorry I missed this question, @pa_u_los

The markdown on the forum for an horizontal rule is,

----

That’s four dashes on their own line.

2 Likes

I’m kind of new at this so my terminology might be iffy, but can you take the value response “important details” that is submitted in the example problem (learn html text input 3/14) and assign it a unique ID attribute in the transition phase to the new HTML link(?) for repeated entry into a document style text editor (word for example) or PDF document for easy styling on that end? I’m thinking of cloud based softwares for data entry into printed forms, like tax software etc. Does anyone have any idea what that process is like, or if it’s possible? Any examples would be a huge help!

@mtf, regarding the question name attribute vs id attribute, the name attribute is used when sending data in a form submission and the id attribute is used when selecting an element in the DOM (either to style it using CSS or to add functionality to it using JavaScript). It is possible to select an element using its name attribute but it is better to use its id attribute as it has a higher specificity.

The general rule of thumb is to use the lowest specificity that still works as expected. The name attribute can be selected with an attribute selector.

 input[name='name']

will select the input element with the name attribute name="name".

1 Like

So do you only use an id when there are multiple elements with the same name attribute but you only want to select a specific one? E.g. There are 3 <input> elements of type “radio” with a name of “radio”. You only want to select the third <input> element so you add an id to the third <input> element.

1 Like

There can be multiple elements with a name attribute, but there is likely only one with name="name" which is specific enough to meet our needs.

The best way to learn CSS is to work with the lowest specificity so you don’t have conflicts later on that are hard to solve. We can always beef up specificity if we need to, but if something is so strong it needs !important to override it that is a sign of poor design.

1 Like