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

Navigation
15

When we create a tag in HTML we can assign values to its properties, however, the property id and name , I realize that are often used and usually 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 have the same value?

    
asked by anonymous 07.05.2016 / 17:51

2 answers

18

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

As a rule, id is used 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 [name="algo"] selector this is rare.

The name is mostly used for elements of <form> , that is for data insertion fields and is exactly the name that identifies the field in the server. When you send a form , its fields go to the server on an object whose keys are the name that these elements have.

There can 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 not be more than one element with the same id .

The MDN description says:

  

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

Common use related to CSS to apply styles to an element. It has to be unique.

  

Name - Name of the element. For example, use the server to identify the fields in form submits.

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

    
07.05.2016 / 17:58
8

You may notice that name is an attribute that exists only in incoming tags that are linked to forms. This name is used to nominate each content when submitting the form.

You may wonder if you could not use id for this. You can not because the purpose of id is to provide a unique identifier for each tag in the document. You can have the same name for different tags of a form, or even have the same name in different forms in the same document whose semantics are identical. %% Does not have to be unique and semantically serves another purpose.

Then in a name you will have distinct tags with the same name, after all it is the same controls, although they are several tags .

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

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

id could be used in other HTML elements, but in HTML this is no longer used.

    
07.05.2016 / 17:58
What are providers? What is the difference between OLE DB and ODBC? What is buffer overflow?