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.

Practicá con DivZone AI

¿Ya armaste tu primer formulario? Generá una página de contacto con DivZone AI y fijate cómo cada input queda asociado a su label con for e id.

info

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