El Atributo NAME

Se utiliza principalmente para identificar elementos y asociar datos en formularios y metadatos.

El atributo name en HTML se utiliza principalmente para identificar elementos y asociar datos en formularios y metadatos. Es especialmente útil en formularios para procesar datos y en elementos específicos para referencia interna.

Uso en Formularios

El caso más común es en elementos de formulario (<input>, <select>, <textarea>), donde name identifica el dato al enviar el formulario.

Ejemplo básico:

<form action="/procesar" method="POST">
  <label>Nombre de usuario:
    <input type="text" name="username">
  </label>
  
  <label>Contraseña:
    <input type="password" name="password">
  </label>
  
  <input type="submit" value="Enviar">
</form>

Resultado al enviar:

Los datos se envían como pares clave-valor usando el name como clave:

username=JuanPerez&password=12345

Metadatos con <meta>

En la etiqueta <meta>, name define el tipo de metadato para motores de búsqueda y navegadores.

Ejemplos comunes:

<head>
  <meta name="description" content="Descripción del sitio web">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Ana García">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Anclas (obsoleto en HTML5)

En versiones antiguas de HTML, se usaba para crear marcadores dentro de la página. En HTML5 se reemplaza por id.

Ejemplo antiguo:

<a name="seccion1"></a>
<h2>Sección 1</h2>

Ejemplo moderno (HTML5):

<h2 id="seccion1">Sección 1</h2>

Diferencias clave: name vs id

Característica name id
Propósito Identificar datos en formularios Identificar elementos únicos
Repetición Puede repetirse (ej: radio buttons) Debe ser único
Uso en URL Sí (en parámetros GET) No (excepto en anclas con #)
Acceso desde JS document.getElementsByName() document.getElementById()

Casos especiales

Radio Buttons (mismo name para grupo)

<label>
  <input type="radio" name="genero" value="hombre"> Hombre
</label>
<label>
  <input type="radio" name="genero" value="mujer"> Mujer
</label>

Campos de arreglo (para backend)

<input type="text" name="intereses[]">
<input type="text" name="intereses[]">

(En PHP/Ruby/Python se reciben como lista/array)

Mejores prácticas

  • Usar nombres descriptivos: name="email" en lugar de name="campo1"

  • Minúsculas y guiones bajos: name="fecha_nacimiento"

Malas prácticas

  • Evitar espacios: name="nombreUsuario" en lugar de name="nombre usuario"

  • No usar caracteres especiales: Evitar ñ, ç, #, etc.

Errores comunes

<!-- Mala práctica: name duplicado en elementos no agrupados -->
<input type="text" name="dato">
<input type="text" name="dato">

<!-- Confundir name con id -->
<input type="text" id="username"> <!-- Para CSS/JS -->
<input type="text" name="username"> <!-- Para backend -->

Conclusión

El atributo name es esencial para:

  • Procesar datos de formularios

  • Definir metadatos del sitio

  • Agrupar elementos relacionados (radio buttons)

Recuerda que:

  • En HTML5, id reemplaza a name para anclas

  • Cada tecnología (PHP, Node.js, etc) accede a los valores usando name

¡Ahora estás listo para usar correctamente este atributo en tus proyectos!