Formularios y tablas

02

Formularios y tablas

Crea formularios donde los usuarios escriban datos y tablas para organizar información.

Piensa en la última vez que te registraste en una página web. Escribiste tu nombre, tu email, elegiste una contraseña y presionaste un botón de “Crear cuenta”. Eso que llenaste era un formulario HTML.

Los formularios están en todos lados: login, registro, búsqueda, comentarios, encuestas, formularios de contacto. Son la forma en que los usuarios le envían información a una página web.

Y las tablas son la forma de mostrar datos organizados en filas y columnas: tablas de precios, horarios, comparaciones, clasificaciones.

En este capítulo vas a aprender a crear ambos.

---

Tu primer formulario

Un formulario necesita tres cosas: un contenedor (<form>), campos donde el usuario escribe (<input>), y etiquetas que le digan al usuario qué escribir en cada campo (<label>).

<form>
  <label for="nombre">Tu nombre:</label>
  <input type="text" id="nombre" name="nombre">

  <label for="email">Tu email:</label>
  <input type="email" id="email" name="email">

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

Vamos a desglosar cada parte:

• <form> — Es la caja que envuelve todo el formulario. Le dice al navegador “esto es un formulario”.
• <label> — El texto que le dice al usuario qué escribir. “Tu nombre:”, “Tu email:”.
• <input> — El campo donde el usuario escribe. La cajita de texto.
• <button type="submit"> — El botón para enviar el formulario.

💡La conexión entre label e input

El for="nombre" del <label> debe coincidir exactamente con el id="nombre" del <input>. Esto los conecta. ¿Qué logras con eso? Que cuando el usuario haga clic en el texto “Tu nombre:”, el cursor salte automáticamente al campo. Parece un detalle menor, pero para personas que usan lectores de pantalla es fundamental: el lector lee el label en voz alta cuando el usuario llega al campo.

---

Los tipos de input: el navegador trabaja por ti

Aquí viene lo bueno. La etiqueta <input> tiene un atributo llamado type que cambia completamente su comportamiento. Dependiendo del tipo, el navegador te regala validación automática sin que tú escribas una sola línea de JavaScript.

Texto y datos personales

<!-- Campo de texto normal -->
<input type="text" name="nombre" placeholder="Escribe tu nombre">

<!-- Email: el navegador verifica que tenga @ y un dominio -->
<input type="email" name="email" placeholder="tu@email.com">

<!-- Contraseña: oculta lo que escribes con puntos -->
<input type="password" name="password" placeholder="Tu contraseña">

<!-- Teléfono: en celulares, abre el teclado numérico -->
<input type="tel" name="telefono" placeholder="999 888 777">

La diferencia entre type="text" y type="email" no es solo visual. Si pones type="email" y el usuario escribe “hola” (sin arroba), el navegador le mostrará un error automáticamente cuando intente enviar el formulario. Gratis. Sin JavaScript.

Números y fechas

<!-- Número: aparecen flechitas para subir/bajar -->
<input type="number" name="edad" min="0" max="120">

<!-- Fecha: abre un calendario del navegador -->
<input type="date" name="fecha-nacimiento">

<!-- Selector de color: abre un color picker -->
<input type="color" name="color-favorito" value="#00ff41">

Pro tip

Usa siempre el type correcto. ¿El campo es para un email? Usa type="email". ¿Para un número? Usa type="number". ¿Para una fecha? Usa type="date". El navegador te da validación y controles nativos gratis. En celulares, type="email" incluso muestra el teclado con la @ a la vista.

---

Más elementos para tus formularios

<textarea> — Para textos largos

Cuando un campo de una línea no alcanza (comentarios, descripciones, mensajes):

<label for="mensaje">Tu mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="5" placeholder="Escribe aquí tu mensaje..."></textarea>

rows="5" le dice al navegador que muestre 5 líneas de alto. El usuario puede escribir todo lo que quiera.

<select> — Lista desplegable

Cuando el usuario debe elegir una opción de una lista predefinida:

<label for="pais">¿De dónde eres?</label>
<select id="pais" name="pais">
  <option value="">Elige tu país</option>
  <option value="pe">Perú</option>
  <option value="mx">México</option>
  <option value="es">España</option>
  <option value="ar">Argentina</option>
  <option value="co">Colombia</option>
</select>

Checkbox — Marcar varias opciones

Los checkbox son las casillas que puedes marcar o desmarcar. El usuario puede seleccionar varias:

<fieldset>
  <legend>¿Qué te interesa aprender?</legend>

  <label>
    <input type="checkbox" name="tech" value="html"> HTML
  </label>
  <label>
    <input type="checkbox" name="tech" value="css"> CSS
  </label>
  <label>
    <input type="checkbox" name="tech" value="js"> JavaScript
  </label>
</fieldset>

Radio — Elegir solo una opción

Los radio buttons son como los checkbox, pero solo puedes elegir una opción del grupo (como las preguntas de opción múltiple en un examen):

<fieldset>
  <legend>¿Cuál es tu nivel?</legend>

  <label>
    <input type="radio" name="nivel" value="cero"> Principiante
  </label>
  <label>
    <input type="radio" name="nivel" value="medio"> Intermedio
  </label>
  <label>
    <input type="radio" name="nivel" value="avanzado"> Avanzado
  </label>
</fieldset>

Consejo

¿Qué son <fieldset> y <legend>? <fieldset> agrupa campos que están relacionados (como todas las opciones de una misma pregunta). <legend> es el título de ese grupo (la pregunta en sí). Son especialmente útiles para accesibilidad: los lectores de pantalla leen el <legend> cuando el usuario llega al grupo, para que sepa de qué se trata.

---

Validación: que el navegador revise los datos por ti

HTML tiene atributos que le dicen al navegador “no dejes enviar el formulario si este campo no cumple la regla”. El navegador muestra el mensaje de error solito.

<!-- Este campo es obligatorio. No se puede enviar vacío. -->
<input type="text" name="nombre" required>

<!-- Debe tener al menos 8 caracteres -->
<input type="password" name="password" required minlength="8">

<!-- Debe ser un número entre 18 y 99 -->
<input type="number" name="edad" min="18" max="99">

<!-- Máximo 300 caracteres -->
<textarea name="bio" maxlength="300"></textarea>

Intenta enviar un formulario con required sin llenar el campo. El navegador te mostrará “Por favor, rellena este campo” o un mensaje similar. Todo automático.

Precaución

Esta validación ocurre en el navegador del usuario (se llama “validación del lado del cliente”). Es muy útil, pero no es suficiente por sí sola. Un usuario avanzado podría saltársela. Cuando aprendas backend, también validarás en el servidor. Por ahora, lo importante es que sepas que existe y que la uses.

---

Tablas: datos organizados en filas y columnas

Las tablas HTML son para mostrar datos tabulares: información que naturalmente se organiza en filas y columnas. Una tabla de precios, un horario de clases, una comparación de productos, una tabla de posiciones.

Precaución

Las tablas son para datos, no para diseñar la estructura de tu página. Hace muchos años, los desarrolladores usaban tablas para crear layouts (poner el menú a la izquierda y el contenido a la derecha). Hoy eso es una mala práctica. Para layout usarás Flexbox y Grid, que aprenderás en los próximos capítulos.

La estructura básica

<table>
  <thead>
    <tr>
      <th>Tecnología</th>
      <th>Tipo</th>
      <th>Dificultad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Lenguaje de marcado</td>
      <td>Fácil</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Lenguaje de estilos</td>
      <td>Medio</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Lenguaje de programación</td>
      <td>Medio-Alto</td>
    </tr>
  </tbody>
</table>

Parece mucho código, pero es lógico cuando lo desglosas:

• <table> — La tabla completa.
• <thead> — La cabecera (la fila de títulos de las columnas).
• <tbody> — El cuerpo (donde van los datos).
• <tr> — Table Row: una fila.
• <th> — Table Header: una celda de título (se muestra en negrita).
• <td> — Table Data: una celda de datos.

Piénsalo como una hoja de cálculo de Excel: <tr> es una fila, <th>/<td> son las celdas dentro de esa fila.

Hacer tu tabla accesible

Agrega un <caption> para describir de qué trata la tabla. Es como el título de un gráfico:

<table>
  <caption>Comparación de planes de hosting</caption>
  <thead>
    <tr>
      <th>Característica</th>
      <th>Plan Gratis</th>
      <th>Plan Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Almacenamiento</td>
      <td>10 GB</td>
      <td>100 GB</td>
    </tr>
    <tr>
      <td>Dominios</td>
      <td>1</td>
      <td>Ilimitados</td>
    </tr>
  </tbody>
</table>

---

⌨️Ejercicio: Crea un formulario de registro

Vas a crear un formulario de registro completo para un sitio web ficticio.

1. Crea un archivo registro.html con la estructura HTML base (DOCTYPE, html, head, body).

2. Agrega un título <h1>Crea tu cuenta</h1>.

3. Crea un formulario con estos campos (usa las etiquetas y tipos correctos):

   • Nombre completo (obligatorio, texto)
   • Email (obligatorio, tipo email)
   • Contraseña (obligatorio, mínimo 8 caracteres)
   • Fecha de nacimiento (tipo date)
   • País (select con al menos 5 países)
   • Nivel de experiencia (radio: Principiante, Intermedio, Avanzado)
   • Tecnologías que te interesan (checkbox: HTML, CSS, JavaScript, React)
   • Una breve biografía (textarea, máximo 300 caracteres)

4. Conecta cada <label> con su input usando for e id.

5. Agrega un botón “Crear cuenta” con type="submit".

6. Prueba la validación: intenta enviar el formulario sin llenar los campos obligatorios. El navegador debería mostrarte errores.

7. Bonus: Debajo del formulario, agrega una tabla que compare dos planes (Gratuito vs Premium) con al menos 3 filas de características.

---

Resumen

• Los formularios (<form>) son la forma en que los usuarios envían datos a una web.
• Cada campo necesita un <label> conectado con for/id — es fundamental para que todos puedan usar tu formulario.
• El type del <input> importa mucho: email valida el formato, number solo acepta números, date abre un calendario. El navegador trabaja por ti.
• Atributos como required, minlength y min/max activan validación automática sin JavaScript.
• Las tablas son para datos en filas y columnas (precios, horarios, comparaciones), nunca para layout.
• Estructura de tabla: <table> → <thead> + <tbody> → <tr> → <th> o <td>.

Para profundizar: Formularios HTML en MDN — la guía completa con todos los tipos de input que existen.

Siguiente capítuloTodas las etiquetas HTMLLa guía completa: cada etiqueta explicada con ejemplos prácticos.

→