Ejercicio práctico 9: Formularios con Casillas de Verificación

Aprende a crear desde cero un formulario HTML con casillas de verificación de tipo checkbox y su correcta implementación, además de campos ocultos y subida de archivos.

Actividad

Añade al formulario anterior casillas de verificación <input type="checkbox">.

Solución interactiva

Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Formulario con Casillas de Verificación</title>
  </head>
  <body>
    <h1>Formulario</h1>
    <form>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" />
      <br />
      <label for="email">Correo Electrónico:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="genero">Género:</label>
      <input type="radio" id="masculino" name="genero" value="masculino" />
      Masculino
      <input type="radio" id="femenino" name="genero" value="femenino" />
      Femenino
      <br />
      <label for="pais">País:</label>
      <select id="pais" name="pais">
        <option value="argentina">Argentina</option>
        <option value="brasil">Brasil</option>
        <option value="chile">Chile</option>
      </select>
      <br />
      <label>Intereses:</label>
      <input type="checkbox" id="musica" name="intereses" value="musica" />
      Música
      <input type="checkbox" id="deportes" name="intereses" value="deportes" />
      Deportes
      <input type="checkbox" id="lectura" name="intereses" value="lectura" />
      Lectura
      <br />
      <button type="submit">Enviar</button>
    </form>
  </body>
</html>

Variantes del mismo ejercicio

Variante 1: Checkboxes con `checked` y arrays de datos

Cuando marcás una opción por defecto con checked, el usuario ya la tiene preseleccionada. Para enviar múltiples checkboxes como array, usá name con corchetes.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Checkboxes con Checked</title>
  </head>
  <body>
    <h1>Suscripción a Newsletter</h1>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <br /><br />

      <p>Seleccioná los temas que te interesan:</p>
      <input type="checkbox" id="html" name="temas[]" value="html" checked />
      <label for="html">HTML</label><br />
      <input type="checkbox" id="css" name="temas[]" value="css" checked />
      <label for="css">CSS</label><br />
      <input type="checkbox" id="js" name="temas[]" value="javascript" />
      <label for="js">JavaScript</label><br />
      <input type="checkbox" id="python" name="temas[]" value="python" />
      <label for="python">Python</label><br />
      <br />

      <button type="submit">Suscribirme</button>
    </form>
  </body>
</html>

El name="temas[]" envía los valores seleccionados como array al backend. checked preselecciona HTML y CSS.

Variante 2: Campo oculto con `<input type="hidden">`

Los campos hidden envían datos al servidor sin mostrarse al usuario. Son útiles para IDs, tokens o metadatos.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Formulario con Campo Oculto</title>
  </head>
  <body>
    <h1>Editar Perfil</h1>
    <form action="/actualizar-perfil" method="POST">
      <!-- Campo oculto con el ID del usuario -->
      <input type="hidden" name="usuario_id" value="12345" />
      <!-- Token de seguridad anti-CSRF -->
      <input type="hidden" name="csrf_token" value="aB3xZ9..." />

      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" value="Carlos López" />
      <br /><br />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" value="carlos@email.com" />
      <br /><br />

      <button type="submit">Guardar Cambios</button>
    </form>
  </body>
</html>

Los campos hidden no se ven en la página pero viajan en el formulario. El servidor los usa para identificar al usuario y validar la petición.

Variante 3: Subida de archivos con `<input type="file">`

Para formularios que permiten adjuntar archivos, usá type="file" y enctype="multipart/form-data".

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Subida de Archivos</title>
  </head>
  <body>
    <h1>Postulate al Puesto</h1>
    <form action="/postulaciones" method="POST" enctype="multipart/form-data">
      <label for="nombre">Nombre completo:</label>
      <input type="text" id="nombre" name="nombre" required />
      <br /><br />

      <label for="cv">Currículum (PDF):</label>
      <input
        type="file"
        id="cv"
        name="cv"
        accept=".pdf,.doc,.docx"
        required
      />
      <br /><br />

      <label for="foto">Foto de perfil:</label>
      <input
        type="file"
        id="foto"
        name="foto"
        accept="image/*"
      />
      <br /><br />

      <button type="submit">Enviar Postulación</button>
    </form>
  </body>
</html>

enctype="multipart/form-data": obligatorio para subir archivos. Sin esto, el archivo no se envía.
accept=".pdf,.doc,.docx": filtra los tipos de archivo en el diálogo de selección.
accept="image/*": acepta cualquier formato de imagen.

Mini-desafío: Ponelo a prueba

Creá un formulario de suscripción que contenga:

Nombre y Email (con required)
Preferencias (4 checkboxes con name="preferencias[]", al menos 1 con checked)
Foto de perfil (<input type="file" accept="image/*">)
Un campo oculto plan con valor "gratuito"
No te olvides de enctype="multipart/form-data"

Intentá armarlo completo sin mirar los ejemplos. Si te trabás, volvé a la variante que necesites.

Errores comunes con checkboxes y archivos

Error	Por qué es un problema
Confundir checkbox con radio button	Checkbox permite selección múltiple; radio button permite solo una opción. Usá checkbox cuando el usuario puede elegir varias cosas
Olvidar `enctype="multipart/form-data"` en subida de archivos	El archivo no se envía al servidor. Este atributo es obligatorio para `<input type="file">`
No limitar el tamaño de archivos	Los usuarios pueden subir archivos enormes que saturan el servidor. Validá tamaño en frontend (`accept`) y backend
Usar `checked` en lugar de `selected`	`checked` es para checkbox/radio, `selected` es para `<option>`. Son atributos diferentes
Olvidar `name` con corchetes para checkboxes múltiples	Sin `name="temas[]"`, el servidor solo recibe el último valor marcado, no todos

Preguntas frecuentes

¿Checkbox o radio button?

Usá checkbox cuando el usuario puede seleccionar varias opciones a la vez (intereses, preferencias, configuraciones). Usá radio button cuando debe elegir una sola opción entre varias (género, plan de pago, sí/no). Si visualmente hay duda, pensá: ¿puede marcar más de uno? Si sí → checkbox. Si no → radio.

¿Cómo estilizar checkboxes con CSS?

Los checkboxes nativos son difíciles de estilizar directamente. La técnica más usada es ocultar el <input type="checkbox"> con display: none o opacity: 0 y crear un <span> o <label> personalizado al lado que actúe como indicador visual con CSS puro o pseudo-elementos.

info

🔎 Explorá todos los detalles en esta sección 👉 Creación de formularios con HTML

Ejercicio práctico 9: Formularios con Casillas de Verificación

Actividad​

Solución interactiva​

Solución con el código HTML completo​

Variantes del mismo ejercicio​

Variante 1: Checkboxes con checked y arrays de datos​

Variante 2: Campo oculto con <input type="hidden">​

Variante 3: Subida de archivos con <input type="file">​

Mini-desafío: Ponelo a prueba​

Errores comunes con checkboxes y archivos​

Preguntas frecuentes​

¿Checkbox o radio button?​

¿Cómo estilizar checkboxes con CSS?​