Diferencia entre atributos de identificación y nombre en HTML

718

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

oso Yogi
fuente
99
Hay muy buen hilo sobre este tema en stackoverflow.com/questions/7470268/html-input-name-vs-id
Richard Logwood

Respuestas:

626

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.

John Fisher
fuente
¿podría describir un poco más? Cuando lo envíe, solo hay un valor en la respuesta: el botón de radio que seleccionó.
NoviceToDotNet
aparte del botón de radio ¿hay algún uso? Creo que debería tener grandes diferencias además de eso ???
Prageeth godage
28
@Prageeth: La diferencia es que un "nombre" se transfiere del navegador al servidor y puede ser diferente al "id". Hay muchas razones por las cuales las personas pueden querer esa diferencia. Por ejemplo, su lenguaje / marco del lado del servidor puede necesitar los valores enviados para tener ciertos nombres, pero su javascript funciona mejor con algo completamente diferente en los identificadores.
John Fisher
29
Para decirlo de manera muy informal, ides con lo que trabaja su interfaz (CSS, JS), mientras que namees lo que su servidor recibe y luego puede procesar. Esto es básicamente lo que dice la respuesta de Greeso.
Saraph
2
Podría ser mejor decir: El atributo de nombre se requiere al enviar datos ... en lugar de: El atributo de nombre se usa al enviar datos ... ya que los datos de formulario que no tengan el atributo de nombre no se transmitirán (o de hecho no serán procesado en absoluto de acuerdo con la especificación HTML)
ebyrob
332

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.

Warren Young
fuente
2
Esto fue enormemente esclarecedor. Entonces, ¿podría inferir, entonces, que "nombre" es casi una representación del parámetro "identificador" enviado al servidor? Esta pregunta es parcialmente respondida por la respuesta aceptada, pero no se expresa en esos términos.
Thomas
55
@Thomas: No hay un vínculo necesario entre namey iden absoluto. El identificador identifica de forma exclusiva un elemento HTML en particular en la página. El nameatributo de un elemento de formulario HTML, por el contrario, no tiene que ser único, y a menudo no lo es, como con los botones de opción o las páginas con múltiples <form>elementos. Es tradicional usar la misma cadena para namey iddonde ambos se usan en un solo elemento HTML, pero nada te obliga a hacer esto.
Warren Young
Estoy implementando un área de texto personalizada que puede interpretar algunas marcas html, utilicé un div ContentEditable para lograr esto. Si le agrega un atributo 'nombre', ¿se comportará como tal?
yev
126

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 .

Mike Buckbee
fuente
27

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.

Roedy Green
fuente
2
Un poco confuso ... y pienso mal en algunos puntos. ¿No es esto: namees importante para las <input>etiquetas en un <form>envío ya que los parámetros se utilizan en el HTTP, y ides simplemente un identificador único
Don Cheadle
Además, este usuario (no registrado) está vinculando a su propia página (el enlace en su perfil dice mindprod.com/jgloss ). No sé si eso es un problema para SO, pero dado el fragmento bastante confuso, se siente inapropiado.
zb226
24

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)

Greeso
fuente
2
No del todo cierto: el atributo Nombre no tiene que ser único en un formulario, ya que puede vincular los botones de opción.
Paul
44
Además, puede sorprenderte, pero PHP no es el único lenguaje de servidor en el mundo.
Ve más
@seesharper - Eso es gracioso. ¡Incluso te voté! Bueno, sí, eso no me sorprende :)
Greeso
14

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

Extrakun
fuente
99
los botones de radio deben compartir el mismo nombre para comportarse correctamente; no es único por formulario.
nickf
Mi error. Aunque para aclarar, para entradas de texto, áreas de texto, etc., se usan etiquetas de nombre para identificarlas. No necesariamente único.
Extrakun
12

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

Shirgill Farhan
fuente
44
Otra razón para no acostumbrarse a hacer que el nombre coincida con la identificación: puede tener dos formularios en una página que deben enviar los mismos datos (por ejemplo, dos campos de búsqueda). En este caso, namedebería ser el mismo (al código del lado del servidor no le importa cuál se envió), pero iddebe ser diferente (porque debe ser único en toda la página).
IMSoP
10

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.

usuario1454923
fuente
¿Quiere decir "el nombre está en desuso para las etiquetas de enlace" en lugar de "el nombre está en desuso para los destinos de enlace"? De hecho, el objetivo del enlace puede ser un iframe. Si no especifica el atributo de nombre para ese iframe, el atributo de destino no funciona para el enlace. Ese comportamiento permanece para todos los navegadores y es compatible con HTML5.
platillo
Estoy aquí tratando de averiguar cómo hacer un enlace de anclaje , como en el marcador para donde vaya a cuando se tiene una dirección URL que termina en "#something". lo mejor que puedo decir, en html antes del 4, debe ser <a name="something">. En html 4, es <a name="something" id="something"> (coincidente), y en html 5, <a id="something">, aunque id puede ser un "atributo global" en cualquier cosa. Lo que no puedo entender es si el nombre además de la identificación se tolera en <a> en html 5. ok experimento con cualquier configuración que tenga ...
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
fuente
6

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.
Subodh Ghulaxe
fuente
He visto nameatributos utilizados en elementos de estilo. ¿Asumo que esto no es válido?
Synetech
5

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.

orbita
fuente
2

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.

Jon Bray
fuente
1

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

Kojugart
fuente
0

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">
Arroyo
fuente
0

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">
Waqas Ahmed
fuente
0

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.

Viyaan Jhiingade
fuente
0

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.

Juego peligroso
fuente
0

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.

addy
fuente