¿Cuál es la diferencia entre los atributos idy name? Ambos parecen tener el mismo propósito de proporcionar un identificador.

Me gustaría saber (específicamente con respecto a los formularios HTML) si usar o no ambos es necesario o recomendable por alguna razón.

El nameatributo se usa cuando se envían datos en un envío de formulario. Los diferentes controles responden de manera diferente. Por ejemplo, puede tener varios botones de opción con diferentes idatributos, pero iguales name. Cuando se envía, solo hay un valor en la respuesta: el botón de radio que seleccionó.

Por supuesto, hay más que eso, pero definitivamente te hará pensar en la dirección correcta.

Use nameatributos para los controles de formulario (como <input>y <select>), ya que ese es el identificador utilizado en la llamada POSTo GETque ocurre al enviar el formulario.

Utilice los idatributos siempre que necesite abordar un elemento HTML en particular con CSS, JavaScript o un identificador de fragmento . También es posible buscar elementos por nombre, pero es más simple y confiable buscarlos por ID.

Aquí hay un breve resumen:

• idse utiliza para identificar el elemento HTML a través del Modelo de Objeto del Documento (a través de JavaScript o con estilo CSS) idse espera que sea único dentro de la página.

• namecorresponde al elemento del formulario e identifica lo que se publica de nuevo en el servidor .

Ver esto http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

¿Cual es la diferencia? La respuesta corta es, usa ambos y no te preocupes por eso. Pero si quieres entender esta tontería, aquí está el flaco:

id = es para uso como un objetivo de esta manera: <some-element id="XXX"></some-element>para los enlaces como este: <a href="#XXX".

name = también se usa para etiquetar los campos en el mensaje enviado a un servidor con un HTTP (HyperText Transfer Protocol) GET o POST cuando presiona enviar en un formulario.

id = etiqueta los campos para su uso por JavaScript y Java DOM (Modelo de objeto de documento). Los nombres en name = deben ser únicos dentro de un formulario. Los nombres en id = deben ser únicos en todo el documento.

A veces los nombres name = e id = serán diferentes, porque el servidor espera el mismo nombre de varios formularios en el mismo documento o varios botones de radio en el mismo formulario que en el ejemplo anterior. El id = debe ser único; el nombre = no debe ser.

JavaScript necesitaba nombres únicos, pero ya había demasiados documentos aquí sin nombre único = nombres, por lo que las personas de W3 inventaron la etiqueta de identificación que se requería para ser única. Lamentablemente, los navegadores más antiguos no lo entendieron. Por lo tanto, necesita ambos esquemas de nombres en sus formularios.

NOTA: el atributo "nombre" para algunas etiquetas como <a>no es compatible con HTML5.

La forma en que lo pienso y lo uso es simple:

id se usa para CSS y JavaScript / jQuery (tiene que ser único en una página)

El nombre se usa para el manejo de formularios en PHP cuando un formulario se envía a través de HTML (tiene que ser único en un formulario; hasta cierto punto, vea el comentario de Paul a continuación)

Etiqueta de identificación: utilizada por CSS, define una instancia única de un elemento div, span u otros elementos. Aparece dentro del modelo DOM de Javascript, lo que le permite acceder a ellos con varias llamadas a funciones.

Etiqueta de nombre para campos: esto es único por formulario , a menos que esté haciendo una matriz que desea pasar al procesamiento PHP / lado del servidor. Puede acceder a él a través de Javascript por su nombre, pero creo que no aparece como un nodo en el DOM o pueden aplicarse algunas restricciones (no puede usar .innerHTML, por ejemplo, si recuerdo correctamente).

En general, se supone que el nombre siempre es reemplazado por id . Esto es cierto, hasta cierto punto, pero no para campos de formulario y nombres de cuadros , prácticamente hablando. Por ejemplo, con elementos de formulario, el nameatributo se usa para determinar los pares de nombre-valor que se enviarán a un programa del lado del servidor y no debe eliminarse. Browsers do not use id in that manner. Para estar seguro, puede usar los atributos de nombre e identificación en los elementos del formulario. Entonces, escribiríamos lo siguiente:

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

Para garantizar la compatibilidad, es una buena idea tener valores de atributo de nombre e id coincidentes cuando ambos están definidos. Sin embargo, tenga cuidado: algunas etiquetas, en particular los botones de opción, deben tener valores de nombre no únicos, pero requieren valores de identificación únicos. Una vez más, esto debería hacer referencia a que id no es simplemente un reemplazo de nombre; Son diferentes en propósito. Además, no descarte el enfoque de estilo antiguo, una mirada profunda a las bibliotecas modernas muestra tal estilo de sintaxis utilizado a veces para fines de rendimiento y facilidad. Su objetivo siempre debe ser a favor de la compatibilidad.

Ahora en la mayoría de los elementos, el atributo de nombre ha quedado en desuso en favor del atributo de identificación más omnipresente. Sin embargo, en algunos casos, sobre todo los campos de formulario ( <button>, <input>, <select>, y <textarea>), la vida en nombre de atributo, ya que sigue siendo necesaria para establecer el par nombre-valor para el envío del formulario. Además, descubrimos que algunos elementos, especialmente los marcos y los enlaces, pueden seguir usando el atributo de nombre porque a menudo es útil para recuperar estos elementos por nombre.

Hay una clara distinción entre id y nombre. Muy a menudo, cuando el nombre continúa, podemos establecer los valores de la misma manera. Sin embargo, la identificación debe ser única, y el nombre en algunos casos no debería, piense en los botones de opción. Lamentablemente, la unicidad de los valores de identificación, aunque se detecta mediante la validación de marcado, no es tan consistente como debería ser. La implementación de CSS en los navegadores dará estilo a los objetos que comparten un valor de identificación; por lo tanto, es posible que no detectemos errores de marcado o de estilo que puedan afectar nuestro JavaScript hasta el tiempo de ejecución.

Esto está tomado del libro JavaScript- The Complete Reference by Thomas-Powell

nameestá en desuso para los destinos de enlace y no es válido en HTML5. Ya no funciona al menos en la última versión de Firefox (v13). Cambiar <a name="hello">a<a id="hello">

El objetivo no necesita ser una <a>etiqueta, puede ser <p id="hello"> o <h2 id="hello">etc., que a menudo es un código más limpio.

Como otras publicaciones dicen claramente, nametodavía se usa (se necesita) en los formularios. También se sigue utilizando en las etiquetas 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>

Este enlace tiene respuestas a la misma pregunta básica, pero básicamente, la identificación se usa para la identificación de secuencias de comandos y el nombre es para el lado del servidor.

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

name Vs id

nombre

• Nombre del elemento. Por ejemplo, utilizado por el servidor para identificar los campos en los envíos de formularios.
• Los elementos de apoyo son <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
• El nombre no tiene que ser único.

carné de identidad

• A menudo se usa con CSS para diseñar un elemento específico. El valor de este atributo debe ser único.
• Id es atributos globales , se pueden usar en todos los elementos, aunque los atributos pueden no tener efecto en algunos elementos.
• Debe ser único en todo el documento.
• El valor de este atributo no debe contener espacios en blanco, en contraste con el atributo de clase, que permite valores separados por espacios.
• Usando caracteres excepto letras y dígitos ASCII, '_', '-' y '.' puede causar problemas de compatibilidad, ya que no estaban permitidos en HTML 4. Aunque esta restricción se ha eliminado en HTML 5, una identificación debe comenzar con una letra para compatibilidad.

La identificación de un elemento de entrada de formulario no tiene nada que ver con los datos contenidos dentro del elemento. Las ID son para enganchar el elemento con JavaScript y CSS. Sin embargo, el atributo de nombre se usa en la solicitud HTTP enviada por su navegador al servidor como un nombre de variable asociado con los datos contenidos en el atributo de valor.

Por ejemplo:

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

Cuando se envía el formulario, los datos del formulario se incluirán en el encabezado HTTP de esta manera:

Si agrega un atributo de ID, no cambiará nada en el encabezado HTTP. Simplemente facilitará la conexión con CSS y JavaScript.

Si no está utilizando el propio método de envío del formulario para enviar información a un servidor (y en su lugar lo está haciendo usando JavaScript), puede usar el atributo de nombre para adjuntar información adicional a una entrada, en lugar de emparejarlo con un valor de entrada oculto, pero se ve más ordenado porque está incorporado en la entrada.

Este bit todavía funciona actualmente en Firefox, aunque supongo que en el futuro podría no ser permitido.

Puede tener múltiples campos de entrada con el mismo valor de nombre, siempre y cuando no esté planeando enviar la forma tradicional.

Basado en experiencias personales y según la descripción de W3 Schools para los atributos:

ID es un atributo global y se aplica a prácticamente todos los elementos en HTML. Se utiliza para identificar elementos de forma única en la página web, y su valor se accede principalmente desde la interfaz (generalmente a través de JavaScript o jQuery).

name es un atributo que es útil para elementos específicos (como elementos de formulario, etc.) en HTML. Su valor se envía principalmente al back-end para su procesamiento.

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

A continuación se muestra un uso interesante del atributo id. Se usa dentro de la etiqueta y se usa para identificar el formulario de elementos fuera de los límites para que se incluyan con los otros campos dentro del formulario.

 <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) Se utiliza para identificar el elemento HTML a través del Modelo de Objetos del Documento (a través de Javascript o diseñado con CSS). 2) Se espera que la identificación sea única dentro de la página.

El nombre corresponde al elemento del formulario e identifica lo que se publica en el servidor. Ejemplo:

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

ID se utiliza para identificar de forma exclusiva un elemento.

El nombre se usa en los formularios. Aunque envíe un formulario, si no proporciona ningún nombre, no se enviará nada. Por lo tanto, los elementos de formulario necesitan un nombre para identificarse mediante métodos de formulario como "get or push".

Y los que solo tengan atributo de nombre saldrán.

Esto idle dará una identificación a un elemento, por lo que una vez que escriba código real, (como JavaScript), puede usar la identificación para leer elementos. El namees sólo un nombre que el usuario pueda ver el nombre del elemento, supongo.

Ejemplo:

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

¿Es útil? Avísame si hay algunos problemas.

No hay una diferencia literal entre una identificación y un nombre.

name es identificador y se usa en la solicitud http enviada por el navegador al servidor como un nombre variable asociado con los datos contenidos en el atributo de valor del elemento.

La identificación, por otro lado, es un identificador único para el navegador, el lado del cliente y JavaScript. Por lo tanto, el formulario necesita una identificación, mientras que sus elementos necesitan un nombre.

id se usa más específicamente para agregar atributos a elementos únicos. En los métodos DOM, Id se usa en Javascript para hacer referencia al elemento específico en el que desea que su acción tenga lugar.

Por ejemplo:

<html>
<body>

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

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

Lo mismo se puede lograr con el atributo de nombre, pero se prefiere usar id en forma y nombre para elementos de formulario pequeños como la etiqueta de entrada o la etiqueta de selección.