Crear un formulario HTML y validarlo, insertar vídeos de YouTube, probar emails HTML y humans.txt

Para crear un formulario HTML necesitas una etiqueta <form> con los atributos action (adónde se envían los datos) y method (normalmente post), un campo <input> o <textarea> por cada dato que pides, cada uno con su <label>, y un botón de envío. Con los atributos de validación de HTML, como required o type="email", el navegador comprueba los campos antes de enviar sin una línea de JavaScript. Abajo tienes un ejemplo completo y, de paso, otros trucos de HTML que siguen haciendo falta: insertar vídeos de YouTube, probar emails en HTML y el fichero humans.txt.

Un formulario de contacto básico

Este es el esqueleto que propone la guía de formularios de MDN, con nombre, correo y mensaje, y con el botón añadido:

<form action="/enviar-contacto.php" method="post">
  <p>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
  </p>
  <p>
    <label for="correo">Correo:</label>
    <input type="email" id="correo" name="correo" required>
  </p>
  <p>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" required minlength="10"></textarea>
  </p>
  <p><button type="submit">Enviar</button></p>
</form>

Tres detalles que se olvidan a menudo. El for de cada <label> tiene que coincidir con el id de su campo: así, al pulsar el texto se activa el campo y los lectores de pantalla saben qué se pide. El name es el nombre con el que llega cada dato al servidor. Sin él, el campo no se envía. Y action apunta al script que recibe los datos, porque un formulario HTML por sí solo no manda correos ni guarda nada.

Ese script puede ser un PHP propio, el de tu CMS o el de un servicio de formularios. En WordPress lo normal es usar un plugin de formularios, que ya trae la parte del servidor y la protección contra spam. Lo que publiqué aquí en 2009, pForm, era un generador online que te daba el HTML hecho. La web sigue en pie, pero su pie de página indica 2007-2015 y hoy escribir el formulario a mano como el de arriba lleva menos tiempo que adaptarlo.

Validar un formulario sin JavaScript

Hace años, para comprobar que los campos venían bien rellenados había que tirar de plugins de jQuery, como VanadiumJS. Hoy lo hace el propio navegador con estos atributos, según la guía de validación de formularios de MDN:

• required: el campo es obligatorio.
• minlength y maxlength: longitud mínima y máxima del texto.
• min, max y step: valores mínimo, máximo y salto en los campos numéricos.
• type: exige un tipo de dato, como un número (number), un correo (email) o una dirección web (url).
• pattern: una expresión regular que el valor tiene que cumplir.

Si un campo no cumple sus reglas, el navegador no envía el formulario y muestra un aviso junto al campo. Los campos válidos e inválidos se pueden marcar con las pseudoclases CSS :valid e :invalid. Cuando necesites una regla que HTML no cubre, como que dos campos coincidan, la API de validación te deja usar setCustomValidity() desde JavaScript para poner tu propio mensaje de error.

Una advertencia que MDN deja muy clara y que conviene no olvidar: la validación en el navegador es comodidad para el usuario, no seguridad. Es muy fácil saltársela, así que el servidor tiene que volver a comprobar todos los datos que recibe.

Insertar un vídeo de YouTube en HTML

La forma oficial, según la ayuda de YouTube, es esta: en un ordenador, abre el vídeo o la lista de reproducción, pulsa Compartir, elige Insertar y copia el código HTML que aparece. Ese código es un iframe que cargas en tu página, y lo pegas donde quieras que salga el reproductor.

Si quieres que el vídeo empiece en un momento concreto, añade ?start= a la dirección del vídeo dentro del código, seguido de los segundos. Por ejemplo, ?start=90 lo arranca en el minuto y medio.

YouTube tiene también un modo de privacidad mejorada. Las reproducciones de un vídeo insertado en ese modo no se usan para personalizar la experiencia del visitante en YouTube ni los anuncios que ve fuera de tu web. Para activarlo basta con cambiar el dominio en el código:

https://www.youtube.com/embed/ID_DEL_VIDEO
https://www.youtube-nocookie.com/embed/ID_DEL_VIDEO

Un fallo que aparece de vez en cuando: si tu web no envía la cabecera HTTP Referer al cargar el vídeo, YouTube no lo reproduce y muestra el error 153. Sus condiciones exigen esa cabecera. Si ves ese error, revisa la política de referer de tu web. Y si usas WordPress, ni siquiera necesitas el código: con el bloque Insertar del editor (o el específico de YouTube) basta con pegar la URL del vídeo. Para que el vídeo se encuentre también en YouTube, tienes la guía para mejorar el posicionamiento de los vídeos en YouTube.

Probar emails en HTML

Maquetar un correo en HTML sigue siendo más difícil que maquetar una web, porque cada cliente de correo entiende una parte distinta del HTML y del CSS. Antes de pelearte con una plantilla, consulta Can I email. Es una web con tablas de compatibilidad de HTML y CSS en Apple Mail, Gmail, Outlook, Yahoo! Mail, Thunderbird y otros, que se actualiza a menudo. Por ejemplo, ahí ves que display: flex no funciona en todos los clientes, y te ahorras descubrirlo en el correo de un cliente.

Para ver capturas reales de tu correo en muchos clientes a la vez hay servicios comerciales. Con Litmus previsualizas el correo en más de 100 clientes, y Email on Acid ahora forma parte de Mailgun Inspect. Fractal, la herramienta gratuita que recomendé en 2011, ya no existe. Para estas pruebas usa contenido de ejemplo: no pegues en un servicio externo un correo con datos reales de tus clientes. Y si lo que quieres es una firma en HTML, mira la guía para crear una firma de correo en Gmail, Outlook y Apple Mail.

humans.txt, el fichero de los autores

humans.txt es una iniciativa para dar a conocer a las personas que han hecho una web. Es un fichero de texto que se sube a la raíz del sitio, al lado de robots.txt, y que puedes enlazar desde el <head> con:

<link type="text/plain" rel="author" href="/humans.txt">

No es obligatorio, es un detalle para quien tenga curiosidad por saber quién está detrás de una web. El de la propia iniciativa se divide en tres bloques, /* TEAM */, /* THANKS */ y /* SITE */, con nombres, funciones y datos técnicos de la web. Yo pondría solo a quien quiera aparecer, y sin correos personales, que todo lo que hay en ese fichero es público.

Revisado y actualizado en octubre de 2026.