Seleccionar una mascota en un juego web parece simple, pero detrás hay decisiones de HTML que marcan la diferencia entre una interfaz funcional y una frustrante. Aprenderás a usar la etiqueta input con su atributo type, agrupar opciones con name y vincular etiquetas con for e id para que tus jugadores elijan su mascota sin pelear con la pantalla.

Esta guía es para quienes están construyendo el juego de Mokepon en Platzi y quieren entender por qué los formularios HTML funcionan como funcionan, no solo copiarlos.

Qué mascotas vamos a integrar al juego

Antes de tocar código, conviene tener claro el catálogo de personajes que el jugador podrá elegir y que el enemigo seleccionará de forma aleatoria.

En la clase se presentan seis mascotas con sus elementos especiales [00:20]:

• Hipodoge: agua.
• Capipepo: tierra.
• Ratigueya: fuego.
• Langostelvis: agua y fuego.
• Tucapalma: agua y tierra.
• Pydos: tierra y fuego.

Por ahora trabajaremos con las tres primeras para enfocarnos en la mecánica del HTML, y más adelante sumaremos al resto.

Qué es la etiqueta input y para qué sirve

La etiqueta input permite que los usuarios escriban o seleccionen información dentro de tu página. A diferencia de otras etiquetas, se cierra sola, igual que meta charset. Puedes dejarla así o cerrarla manualmente; es opcional, pero ayuda a leer mejor tu código.

¿Qué es un input en HTML? Es una etiqueta que recibe datos del usuario, como texto, números, fechas o selecciones. No la escribe el programador para mostrar contenido, sino para que el jugador interactúe con la página.

Cómo cambia el comportamiento según el atributo type

El atributo type define qué clase de dato acepta el input. Cada tipo cambia la experiencia visual y la validación que hace el navegador [03:30]:

• text: acepta cualquier texto, es el valor por defecto.
• number: solo permite números (y la letra e, que representa notación científica para números muy grandes).
• time: muestra un reloj para elegir hora.
• date: muestra un calendario.
• checkbox: cuadro que se marca y desmarca, ideal para términos y condiciones.
• radio: círculo que, una vez seleccionado, no se puede deseleccionar al hacer clic de nuevo.

Para elegir una mascota necesitamos que el jugador marque una sola opción a la vez, así que el tipo radio es el indicado.

Cómo agrupar varios inputs de tipo radio con el atributo name

Si pegas tres inputs de tipo radio sin más, el navegador te deja seleccionar los tres a la vez. Eso rompe la lógica de "elige una mascota". El truco está en agruparlos con el atributo name [07:45].

html <input type="radio" name="mascota" id="hipodoge" /> <input type="radio" name="mascota" id="capipepo" /> <input type="radio" name="mascota" id="ratigueya" />

Al compartir el mismo name, HTML entiende que pertenecen al mismo grupo y solo permite una selección activa. Si copias un cuarto input con un name diferente, por ejemplo ataque, ese vivirá en su propio grupo sin afectar al primero.

¿Por qué los radio buttons necesitan un name compartido? Porque HTML usa el name para identificar a qué grupo pertenece cada opción. Sin un grupo definido, no puede saber cuál input debe deseleccionar cuando eliges otro.

Cómo vincular un label con su input usando for e id

Un círculo de radio es muy pequeño, sobre todo en pantallas táctiles. Para que el jugador pueda hacer clic sobre el nombre de la mascota y se marque la opción, necesitas dos piezas: la etiqueta label y la conexión correcta entre for e id.

Cómo se escribe la etiqueta label

A diferencia de input, la etiqueta label sí se abre y se cierra, porque dentro va el texto que verá el usuario. Para nuestro caso, el nombre de la mascota.

html <label for="hipodoge">Hipodoge</label> <input type="radio" name="mascota" id="hipodoge" />

El atributo for del label debe coincidir exactamente con el id del input. Esa coincidencia es la que hace que al hacer clic sobre el texto se active el círculo correspondiente [13:50].

Por qué cada nombre se repite tres veces

Puede parecer redundante escribir Hipodoge en tres lugares, pero cada aparición cumple una función distinta:

• En el id del input: identifica esa opción dentro del grupo.
• En el for del label: vincula el texto clickeable con el input correcto.
• En el contenido del label: es lo que el usuario ve en pantalla.

Sin esa repetición, el navegador no puede unir las piezas ni el jugador entiende qué está eligiendo.

Cómo queda el selector de mascotas

Con los tres inputs agrupados y sus labels vinculados, el jugador ya puede hacer clic sobre el nombre de Hipodoge, Capipepo o Ratigueya y ver cómo se marca la opción. El botón de seleccionar todavía no hace nada, y eso es intencional: la lógica para capturar la elección llega con JavaScript en la siguiente clase.

Si llegaste hasta aquí construyendo tu propio Mokepon, cuéntame en los comentarios qué significa la e que aparece en los inputs de tipo number cuando escribes números muy grandes.