Validación nativa y envío

El navegador valida por ti (gratis)

Buenas noticias: antes de escribir una sola línea de JavaScript, el navegador ya te hace de portero. Con unos atributos en los controles, comprueba los datos por ti; si algo no cumple, bloquea el envío y muestra el mensaje rojo de toda la vida. Tú solo tienes que pedírselo.

required: campo obligatorio

required impide enviar el formulario si el campo está vacío:

<input type="text" name="nombre" required />

El type también valida

Un type="email" exige un formato de correo válido (debe contener @, etc.):

<input type="email" name="correo" required />

pattern: tu propia regla

Cuando ningún type encaja, pattern te deja inventar la norma con una expresión regular. Por ejemplo, un código postal de 5 dígitos:

<input type="text" name="cp" pattern="[0-9]{5}" />

Rangos y longitudes

• min / max: valores mínimo y máximo (útil en number y fechas).
• maxlength: número máximo de caracteres en un campo de texto.

<input type="number" name="edad" min="18" max="120" />
<input type="text" name="apodo" maxlength="20" />

El flujo de envío: action y method

Cuando se envía un formulario válido, el navegador empaqueta los pares name=valor y los manda a un servidor. Dos atributos del <form> lo controlan:

• action: la URL que recibirá los datos.
• method: cómo se envían. get los añade a la URL (búsquedas, datos no sensibles); post los manda en el cuerpo de la petición (altas, contraseñas).

<form action="/registro" method="post">
  <label for="correo">Correo</label>
  <input type="email" id="correo" name="correo" required />
  <button type="submit">Crear cuenta</button>
</form>

A alto nivel: HTML define qué se envía y adónde; el servidor decide qué hacer con esos datos. ⚠️ Y ojo: la validación nativa es la primera barrera, pero nunca la única. Un usuario malicioso se la salta en dos clics, así que el servidor siempre debe revalidar. Confía, pero verifica.