html - formulario - id in form

Entrada HTML-nombre vs. ID

Question

Cuando se utiliza la etiqueta <input> HTML, ¿cuál es la diferencia entre el uso de los atributos name y id especialmente si descubrí que a veces se denominan igual?

Answer 1

Las identificaciones deben ser únicas

... dentro del árbol de elementos DOM de la página para que cada control sea accesible individualmente por su id en el lado del cliente (dentro de la página del navegador) por

• Javascript scripts cargados en la página
• Estilos CSS definidos en la página.

Tener ID no únicos en tu página seguirá generando tu página, pero ciertamente no será válido. Los navegadores son bastante tolerantes al analizar HTML no válido. Pero no hagas eso solo porque parece que funciona.

Los nombres son a menudo únicos pero pueden ser compartidos

... dentro de la página DOM entre varios controles del mismo tipo (piense en los botones de opción), de modo que cuando los datos se envían al servidor, solo se envía un valor particular. Por lo tanto, cuando tiene varios botones de opción en su página, solo el value la persona seleccionada vuelve a publicarse en el servidor, aunque existen varios controles de botón de opción relacionados con el mismo name .

Anexo al envío de datos al servidor : cuando los datos se envían al servidor (generalmente mediante una solicitud HTTP POST), todos los datos se envían como pares nombre-valor, donde nombre es el name del control de entrada HTML y valor es su value como ingresado / seleccionado por el usuario. Esto siempre es cierto para las solicitudes que no son Ajax. En las solicitudes de Ajax, los pares de nombre-valor pueden ser independientes de los controles de entrada HTML en la página, porque los desarrolladores pueden enviar lo que quieran al servidor. Muy a menudo los valores también se leen desde los controles de entrada, pero solo estoy tratando de decir que esto no es necesariamente el caso.

Cuando los nombres pueden ser duplicados

A veces puede ser beneficioso que los nombres se compartan entre los controles de cualquier tipo de entrada de formulario. ¿Pero cuando? No indicó cuál podría ser su plataforma de servidor, pero si usó algo como Asp.net MVC, obtendrá el beneficio de la validación automática de datos (cliente y servidor) y también vinculará los datos enviados a tipos seguros. Eso significa que esos nombres tienen que coincidir con los nombres de las propiedades de tipo.

Ahora supongamos que tiene este escenario:

• Tienes una vista con una lista de elementos del mismo tipo.
• el usuario generalmente trabaja con un elemento a la vez, por lo que solo ingresarán datos con un solo elemento y lo enviarán al servidor

Por lo tanto, el modelo de su vista (ya que muestra una lista) es del tipo IEnumerable<SomeType> pero su servidor solo acepta un elemento único del tipo SomeType .

¿Qué hay de compartir nombres entonces?

Cada elemento se envuelve dentro de su propio elemento FORM y los elementos de entrada tienen los mismos nombres, de modo que cuando los datos llegan al servidor (desde cualquier elemento) se vinculan correctamente al tipo de cadena que espera la acción del controlador.

Este escenario particular se puede ver en mi mini-sitio de Historias creativas . No entenderás el idioma, pero puedes revisar esos múltiples formularios y nombres compartidos. No importa que las ID también estén duplicadas (lo cual es una violación de la regla) pero eso podría resolverse. Simplemente no importa en este caso.

Answer 2

Agregando algunas referencias reales a los documentos de W3 que explican con autoridad la función del atributo ''nombre'' en los elementos del formulario. (Para lo que vale la pena, llegué aquí mientras exploraba exactamente cómo funciona Stripe.js para implementar una interacción segura con Stripe de la pasarela de pago. En particular, ¿qué hace que un elemento de entrada de formulario se envíe de nuevo al servidor o impida que se envíe? )

Los siguientes documentos de W3 son relevantes:

HTML 4: https://www.w3.org/TR/html401/interact/forms.html#control-name Sección 17.2 Controles

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission-0 y https://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set Sección 4.10.22.4 Construyendo el conjunto de datos de formulario.

Como se explica en el presente documento, el navegador enviará un elemento de entrada solo si tiene un atributo de "nombre" válido.

Como han señalado otros, el atributo ''id'' identifica de forma única los elementos DOM, pero no está involucrado en el envío normal de formularios. (Aunque, por supuesto, el javascript puede usar ''id'' u otros atributos para obtener valores de formulario, que javascript podría usar para los envíos AJAX, etc.)

Una rareza con respecto a respuestas / comentaristas anteriores se refiere a los valores de id y los valores de nombre que están en el mismo espacio de nombres. Por lo que puedo decir de las especificaciones, esto se aplica a algunos usos obsoletos del atributo de nombre (no en los elementos del formulario). Por ejemplo, https://www.w3.org/TR/html5/obsolete.html :

"Los autores no deben especificar el atributo de nombre en un elemento. Si el atributo está presente, su valor no debe ser la cadena vacía y tampoco debe ser igual al valor de cualquiera de las ID en el subárbol de origen del elemento que no sea la propia ID del elemento , si corresponde, ni debe ser igual al valor de cualquiera de los otros atributos de nombre en un elemento en el subárbol local del elemento. Si este atributo está presente y el elemento tiene una ID, entonces el valor del atributo debe ser igual a la ID del elemento. En versiones anteriores del lenguaje, este atributo se diseñó como una forma de especificar posibles destinos para identificadores de fragmentos en las URL. En su lugar, se debe usar el atributo id ".

Claramente, en este caso especial, hay una cierta superposición entre los valores de identificación y nombre para las etiquetas ''a''. Pero esto parece ser una peculiaridad del procesamiento de identificadores de fragmentos, no debido al intercambio general de espacio de nombres de identificadores y nombres.

Answer 3

El ID de un elemento de entrada de formulario no tiene nada que ver con los datos contenidos dentro del elemento. Los identificadores son para enlazar 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íe el formulario, los datos del formulario se incluirán en el encabezado HTTP de esta manera:

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

Por lo tanto, use los atributos de identificación siempre que necesite abordar un elemento HTML particular con CSS, JavaScript o un identificador de fragmento. También es posible buscar elementos por nombre, pero es más simple y más confiable buscarlos por ID.

Answer 4

El atributo de name en una entrada es usado por sus <form> HTML primarios para incluir ese elemento como miembro del formulario HTTP en una solicitud POST o la cadena de consulta en una solicitud GET .

El id debe ser único, ya que JavaScript lo debe usar para seleccionar el elemento en el DOM para su manipulación y utilizarlo en los selectores de CSS.

Answer 5

El nombre define cuál será el nombre del atributo tan pronto como se envíe el formulario. Entonces, si desea leer este atributo más adelante, lo encontrará debajo del "nombre" en la Solicitud POST o GET.

Mientras que la identificación se usa para dirigir un campo o elemento en javascript o css.

Answer 6

En HTML4.01:

Nombre del atributo

• Válido solo en <a> , <form> , <iframe> , <img> , <map> , <input> , <select> , <textarea>
• El nombre no tiene que ser único, y se puede usar para agrupar elementos, como botones de opción y casillas de verificación
• No se puede hacer referencia en la URL, aunque como JavaScript y PHP pueden ver la URL, existen soluciones alternativas.
• Se hace referencia en JS con getElementsByName()
• Comparte el mismo espacio de nombres que el atributo id
• Debe comenzar con una letra
• Según las especificaciones, distingue entre mayúsculas y minúsculas, pero la mayoría de los navegadores modernos no parecen seguir esto
• Utilizado en los elementos del formulario para enviar información. Solo las etiquetas de entrada con un atributo de name se envían al servidor

Atributo de Id

• Válido en cualquier elemento excepto <base> , <html> , <head> , <meta> , <param> , <script> , <style> , <title>
• Cada Id debe ser único en la página tal como se presenta en el navegador, que puede o no estar todo en el mismo archivo
• Se puede utilizar como referencia de anclaje en URL
• Se hace referencia en CSS o URL con # signo #
• Se hace referencia en JS con getElementById() y jQuery por $(#<id>)
• Comparte el mismo espacio de nombre que el atributo de nombre
• Debe contener al menos un carácter
• Debe comenzar con una letra
• No debe contener nada más que letras, números, guiones bajos ( _ ), guiones ( - ), dos puntos (:) o puntos ( . )
• Es insensible a mayúsculas

En (X) HTML5, todo es igual, excepto:

Nombre del atributo

• Ya no es válido en <form>
• XHTML dice que debe estar todo en minúsculas, pero la mayoría de los navegadores no siguen eso

Atributo de Id

• Válido en cualquier elemento.
• XHTML dice que debe estar todo en minúsculas, pero la mayoría de los navegadores no siguen eso

Esta pregunta se escribió cuando HTML4.01 era la norma, y ​​muchos navegadores y características eran diferentes a los de hoy.

Answer 7

Espero que pueda encontrar útil el siguiente ejemplo breve:

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById(''male'').checked) {
         alert("Selected gender: "+document.getElementById(''male'').value)
      }else if(document.getElementById(''female'').checked) {
         alert("Selected gender: "+document.getElementById(''female'').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

En el código, tenga en cuenta que ambos atributos de ''nombre'' son los mismos para definir la opcionalidad entre ''masculino'' o ''femenino'', pero los ''id'' no son iguales para diferenciarlos.

Answer 8

La identificación se utiliza para identificar de forma única un elemento en JavaScript o CSS.

El nombre se utiliza en la forma de envío. Cuando envíe un formulario, solo se enviarán los campos con un nombre.

Answer 9

Si está utilizando javascript / css, entonces debe usar el ''id'' de control para aplicar cualquier cosa de CSS / javascript en él.

Si usa el nombre CSS no funcionará para ese control. Como ejemplo, si usa un calendario de Javascript adjunto a un cuadro de texto, debe usar la identificación de control de texto para asignarle el calendario de javascript.

Answer 10

Un caso interesante de usar el mismo nombre: elementos de input de tipo checkbox como este:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

Al menos si la respuesta es procesada por PHP, si marca ambas casillas, sus datos POST mostrarán:

$myfruit[0] == ''apple'' && $myfruit[1] == ''orange''

No sé si ese tipo de construcción de matriz sucedería con otros lenguajes del lado del servidor, o si el valor del atributo de name solo se trata como una cadena de caracteres, y es una casualidad de la sintaxis de PHP que una matriz basada en 0 se construye en función del orden de los datos en la respuesta POST, que es simplemente:

myfruit[]       apple
myfruit[]       orange

No puedo hacer ese tipo de truco con ids. Un par de respuestas en ¿Cuáles son los valores válidos para el atributo id en HTML? parecen citar la especificación para HTML 4 (aunque no dan una cita):

Los tokens de ID y NOMBRE deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_") , dos puntos (":") y puntos (".").

Por lo tanto, los caracteres [ y ] no son válidos ni en los identificadores ni en los nombres en HTML4 (estarían bien en HTML5). Pero como sucede con muchas cosas html, solo porque no sea válido no significa que no funcionará o no es extremadamente útil.

Answer 11

el atributo de nombre se utiliza para publicar, por ejemplo, un servidor web. La identificación se utiliza principalmente para css (y javascript). Supongamos que tiene esta configuración:

<input id="message_id" name="message_name" type="text" />

para obtener el valor con PHP al publicar su formulario, usará el atributo de nombre, como este:

$_POST["message_name"];

La identificación se usa para el estilo, como se dijo antes, para cuando se usa un css específico.

#message_id
{
    background-color: #cccccc;
}

Por supuesto, puede usar la misma denominación para su ID y nombre-atributo. Estos dos no interferirán entre sí.

también, el nombre se puede usar para más elementos, como cuando está usando botones de radio. El nombre se usa para agrupar sus botones de radio, por lo que solo puede seleccionar una de esas opciones.

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

Y en este caso muy específico, puedo decir además cómo se usa la identificación, porque probablemente querrá una etiqueta con su botón de radio. La etiqueta tiene un atributo for, que utiliza la identificación de su entrada para vincular esta etiqueta a su entrada (cuando hace clic en la etiqueta, el botón está marcado). El ejemplo se puede encontrar a continuación

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>

Y supongo que eso es todo.

Answer 12

name es el nombre que se usa cuando se pasa el valor (en la url o en los datos publicados). id se utiliza para identificar de forma única el elemento para el estilo CSS y JavaScript.

La id se puede utilizar como un ancla. En los viejos tiempos, <a name se usaba <a name para eso, pero también debería usar la id para los anclajes. name es solo para publicar los datos del formulario.

Answer 13

El nombre se utiliza para el envío de formularios en DOM (Modelo de objetos de documento).

ID se usa para el nombre exclusivo de los controles html en DOM, especialmente para Javascript y CSS

Answer 14

• name identifica campos de formulario *; para que puedan ser compartidos por controles que representan múltiples valores posibles para un campo de este tipo (botones de opción, casillas de verificación). Se enviarán como claves para los valores del formulario.
• id identifica los elementos DOM ; Para que puedan ser apuntados por CSS o Javascript.

* los nombres también se usan para identificar anclajes locales, pero esto está en desuso y la ''id'' es una forma preferida de hacerlo hoy en día.