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.

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.

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.

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 .

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.

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)

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).

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

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.

<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>

Esse link tem respostas para a mesma pergunta básica, mas basicamente o id é usado para identificação de scripts e o nome é para o servidor.

http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html

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.

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.

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.

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

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">

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">

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.

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.

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.