TP HTML Formularios y validaciones

 Un formulario HTML (<form>) permite que los usuarios ingresen datos que pueden ser enviados a un servidor.

🧩 Elementos de un formulario

1. <form>

Contenedor principal. Tiene dos atributos importantes:

    action: URL a la que se envían los datos.

    method: método de envío (get o post).

<form action="/registrar.php" method="post/get">
  <!-- campos aquí -->
</form>

📬 GET vs POST — Diferencias principales

Característica                                     GET                                                                     POST

📤 Método de envío    Los datos se envían en la URL    Los datos se envían en el cuerpo de la solicitud

👀 Visibilidad    Los datos son visibles en la barra de direcciones    Los datos no son visibles en la URL

💾 Uso principal    Obtener datos, navegación, filtros, búsqueda    Enviar datos confidenciales o que modifican algo

2. <label>

Etiqueta que describe el propósito de un campo.

    Atributo for: debe coincidir con el id del campo al que está asociada.

<label for="email">Correo:</label>
<input type="email" id="email" name="email">

3. <input>

Campo más usado. Tiene distintos type según lo que quieras recolectar:

Tipo (type)    Uso

*text    Texto corto
*password    Texto oculto
*email    Correo electrónico
*number    Números
*date    Fecha
*checkbox    Casilla de verificación
*radio    Selección única de opciones
*submit    Botón para enviar el form
*reset    Botón para limpiar el form
*file    Subir archivo
*hidden    Campo oculto

Photo by Jackson Sophat on Unsplash

4. <select> y <option>

Menú desplegable para elegir una opción.

<label for="pais">País:</label>
<select id="pais" name="pais">
  <option value="ar">Argentina</option>
  <option value="cl">Chile</option>
</select>

5. <textarea>

Campo de texto multilínea (comentarios, descripciones).

<label for="comentarios">Comentarios:</label>
<textarea id="comentarios" name="comentarios" rows="4" cols="50"></textarea>

6. <button>

Botón personalizable, puede tener varios usos según el type.

<button type="submit">Enviar</button>
<button type="reset">Borrar</button>
<button type="button">Otro (con JS)</button>
 

7. Atributos útiles

Atributo    Descripción

*required    Hace obligatorio el campo
*placeholder    Texto guía dentro del campo
*min, max    Valores mínimos y máximos (números, fechas)
*maxlength, minlength    Longitud del texto permitida
*pattern    Expresión regular para validar el valor
*name    Nombre del campo (clave para el servidor)
*id    Identificador único del campo

✅  ¿Qué es la validación del lado del cliente?

Es una forma de verificar si los datos ingresados son válidos antes de enviarlos al servidor. Esto evita errores, mejora la experiencia del usuario y reduce el tráfico innecesario.

¿Qué se puede validar?

    * Campos obligatorios (required)

    * Tipo de dato (email, número, etc.)

    * Longitud mínima/máxima

    * Patrón (regex)

Actividades:

Aplicar estos conceptos a su sitio web