Ejercicio de HTML: formulario de contacto con validación nativa

Este ejercicio de HTML de formulario de contacto se centra en etiquetas, validación del navegador y datos que se enviarían a un servidor.

Enunciado

Construye un formulario con nombre, correo y mensaje. Exige los tres datos y un mínimo de 20 caracteres en el mensaje. No necesitas JavaScript para comprobar los campos.

Solución comentada

Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.

<form action="/contacto" method="post">
  <p>
    <label for="nombre">Nombre</label>
    <input id="nombre" name="nombre" autocomplete="name" required>
  </p>
  <p>
    <label for="correo">Correo electrónico</label>
    <input id="correo" name="correo" type="email" autocomplete="email" required>
  </p>
  <p>
    <label for="mensaje">Mensaje</label>
    <textarea id="mensaje" name="mensaje" minlength="20"
              aria-describedby="ayuda-mensaje" required></textarea>
    <small id="ayuda-mensaje">Escribe al menos 20 caracteres.</small>
  </p>
  <button type="submit">Enviar consulta</button>
</form>

Los atributos for e id relacionan cada campo con su etiqueta. Name identifica el dato enviado. La ruta /contacto debe corresponder a un endpoint real para procesar el formulario. La validación del navegador ayuda al usuario, pero el servidor debe validar por su cuenta.

Cómo comprobar tu solución

1. Intenta enviar el formulario vacío.
2. Escribe una dirección sin arroba y prueba otra vez.
3. Escribe manualmente un mensaje corto y luego uno de longitud suficiente. El envío final solo funcionará si existe el endpoint.

Reto adicional

Añade un selector de motivo de contacto con una opción inicial vacía. Comprueba que el formulario pide elegir un motivo válido.

Repasa los conceptos en el tutorial de MasterCodePro.