What is the purpose of the "id" and "name" properties of an HTML tag?

Asked

Viewed 2,414 times

17

When we create a tag in HTML we can assign values to its properties, however, the property id and name, I realize that they are widely used and generally the values that are assigned to them are the same, see the example below: 

<!DOCTYPE HTML>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo para ilustração.</title>
  </head>
  <body>
    <p size=2>O <spam style="font-weight:bolder;">input text</spam> esta com as propriedades id e name definidas com o mesmo valor<br> que é "nome".</p>        
    <label for="nome">Nome:</label><br>
    <input type="text" name="nome" id="nome" size=25 />
  </body>
 </html>

What is the purpose of these two properties id and name and if there is any difference in relation to each other, since both hold the same value?

html characteristic-language

  • If you have any suggestions for improvement please leave a comment. This is not the first time this is happening with my questions.

  • 1

    Related: What is the need to maintain an attribute name on a tag HTML?

  • But I think this one only partially answers the question.

2 answers

23


In a way both serve to identify the element. In general it can be said that the id is important for the browser, DOM manipulation and CSS; and name is important for the server.

As a rule, the id to identify the element in the DOM and apply CSS rules with the operator #. Although it is possible to use CSS in the element with a selector [name="algo"] that is rare.

The name is mainly used for elements of <form>, that is to input fields and is exactly the name which identifies the field on the server. When sending a form, fields go to the server on an object whose keys are the name that these elements have.

There may be more than one element with the same name, for example:

Opção 1<input value="1" type="radio" name="algo">
Opção 2<input value="2" type="radio" name="algo">
Opção 3<input value="3" type="radio" name="algo">

but there can be no more than one element with the same id.

To description of the MDN says so:

ID - Often used with CSS to style a specific element. The value of this attribute must be Unique.

Common CSS-related use to apply styles to an element. Must be unique.

Name - Name of the element. For example used by the server to identify the Fields in form submits.

Element name. For example used by the server to identify the submitted fields

8

The name serves to name each content when submitting the form.

One might wonder if I could take advantage of the id for this. It cannot because the purpose of the id is to provide a unique identifier for each tag in the document. You can have the same name for tags different from a form, or even having the same name in different forms in the same document whose semantics are identical. The name does not need to be unique and semantically serves another purpose.

Then in a radio you will have tags with the same name, after all it is the same controls, despite being several tags.

Another situation: think that there are two different forms that have different behaviors but the data are the same. Let’s say that one element asks for a city and another as well. What name do you give them both? Probably cidade, After all, it’s the same thing. The application that will receive the information on the server expects to receive the data with this name, no matter which form was sent. O id of each of the tags are completely different.

The id is a document programming control that can be used to style with CSS or manipulate/access individually with JS, or even used as a URL anchor. The name is used to indicate which control that data comes from. I’ve seen codes using the name as if it were a id. It even works, but it’s conceptually wrong.

name could be used in other HTML elements, but in HTML this is not used anymore, being only for forms.

Browser other questions tagged html characteristic-language

You are not signed in. Login or sign up in order to post.