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
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
No hay comentarios:
Publicar un comentario