Saltar al contenido principal

Ejercicio práctico 7: Formulario básico en HTML

Aprende a crear un formulario básico en HTML paso a paso. Descubre cómo usar etiquetas como <form>, <input>, <label>, y más, para capturar información del usuario de forma clara y estructurada.

Actividad​

Crea un formulario con campos de texto, correo electrónico y un botón de envío.

Solución interactiva​

Logo DivZone de ad link
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 Básico</title>
  </head>
  <body>
    <h1>Formulario</h1>
    <form>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" />
      <!-- <br />: Este es un salto de línea -->
      <br />
      <label for="email">Correo Electrónico:</label>
      <input type="email" id="email" name="email" />
      <br />
      <button type="submit">Enviar</button>
    </form>
  </body>
</html>

Variantes del mismo ejercicio​

Variante 1: Formulario con method y action​

Los atributos method y action definen cómo y a dónde se envían los datos del formulario.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Formulario con Método POST</title>
  </head>
  <body>
    <h1>Registro de Usuario</h1>
    <form action="/procesar-registro" method="POST">
      <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 />
      <button type="submit">Registrarse</button>
    </form>
  </body>
</html>
  • method="POST": envía los datos en el cuerpo de la petición (más seguro para información sensible).
  • method="GET": envía los datos en la URL como parámetros visibles (útil para búsquedas y filtros).
  • action: URL del servidor que procesará el formulario. Si se omite, se envía a la misma página.

Variante 2: Validación HTML5 con atributos nativos​

HTML5 permite validar campos sin escribir JavaScript usando atributos como required, placeholder, minlength, maxlength y pattern.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Formulario con Validación</title>
  </head>
  <body>
    <h1>Formulario Validado</h1>
    <form>
      <label for="nombre">Nombre (obligatorio):</label>
      <input
        type="text"
        id="nombre"
        name="nombre"
        placeholder="Ingresá tu nombre completo"
        required
        minlength="3"
        maxlength="50"
      />
      <br />
      <label for="email">Correo Electrónico:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="ejemplo@correo.com"
        required
      />
      <br />
      <label for="telefono">Teléfono:</label>
      <input
        type="tel"
        id="telefono"
        name="telefono"
        placeholder="+54 11 1234-5678"
        pattern="[+]{0,1}[0-9]{1,3}[0-9]{6,14}"
      />
      <br />
      <button type="submit">Enviar</button>
    </form>
  </body>
</html>
  • required: el campo no puede estar vacío.
  • placeholder: texto de ejemplo que desaparece al escribir.
  • minlength / maxlength: largo mínimo y máximo de caracteres.
  • pattern: expresión regular que el valor debe cumplir.

Variante 3: Tipos de input y sus diferencias​

Cada type de input activa un teclado diferente en móviles y tiene validación automática.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Tipos de Input</title>
  </head>
  <body>
    <h1>Distintos Tipos de Campos</h1>
    <form>
      <label for="texto">Texto (type="text"):</label>
      <input type="text" id="texto" name="texto" />
      <br /><br />

      <label for="email2">Email (type="email"):</label>
      <input type="email" id="email2" name="email2" />
      <!-- Valida formato de correo automáticamente -->
      <br /><br />

      <label for="password">Contraseña (type="password"):</label>
      <input type="password" id="password" name="password" />
      <!-- Oculta los caracteres al escribir -->
      <br /><br />

      <label for="edad">Edad (type="number"):</label>
      <input type="number" id="edad" name="edad" min="1" max="120" />
      <!-- Solo acepta números, con flechas incrementales -->
      <br /><br />

      <label for="telefono2">Teléfono (type="tel"):</label>
      <input type="tel" id="telefono2" name="telefono2" />
      <!-- Activa teclado numérico en móviles -->
      <br /><br />

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

Variante 4: Agrupando campos con fieldset y legend​

Para formularios largos, <fieldset> y <legend> agrupan campos relacionados visual y semánticamente.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Formulario Agrupado</title>
  </head>
  <body>
    <h1>Perfil de Usuario</h1>
    <form>
      <fieldset>
        <legend>Datos Personales</legend>
        <label for="nombre2">Nombre:</label>
        <input type="text" id="nombre2" name="nombre" required />
        <br />
        <label for="email3">Email:</label>
        <input type="email" id="email3" name="email" required />
      </fieldset>

      <fieldset>
        <legend>Preferencias</legend>
        <label for="idioma">Idioma preferido:</label>
        <select id="idioma" name="idioma">
          <option value="es">Español</option>
          <option value="en">English</option>
          <option value="pt">Português</option>
        </select>
      </fieldset>

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

fieldset crea un recuadro visual alrededor de los campos agrupados y legend le da un título accesible.

Mini-desafío: Ponelo a prueba​

Creá un formulario de registro que contenga:

  • Campo de nombre con required y placeholder
  • Campo de email con type="email" y validación automática
  • Campo de contraseña con type="password" y minlength="8"
  • Campo de teléfono con type="tel" y pattern
  • Un <button type="submit"> para enviar
  • Todos los campos deben tener su <label> asociado con for

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

Errores comunes con formularios HTML​

ErrorPor qué es un problema
Olvidar el atributo name en los inputsSin name, el dato no se envía al servidor. Es el identificador del campo
No asociar label con for/idLos lectores de pantalla no saben qué etiqueta corresponde a qué campo. Además, al hacer clic en el label no se enfoca el input
Botón sin type="submit"Si está dentro de un <form>, un <button> sin type funciona como submit, pero es mejor ser explícito para evitar comportamientos inesperados
Usar solo required sin validación server-sideLa validación del navegador se puede saltar. Siempre validá también en el backend
No poner placeholder como ayuda visualAunque no reemplaza al <label>, el placeholder guía al usuario sobre el formato esperado

Preguntas frecuentes​

¿Qué pasa si no pongo name en un input?​

El campo no se envía al servidor. El atributo name es la clave con la que el backend recibe el valor. Si tenés <input type="text" id="nombre"> sin name, el usuario puede escribir en el campo pero al enviar el formulario ese dato no llega a destino.

¿GET vs POST: cuál uso?​

Usá GET para búsquedas y filtros (los parámetros quedan en la URL, se puede compartir el link). Usá POST para registro, login o cualquier formulario que modifique datos o contenga información sensible (contraseñas, datos personales). POST envía los datos en el cuerpo de la petición, no en la URL.

info

No te pierdas la explicación completa acá 👉 Creación de formularios con HTML