Clase de Formularios en HTML¶

📌 ¿Qué es un formulario en HTML?¶

Un formulario en HTML es una herramienta que permite a los usuarios ingresar y enviar datos. Se usa en registros, inicios de sesión, encuestas y más.

Los formularios se crean con la etiqueta <form> y dentro de ella colocamos los elementos de entrada de datos.

🏗 Estructura básica de un formulario¶

<form action="procesar.php" method="POST">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>

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

    <button type="submit">Enviar</button>
</form>

🔹 Explicación: - <form>: Contiene los elementos del formulario. - action: Especifica la página a la que se enviarán los datos. - method: Define cómo se enviarán los datos (GET o POST). - <label>: Etiqueta descriptiva para los campos. - <input>: Campo de entrada donde el usuario escribe. - type: Define el tipo de dato (text, email, etc.). - name: Identifica cada campo al enviarlo. - required: Hace que el campo sea obligatorio. - <button type="submit">: Envía el formulario.

🔢 Tipos de entradas en un formulario¶

Tipo de Input	Uso
`text`	Campo de texto normal
`email`	Solo permite correos electrónicos
`password`	Oculta caracteres (contraseña)
`number`	Solo permite números
`tel`	Para números de teléfono
`date`	Para seleccionar una fecha
`checkbox`	Casilla de verificación
`radio`	Opción única dentro de un grupo
`file`	Para subir archivos

Ejemplo:

<form>
    <input type="text" placeholder="Nombre">
    <input type="email" placeholder="Correo">
    <input type="password" placeholder="Contraseña">
    <input type="date">
    <input type="checkbox"> Acepto los términos
    <input type="radio" name="genero" value="M"> Masculino
    <input type="radio" name="genero" value="F"> Femenino
    <button type="submit">Enviar</button>
</form>

🔄 Diferencia entre GET y POST¶

🔹 GET: Envía los datos en la URL (visible, menos seguro).

<form action="buscar.php" method="GET">

🔹 POST: Envía los datos de manera oculta (más seguro).

<form action="login.php" method="POST">

✅ Validaciones en Formularios¶

1️⃣ Validación con HTML¶

required: Campo obligatorio.
minlength y maxlength: Número de caracteres permitidos.
pattern: Patrón con expresiones regulares.

Ejemplo:

<input type="text" name="usuario" required minlength="3" maxlength="15">

2️⃣ Validación con CSS (para mejorar visualmente)¶

input:valid {
    border: 2px solid green;
}
input:invalid {
    border: 2px solid red;
}

3️⃣ Validación con JavaScript¶

<script>
    function validarFormulario() {
        let nombre = document.getElementById("nombre").value;
        if (nombre.length < 3) {
            alert("El nombre debe tener al menos 3 caracteres.");
            return false;
        }
        return true;
    }
</script>
<form onsubmit="return validarFormulario()">
    <input type="text" id="nombre">
    <button type="submit">Enviar</button>
</form>

🎯 Ejercicio para practicar¶

📌 Crea un formulario con los siguientes campos: ✅ Nombre (obligatorio) ✅ Correo electrónico (obligatorio y válido) ✅ Contraseña (mínimo 6 caracteres) ✅ Fecha de nacimiento (obligatorio) ✅ Género (radio: Masculino, Femenino, Otro) ✅ Aceptar términos (checkbox obligatorio)

Bonus: Agregar validaciones y diseño con CSS. 🎨

🎓 Conclusión¶

Los formularios en HTML son esenciales para la interacción con los usuarios. Con una buena estructura y validaciones, podemos mejorar la experiencia y la seguridad de los datos.