Radio buttons para elegir mascota en HTML

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:53

Radio buttons para elegir mascota en HTML

Curso Gratis de Programación Básica 2022

Clase 17 de 84

Clase 17 / 84

Recursos

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.

David Antonio Morales Barrera

Hace 4 años

Buscando en tutoriales, encontré como insertar imagenes para que se vea mejor (dejo el codigo base debajo):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MOKEPON</title>
</head>
<body>

    <script>

        var img = document.createElement("img");
        img.src
    
        var div = document.getElementById("x");
        div.appendChild(img);
        //block.setAttribute("style", "text-align:center");
    
        </script>

    <h2> Mokepon! 🌱🔥💧 </h2>
    
    <section id="seleccionar-mokepon"></section>
        <h3>Elige a tu Mokemon:</h3>

        <p>
            <label for="ajolote">
                <input type="radio" name="mokepon" id="ajolote"/>
                <img src="img/ajolote_600x372.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="ajolote"/>
            Ajolote
            </label>
                     
                       
        

            <label for="topo">
                <input type="radio" name="mokepon" id="topo"/>
                <img src="img/topo_600x449.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="topo"/>
                Topo
            </label>
                  

            
            <label for="hormigadefuego">
                <input type="radio" name="mokepon" id="hormigadefuego"/>
                <img src="img/hormigafuego_600x336.jpg" alt="HTML5 Logo" title="fuego_mokepon01" width="124" height="100" id="hormigadefuego"/>
                Hormiga de fuego
            </label>

        <p>
            <label for="komodo">
                <input type="radio" name="mokepon" id="komodo"/>
                <img src="img/komodo_1238x878.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="komodo"/>
                Dragon de Komodo
            </label>
             
            
            <label for="tortuga">
                <input type="radio" name="mokepon" id="tortuga"/>
                <img src="img/tortuga_1239x697.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="tortuga"/>
                Tortuga
            </label>
              

            <label for="caballodemar">
                <input type="radio" name="mokepon" id="caballodemar"/>
                <img src="img/Caballitodemar_1557x888.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="caballodemar"/>
            Caballo de mar
            </label>
             
        </p> 


        <p>
            <button>Confirmar</button>
        </p>
    
    <section id="seleccionar-ataque">   
        <h3>Elige tu ataque:</h3>

        <p>Tienes <span>3</span> vidas</p>
        <p>El contrincante tiene <span>3</span> vidas</p>

        <p>
            <button>Tierra 🌱</button>
            <button>Fuego 🔥</button>
            <button>Agua 💧</button>
        </p>

    </section>

    <section id="mensajes"></section>
        <p>MENSAJE ATAQUE</p>

    <section id="reiniciar-terminar"></section>
        <button>Volver a jugar</button>
        <button>Terminar</button>
    
</body>
</html>

Bryan Andres Vera Garcia

Hace 4 años

Buena esa ahí, lo bueno de esto es que podemos agregarle un sin fin de cosas

Harry's Barahona

Hace 4 años

jajajaa muy buena idea, ya cuando tenga el conocimiento necesario hare algo asi como menciona Luis Hurtado... el poder de mi hermana y mama es enojarse por todo y el de mi sobrina y mio es reirnos por todo... XD

Comentarios (390)390 comentarios

Carlos Eduardo Carvajal Pérez

ALBERTO PÉREZ

Kevin Jacobo Valenzuela Tiznado

al mn

addd edada

luisa Garcia

Esmeralda Gutiérrez Ramírez

Maxi Somma

Teo Zavala

Edison Manrique

Juan Castro

Profesor

Nacho Daniel sanchez

Julian Sosa

Gustavo Arias

Elizabeth M

Diego Cumpa

Everardo Garza

Santiago Fernández Cabal

Juan Francisco

Juan Camilo Aristizabal Carvajal

Hace 3 años

Omar Santana

Silvano Cortes

Alexis Bacik

Griger Ratia

Nestor Rios Garcia

Alexander Reyes

Euge Oller

Daniel Mora

Eduardo Peña Ramos

Brandon Argel Verdeja Domínguez

Xiomara Alejandra Hernández Arzola

Edgar Contreras

Sebastian Calderon

Josue Quevedo Portas

Juana Barreto

sara arias aristizabal

Andres Cavedal

Heraldo López

Pilar

Marian Mancilla

Ariel Andrés Tapia

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero