Diferença entre os atributos id e name em HTML

718

Qual é a diferença entre os atributos ide name? Ambos parecem servir ao mesmo propósito de fornecer um identificador.

Gostaria de saber (especificamente com relação aos formulários HTML) se o uso de ambos é necessário ou incentivado por qualquer motivo.

yogibear
fonte
9
Não é muito bom fio sobre este tema na stackoverflow.com/questions/7470268/html-input-name-vs-id
Richard Logwood

Respostas:

626

O nameatributo é usado ao enviar dados em um envio de formulário. Controles diferentes respondem de maneira diferente. Por exemplo, você pode ter vários botões de opção com idatributos diferentes , mas iguais name. Quando enviado, existe apenas um valor na resposta - o botão de opção que você selecionou.

É claro que há mais do que isso, mas definitivamente o fará pensar na direção certa.

John Fisher
fonte
você poderia descrever um pouquinho mais sobre isso .. Quando enviado, há apenas um valor na resposta - o botão de opção que você selecionou.
NoviceToDotNet 31/03
além do botão de opção, existe algum uso? Eu acho que deveria ter grandes diferenças além disso ???
Prageeth godage
28
@Prageeth: A diferença é que um "nome" é transferido do navegador para o servidor e pode ser diferente do "id". Há muitas razões pelas quais as pessoas podem querer essa diferença. Por exemplo, a linguagem / estrutura do servidor pode precisar dos valores enviados para ter determinados nomes, mas seu javascript funciona melhor com algo completamente diferente nos IDs.
John John Fisher
29
Para ser muito informal, idé com o que o seu front-end (CSS, JS) trabalha, enquanto o nameque o servidor recebe e pode processar. Isso é basicamente o que a resposta de Greeso diz.
Saraph
2
Talvez seja melhor dizer: O atributo name é necessário ao enviar dados ... em vez de: O atributo name é usado ao enviar dados ... uma vez que quaisquer dados de formulário ausentes do atributo name não serão transmitidos (ou de fato não serão processado de acordo com a especificação HTML)
ebyrob
332

Use nameatributos para controles de formulário (como <input>e <select>), pois esse é o identificador usado na chamada POSTou GETque acontece no envio do formulário.

Use idatributos sempre que precisar endereçar um elemento HTML específico com CSS, JavaScript ou um identificador de fragmento . Também é possível procurar elementos pelo nome, mas é mais simples e mais confiável procurá-los por ID.

Warren Young
fonte
2
Isso foi extremamente esclarecedor. Então, devo deduzir, então, que "nome" é quase uma representação do parâmetro "identificador" enviado ao servidor? Esta pergunta é parcialmente respondida pela resposta aceita, mas não é colocada nesses termos.
Thomas
5
@ Thomas: Não há vínculo necessário entre namee idnada. O identificador identifica exclusivamente um elemento HTML específico na página. O nameatributo de um elemento de formulário HTML, por outro lado, não precisa ser exclusivo, e geralmente não é, como botões de opção ou páginas com vários <form>elementos. É tradicional usar a mesma sequência para namee idonde ambos são usados ​​em um único elemento HTML, mas nada faz com que você faça isso.
21815 Warren Young
Estou implementando uma área de texto personalizada que pode interpretar alguma marcação html, usei uma div contentEditable para fazer isso. Se adicionar um atributo 'name' a ele, ele se comportará como tal?
yev
125

Aqui está um breve resumo:

  • idé usado para identificar o elemento HTML por meio do modelo de objeto de documento (via JavaScript ou estilizado com CSS). idé esperado que seja único dentro da página.

  • namecorresponde ao elemento do formulário e identifica o que é postado de volta no servidor .

Mike Buckbee
fonte
27

Consulte este http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

Qual é a diferença? A resposta curta é: use os dois e não se preocupe. Mas se você quiser entender essa bobagem, aqui está o mais magro:

id = é para o uso como um alvo assim: <some-element id="XXX"></some-element>para links como este: <a href="#XXX".

name = também é usado para rotular os campos da mensagem enviados para um servidor com um HTTP (HyperText Transfer Protocol) GET ou POST quando você pressiona enviar em um formulário.

id = rotula os campos para uso por JavaScript e Java DOM (Document Object Model). Os nomes em name = devem ser exclusivos em um formulário. Os nomes em id = devem ser exclusivos em todo o documento.

Às vezes, os nomes name = e id = diferem, porque o servidor espera o mesmo nome de vários formulários no mesmo documento ou de vários botões de opção no mesmo formulário do exemplo acima. O id = deve ser único; o nome = não deve ser.

O JavaScript precisava de nomes exclusivos, mas já havia muitos documentos sem nome = nomes únicos, portanto, o pessoal do W3 inventou a tag de identificação necessária para ser exclusiva. Infelizmente, navegadores mais antigos não entenderam. Então, você precisa dos dois esquemas de nomeação em seus formulários.

NOTA: o atributo "name" para algumas tags como <a>não é suportado no HTML5.

Roedy Green
fonte
2
Um pouco confuso ... e acho errado em alguns pontos. Não é esta: nameé importante para <input>tags em uma <form>submissão como os parâmetros são usados no HTTP, e idé apenas um identificador único
Don Cheadle
Além disso, esse usuário (não registrado) está vinculando a sua própria página (o link em seu perfil diz mindprod.com/jgloss ). Não sei se isso é um problema para o SO, mas, devido ao fragmento bastante confuso, parece inapropriado.
Zb226
23

A maneira como penso e uso é simples:

id é usado para CSS e JavaScript / jQuery (deve ser exclusivo em uma página)

name é usado para manipulação de formulários no PHP quando um formulário é enviado via HTML (deve ser único em um formulário - até certo ponto, veja o comentário de Paul abaixo)

Greeso
fonte
2
Não é inteiramente verdade - o atributo Name não precisa ser exclusivo em um formulário, pois pode vincular botões de opção.
Paul
4
Além disso, pode surpreendê-lo, mas o PHP não é a única linguagem de servidor no mundo.
ver mais nítida
@seesharper - Isso é engraçado. Eu até votei em você! Bem, sim, isso não me surpreende :)
Greeso 30/05
14

Tag de identificação - usada pelo CSS, define uma instância exclusiva de uma div, span ou outros elementos. Aparece no modelo DOM Javascript, permitindo que você os acesse com várias chamadas de função.

Crachá para campos - Isso é único por formulário - a menos que você esteja executando uma matriz que deseja passar para o processamento no PHP / servidor. Você pode acessá-lo via Javascript pelo nome, mas acho que ele não aparece como um nó no DOM ou podem ser aplicadas algumas restrições (você não pode usar .innerHTML, por exemplo, se bem me lembro).

Extrakun
fonte
9
os botões de opção devem compartilhar o mesmo nome para se comportar corretamente - não é exclusivo por formulário.
nickf
Meu erro. No entanto, para esclarecer, para entradas de texto, áreas de texto e etc., tags de nome são usadas para identificá-las. Não é necessário exclusivo.
Extrakun 9/09/09
12

Geralmente, supõe-se que o nome seja sempre substituído pelo id . Isso é verdade, até certo ponto, mas não para campos de formulário e nomes de quadros , na prática. Por exemplo, com elementos de formulário, o nameatributo é usado para determinar os pares nome-valor a serem enviados para um programa do lado do servidor e não deve ser eliminado. Browsers do not use id in that manner. Para garantir a segurança, você pode usar os atributos name e id nos elementos do formulário. Então, escreveríamos o seguinte:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

Para garantir a compatibilidade, é recomendável ter valores de atributo de nome e ID correspondentes quando ambos são definidos. No entanto, tenha cuidado - algumas tags, principalmente botões de opção, devem ter valores de nome não exclusivos, mas requerem valores de ID exclusivos. Mais uma vez, isso deve referir que id não é simplesmente um substituto para o nome; eles são diferentes em propósito. Além disso, não desconsidere a abordagem de estilo antigo; uma análise profunda das bibliotecas modernas mostra esse estilo de sintaxe usado para fins de desempenho e facilidade às vezes. Seu objetivo deve sempre ser a favor da compatibilidade.

Agora, na maioria dos elementos, o atributo name foi descontinuado em favor do atributo de identificação mais onipresente. No entanto, em alguns casos, particularmente formar campos ( <button>, <input>, <select>e <textarea>), as vidas nome do atributo no porque continua a ser necessário para definir o par nome-valor para o envio do formulário. Além disso, descobrimos que alguns elementos, principalmente quadros e links, podem continuar a usar o atributo name porque geralmente é útil para recuperar esses elementos pelo nome.

Há uma clara distinção entre id e nome. Muitas vezes, quando o nome continua, podemos definir os mesmos valores. No entanto, o id deve ser único e, em alguns casos, o nome não deve - pense nos botões de opção. Infelizmente, a exclusividade dos valores de ID, apesar de detectada pela validação de marcação, não é tão consistente quanto deveria. A implementação de CSS nos navegadores estilizará objetos que compartilham um valor de ID; portanto, não podemos detectar erros de marcação ou estilo que possam afetar nosso JavaScript até o tempo de execução.

Isso foi retirado do livro JavaScript- The Complete Reference by Thomas-Powell

Shirgill Farhan
fonte
4
Outro motivo para não adquirir o hábito de apenas fazer o nome da correspondência de identificação: você pode ter dois formulários em uma página que precisam enviar os mesmos dados (por exemplo, dois campos de pesquisa). Nesse caso, namedeve ser o mesmo (o código do servidor não se importa com o que foi enviado), mas iddeve ser diferente (porque deve ser exclusivo em toda a página).
#
10

namefoi descontinuado para destinos de link e inválido em HTML5. Ele não funciona mais pelo menos no Firefox mais recente (v13). Mude <a name="hello">para<a id="hello">

O alvo não precisa ser uma <a>tag, pode ser <p id="hello"> ou <h2 id="hello">etc., o que geralmente é um código mais limpo.

Como outros posts dizem claramente, nameainda é usado (necessário) em formulários. Também é usado ainda nas tags META.

user1454923
fonte
Você quer dizer "nome obsoleto para tags de link" em vez de "nome obsoleto para destinos de link"? Por uma questão de fato, o destino do link pode ser um iframe. Se você não especificar o atributo name para esse iframe, o atributo target não funcionará para o link. Esse comportamento permanece imóvel para todos os navegadores e é compatível com HTML5.
yucer
Estou aqui tentando descobrir como fazer um link âncora , como no marcador para onde você vá para quando você tem uma URL que termina em "#something". o melhor que posso dizer, em html antes das 4, deve ser <a name="algo">. No html 4, é <a name="algo" id="algo"> (correspondência) e no html 5, <a id="algo">, embora o id possa ser um "atributo global" em qualquer coisa. O que eu não consigo descobrir é se o nome além do id é tolerado em <a> no html 5. ok experimento com qualquer configuração que eu tenha ...
FutureNerd
9
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
Hongtao
fonte
6

name Vs id

nome

  • Nome do elemento Por exemplo, usado pelo servidor para identificar os campos nos envios de formulário.
  • Os elementos de suporte são <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • O nome não precisa ser exclusivo.

Eu iria

  • Geralmente usado com CSS para estilizar um elemento específico. O valor desse atributo deve ser exclusivo.
  • Id é atributos globais , eles podem ser usados ​​em todos os elementos, embora os atributos possam não ter efeito em alguns elementos.
  • Deve ser exclusivo em todo o documento.
  • O valor desse atributo não deve conter espaços em branco, ao contrário do atributo de classe, que permite valores separados por espaço.
  • Usando caracteres, exceto letras e dígitos ASCII, '_', '-' e '.' pode causar problemas de compatibilidade, pois não eram permitidos no HTML 4. Embora essa restrição tenha sido levantada no HTML 5, um ID deve começar com uma letra de compatibilidade.
Subodh Ghulaxe
fonte
Eu já vi nameatributos usados ​​em elementos de estilo. Presumo que isto é inválido?
Synetech
5

O ID de um elemento de entrada do formulário não tem nada a ver com os dados contidos no elemento. Os IDs são para conectar o elemento com JavaScript e CSS. O atributo name, no entanto, é usado na solicitação HTTP enviada pelo seu navegador para o servidor como um nome de variável associado aos dados contidos no atributo value.

Por exemplo:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

Quando o formulário é enviado, os dados do formulário serão incluídos no cabeçalho HTTP assim:

Se você adicionar um atributo de ID, ele não mudará nada no cabeçalho HTTP. Isso tornará mais fácil conectá-lo com CSS e JavaScript.

órbita
fonte
2

Se você não estiver usando o próprio método de envio do formulário para enviar informações a um servidor (em vez disso, usando javascript), use o atributo name para anexar informações extras a uma entrada - como emparelhá-lo com um valor de entrada oculto, mas parece mais organizado porque foi incorporado à entrada.

Atualmente, esse bit ainda funciona no Firefox, embora suponha que no futuro ele não seja permitido.

Você pode ter vários campos de entrada com o mesmo valor de nome, desde que não planeje enviar da maneira antiga.

Jon Bray
fonte
1

Com base em experiências pessoais e de acordo com a descrição das Escolas W3 para os atributos:

O ID é um Atributo Global e se aplica a praticamente todos os elementos em HTML. É usado para identificar exclusivamente elementos na página da Web e seu valor é acessado principalmente a partir do front-end (geralmente por meio de JavaScript ou jQuery).

name é um atributo que é útil para elementos específicos (como elementos de formulário etc.) em HTML. Seu valor é enviado principalmente para o back-end para processamento.

https://www.w3schools.com/tags/ref_attributes.asp

Kojugart
fonte
0

Abaixo está um uso interessante do atributo id. É usado na tag e usado para identificar o formulário para elementos fora dos limites, para que sejam incluídos com os outros campos do formulário.

 <form action="action_page.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">
Ribeiro
fonte
0

Id: 1) É usado para identificar o elemento HTML através do Modelo de Objeto do Documento (via Javascript ou denominado CSS). 2) O ID deve ser único na página.

O nome corresponde ao elemento do formulário e identifica o que é postado de volta no servidor. Exemplo:

<form action="action_page.php" id="Myform">
 First name: <input type="text" name="FirstName"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="LastName" form="Myform">
Waqas Ahmed
fonte
0

O ID é usado para identificar exclusivamente um elemento.

O nome é usado nos formulários. Embora você envie um formulário, se você não der nenhum nome, nada será enviado. Portanto, os elementos do formulário precisam de um nome para serem identificados por métodos de formulário como "obter ou enviar".

E os únicos com o atributo name serão apagados.

Viyaan Jhiingade
fonte
0

O iddará um elemento a id, então quando você escrever código real (como JavaScript) que você pode usar o ID para ler elementos. O nameé apenas um nome para que o usuário possa ver o nome do elemento, eu acho.

Exemplo:

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); //Reads the element that has the id "heading".
</script>
//You can also use something like this:
document.getElementById("heading").value; //Reads the value of the selected element.

Isso é útil? Deixe-me saber se há alguns problemas.

Dangerousgame
fonte
0

Não há diferença literal entre um ID e nome.

name é identificador e é usado na solicitação http enviada pelo navegador para o servidor como um nome de variável associado aos dados contidos no atributo value do elemento.

O ID, por outro lado, é um identificador exclusivo para navegador, lado do cliente e JavaScript. Portanto, o formulário precisa de um ID, enquanto seus elementos precisam de um nome.

id é usado mais especificamente na adição de atributos a elementos exclusivos. Nos métodos DOM, o Id é usado em Javascript para referenciar o elemento específico no qual você deseja que sua ação ocorra.

Por exemplo:

<html>
<body>

<h1 id="demo"></h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

O mesmo pode ser alcançado pelo atributo name, mas é preferível usar id no formulário e nome para elementos pequenos do formulário, como a tag de entrada ou a tag select.

addy
fonte