La planilla digital

Los formularios son la forma en que la web te escucha: campos donde el usuario escribe, elige y envía información.

¿Qué es un formulario HTML?

Un formulario HTML es como una planilla en papel — tiene campos para completar, y cuando apretás "Enviar", esa información va a algún lado (un servidor, un email, etc.).

Usos: registro de usuarios, contacto, búsqueda, login, encuestas, compras online.

📦 <form> · el contenedor

Analogía get vs post: get es como gritar los datos en voz alta (van en la barra de direcciones, a la vista de todos); post es como entregarlos en un sobre cerrado.

🏷️ <label> · la etiqueta del campo

Usar <label> es obligatorio por accesibilidad: los lectores de pantalla lo necesitan para anunciar qué es cada campo. Hay dos formas de vincularlo:

<!-- Ejemplo 1 · forma A: for + id (la más usada) -->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

<!-- forma B: envolver el input -->
<label>Nombre:
  <input type="text" name="nombre">
</label>

⌨️ <input> · los campos, tipo por tipo

El elemento <input> (¡void, sin cierre, del Módulo 1!) cambia de personalidad según su type:

📝 <textarea> · texto multilínea

A diferencia de <input type="text">, el <textarea> acepta varias líneas y tiene etiqueta de cierre. Su contenido por defecto va ENTRE las etiquetas, no en un atributo value.

<!-- Ejemplo 2 -->
<label for="mensaje">Tu mensaje:</label>
<textarea id="mensaje" name="mensaje"
          rows="4" cols="40"
          placeholder="Escribí acá…"></textarea>
<!-- el redimensionado se controla con CSS:
     resize: none | both | vertical | horizontal -->

🌍 Atributos comunes a todos los campos

<!-- Ejemplo 3 · campo completo y accesible -->
<label for="correo">Email:</label>
<input type="email" id="correo" name="correo"
       placeholder="tu@email.com" required>

🧪 Probá un formulario REAL (sin envío)

Este formulario funciona de verdad: completalo y tocá «Enviar». No envía nada a ningún servidor — intercepta el envío y te muestra abajo los datos que capturó, con el name de cada campo.

⚙️ Sintaxis en acción

<!-- Formulario mínimo completo -->
<form action="" method="post">
  <label for="usuario">Usuario:</label>
  <input type="text" id="usuario"
         name="usuario" required>

  <label for="clave">Contraseña:</label>
  <input type="password" id="clave"
         name="clave" minlength="8">

  <input type="submit" value="Ingresar">
</form>

🎬 Videos de referencia

📺 Video 1 · por TodoCode · todocodeacademy.com

📺 Video 2 · por TodoCode · todocodeacademy.com

Para escribir el correo electrónico → ________
Para una contraseña oculta → ________
Para elegir la fecha de nacimiento → ________
Para la edad (solo números) → ________

<form action="" method="post">
  <label ="correo">Email:</label>
  <input type="" id="correo"
         ="correo" required>
  <input type="" value="Enviar">
</form>

Cuando el usuario elige entre opciones

Botones, casillas, listas desplegables: las herramientas para que el usuario elija sin tener que escribir.

Además de los campos de texto, los formularios tienen elementos especiales para cuando el usuario debe elegir entre opciones. Acá vemos los tres más importantes: casillas de verificación, botones de opción y listas desplegables.

☑️ checkbox · selección múltiple

Cuándo usar: cuando el usuario puede elegir varias opciones a la vez. Como marcar varias opciones en una encuesta — podés tildar todas las que quieras.

Cómo agrupar: todos con el mismo name pero diferente value. Atributos: name, value, checked (booleano: marcado por defecto), disabled.

<!-- Ejemplo 1 · grupo de checkboxes de intereses -->
<label><input type="checkbox" name="interes" value="deportes"> Deportes</label>
<label><input type="checkbox" name="interes" value="musica" checked> Música</label>
<label><input type="checkbox" name="interes" value="games"> Videojuegos</label>

🔘 radio · selección única

Cuándo usar: cuando el usuario solo puede elegir UNA opción de un grupo. Como las preguntas de múltiple opción en un examen — solo podés marcar una respuesta.

Regla clave: todos los radio del mismo grupo DEBEN tener el mismo name. Eso los vuelve excluyentes: marcar uno desmarca los demás. El value es diferente en cada uno.

<!-- Ejemplo 2 · grupo de radio: turno -->
<label><input type="radio" name="turno" value="matutino" checked> Matutino</label>
<label><input type="radio" name="turno" value="vespertino"> Vespertino</label>

📜 <select> y <option> · lista desplegable

Cuándo usar: lista larga de opciones donde mostrar todas como radio ocuparía mucho espacio. Como el menú desplegable para elegir tu país al registrarte en un sitio.

Atributos de <select>: name, id, required, disabled, multiple (selección múltiple con Ctrl/Cmd), size (cuántas opciones mostrar a la vez).

Atributos de <option>:

• value — lo que se envía al servidor
• El texto visible va entre las etiquetas
• selected — la opción elegida por defecto
• disabled — la opción no se puede elegir

Con <optgroup label="…"> agrupás opciones con un título (ej: países por continente).

<!-- Ejemplo 3 · select con optgroup -->
<label for="pais">País:</label>
<select id="pais" name="pais" required>
  <optgroup label="América del Sur">
    <option value="uy" selected>Uruguay</option>
    <option value="ar">Argentina</option>
  </optgroup>
  <optgroup label="Europa">
    <option value="es">España</option>
  </optgroup>
</select>

🔳 <button> · el botón mejorado

¿Diferencia con <input type="submit">? <button> puede contener HTML adentro (texto + emoji + lo que quieras). Tipos: type="submit" (envía), type="reset" (limpia), type="button" (sin acción: para JavaScript).

🗃️ <fieldset> y <legend> · agrupar campos

<fieldset> agrupa campos relacionados con un borde visual; <legend> es el título del grupo y aparece sobre el borde.

Cuándo usarlo: en formularios largos con varias secciones (datos personales, datos de envío…).

🧪 Formulario completo de ejemplo (¡funcional!)

Una encuesta real con TODO lo visto en las secciones 3 y 4. Completala y tocá «Enviar»: vas a ver abajo exactamente qué datos capturó (sin enviar nada a ningún lado).

⚙️ Sintaxis en acción

<!-- Encuesta con fieldset + legend -->
<form>
  <fieldset>
    <legend>Preferencias</legend>

    <label><input type="checkbox"
      name="gusto" value="futbol">
      Fútbol</label>

    <label><input type="radio"
      name="turno" value="am">
      Mañana</label>

    <button type="submit">Enviar 🚀</button>
  </fieldset>
</form>

"Marcá TODOS los talleres que te interesan" → ________
"Elegí UN solo turno" → ________
"Elegí tu país (lista de 190 opciones)" → ________
"Agrupar los campos de datos personales" → ________

<select name="materia">
  < ="cs"
          >Ciencias de la Computación</option>
  <option value="mat">Matemática</option>
</select>

La firma visual de tu sitio

Pequeños detalles (el iconito de la pestaña, los datos del head) que hacen que tu sitio se vea profesional y prolijo.

⭐ ¿Qué es un favicon?

El favicon es el pequeño ícono que aparece en la pestaña del navegador, al lado del título de la página. Es la "firma visual" de tu sitio. También aparece en favoritos, en el historial, en la pantalla de inicio de los celulares y hasta en resultados de búsqueda.

Formatos de favicon

🔗 Vincular el favicon en el <head>

<!-- Ejemplo 1 · de más simple a más completa -->

<!-- Forma mínima: favicon.ico en la raíz del sitio -->
<link rel="icon" href="favicon.ico">

<!-- PNG con tamaño especificado -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<!-- SVG moderno -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">

<!-- Para dispositivos Apple (iOS): ícono en pantalla de inicio -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

<!-- Para Android / PWA -->
<link rel="manifest" href="site.webmanifest">

Para un sitio básico, basta con la primera o segunda forma. Las demás son refinamientos para celulares y aplicaciones web.

🗺️ El mapa completo del <head>

El <head> es como el DNI de tu página — contiene toda la información sobre ella pero el usuario no la ve directamente. Lo que sí ve son las consecuencias: el título en la pestaña, el favicon, los estilos.

¿Qué hace cada grupo? Las Open Graph controlan cómo se ve el link de tu página al compartirlo en redes (título, descripción e imagen de la tarjetita). El defer en los scripts le dice al navegador: "descargá el script mientras leés el HTML, pero ejecutalo recién al final" — así la página no se traba.

<!-- Ejemplo 2 · head completo de una página real -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Club de Astronomía · Inicio</title>
  <meta name="description" content="Observaciones, charlas y salidas del club">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="stylesheet" href="css/estilos.css">
</head>

<!-- Ejemplo 3 · Open Graph: la "tarjetita" al compartir -->
<meta property="og:title" content="Club de Astronomía">
<meta property="og:description" content="Mirá el cielo con nosotros">
<meta property="og:image" content="https://misitio.com/imagenes/banner.jpg">

⚙️ Sintaxis en acción

<!-- El simulador renderiza solo el body, -->
<!-- así que probá el head COMPLETO -->
<!-- descargándolo y abriéndolo: -->
<!-- al descargar, mirá la pestaña -->
<!-- del navegador: título y favicon. -->
<head>
  <meta charset="UTF-8">
  <title>¡Mirá la pestaña!</title>
  <link rel="icon"
    href="https://claude.ai/favicon.ico">
</head>

<head>
  <meta ="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <>Mi sitio</title>
  <link ="icon" ="favicon.ico">
</head>

De una página a un sitio completo

📚 ¿Qué es un sitio multipágina?

Un sitio web es como un libro — tiene varias páginas, pero todas comparten la misma tapa y la misma estructura. Cada página HTML es un capítulo diferente. Técnicamente, un sitio es una colección de archivos HTML (más CSS, JS e imágenes) organizados en carpetas.

El archivo principal siempre se llama index.html — es la "página de entrada". Es como la recepción de un edificio: lo primero que ve el visitante.

🌳 El árbol de carpetas (¡interactivo!)

Tocá cualquier archivo del árbol para ver qué rol cumple y cómo referenciarlo desde otro archivo con una ruta relativa:

🧭 Rutas relativas vs. absolutas

Ruta absoluta: la URL completa desde el origen. Ej: https://misitio.com/imagenes/logo.png. Siempre funciona desde cualquier lugar, pero depende del dominio.

Ruta relativa: relativa a la ubicación del archivo actual. Es como dar indicaciones desde donde estás parado: "andá una cuadra para atrás y doblá".

<!-- Ejemplo 1 · recorridos típicos en el árbol de arriba -->
Estás en index.html y querés el logo:
<img src="imagenes/logo.png">      → entrar a la subcarpeta

Estás en css/estilos.css y querés el logo:
url("../imagenes/logo.png")        → subir 1 y entrar a imagenes/

Estás en contacto.html y querés volver al inicio:
<a href="index.html">Inicio</a>   → misma carpeta

🔗 El menú de navegación entre páginas

El mismo <nav> (¡Módulo 2!) se repite en todas las páginas del sitio. El problema: si las páginas están en carpetas distintas, las rutas del menú cambian. Soluciones: usar rutas desde la raíz (/) cuando sea posible, o mantener rutas relativas coherentes.

<!-- Ejemplo 2 · menú que funciona en las 3 páginas (todas en la raíz) -->
<nav>
  <a href="index.html" class="activo">Inicio</a>
  <a href="acerca.html">Acerca de</a>
  <a href="contacto.html">Contacto</a>
</nav>
<!-- buena práctica: class="activo" marca la página actual -->

🚪 index.html y el comportamiento de las carpetas

Si una URL termina en / (carpeta), el servidor busca automáticamente index.html adentro. Ej: misitio.com/blog/ carga misitio.com/blog/index.html. Por eso la convención es nombrar la página principal de cada sección como index.html.

<!-- Ejemplo 3 · la magia del index -->
misitio.com/          → carga  misitio.com/index.html
misitio.com/blog/     → carga  misitio.com/blog/index.html
misitio.com/galeria/  → carga  misitio.com/galeria/index.html

⚙️ Sintaxis en acción

<!-- Menú multipágina con página activa -->
<nav>
  <a href="index.html"
     class="activo">Inicio</a> |
  <a href="galeria/index.html">Galería</a> |
  <a href="contacto.html">Contacto</a>
</nav>

<!-- Imagen en subcarpeta -->
<img src="imagenes/logo.png"
     alt="Logo del sitio">

<!-- Estás editando index.html (en la raíz) -->

<!-- el logo está en la carpeta imagenes/ -->
<img src="" alt="Logo">

<!-- la página de contacto está al lado de index -->
<a href="">Contacto</a>

<!-- Ahora estás editando css/estilos.css -->
<!-- y querés usar el banner de imagenes/ -->
background: url("");

¡Este es el reto final! 🚀
Un sitio web multipágina con todo lo aprendido en los tres módulos.

🛤️ Flujo de trabajo obligatorio · 8 pasos

💻 Tu sitio: dos archivos, dos editores

📖 Glosario interactivo del Capítulo 3

Tocá cualquier tarjeta para girarla y ver su definición, un ejemplo y el link a la sección donde se explica. Usá el buscador para filtrar.

No encontramos resultados para tu búsqueda. Probá con otra palabra. 🔎