Entrada HTML: nombre versus identificación [duplicado]
Cuando uso la etiqueta HTML <input>
, ¿cuál es la diferencia entre el uso de los atributos name
y id
, especialmente porque descubrí que a veces tienen el mismo nombre?
En HTML4.01:
Atributo de nombre
- Válido sólo en
<a>
,<form>
, ,<iframe>
,<img>
,<map>
,<input>
,<select>
<textarea>
- El nombre no tiene que ser único y se puede utilizar 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
- Se hace referencia en JavaScript con
getElementsByName()
- Comparte el mismo espacio de nombres que el
id
atributo. - 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.
- Se utiliza en elementos de formulario para enviar información. Sólo las etiquetas de entrada con un
name
atributo se envían al servidor
Atributo de identificación
- 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 muestra 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 JavaScript 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 (.
). - No distingue entre mayúsculas y minúsculas
En (X)HTML5, todo es igual, excepto:
Atributo de nombre
<form>
Ya no es válido- XHTML dice que debe estar todo en minúsculas, pero la mayoría de los navegadores no lo siguen.
Atributo de identificación
- Válido en cualquier elemento
- XHTML dice que debe estar todo en minúsculas, pero la mayoría de los navegadores no lo siguen.
Esta pregunta se escribió cuando HTML4.01 era la norma y muchos navegadores y funciones eran diferentes a los actuales.
El atributo de nombre se utiliza para publicar, por ejemplo, en un servidor web. La identificación se usa 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, utilizará el atributo de nombre , como este:
$_POST["message_name"];
La identificación se usa para diseñar, como se dijo antes, cuando desea usar contenido CSS específico.
#message_id
{
background-color: #cccccc;
}
Por supuesto, puede utilizar la misma denominación para su atributo de identificación y nombre . Estos dos no interferirán entre sí.
Además, el nombre se puede utilizar para más elementos, como cuando se utilizan botones de opción. Luego, el nombre se usa para agrupar los botones de opción, de modo que solo pueda 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 tan específico, puedo decir además cómo se usa la identificación , porque probablemente querrás una etiqueta con tu botón de opción. 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). Un 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>