Lección: 13 Como hacer FORMULARIO en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

13 Como hacer FORMULARIO en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

Duración: 17 min

Módulo: 🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap) Lección 13 de 14

Descripción

🎬 Lección 13: Cómo hacer un FORMULARIO en mi PÁGINA WEB 📝

¡Claro! La Lección 13 se centra en crear la sección final de interacción con el usuario: un Formulario de Contacto, además de refinar los ajustes visuales de la página.

Ajustes Visuales y Estructurales 🗺️

Antes de crear el formulario, se realizan dos ajustes rápidos para optimizar el diseño de la página.

Mapa de Ubicación a Ancho Completo: Se elimina la clase container de la sección del mapa para que este ocupe el 100% del ancho del navegador (de borde a borde), mejorando la inmersión visual. [00:28]
Sección de Contactos (Fondo): Se crea la sección de Contactos (.contacts) y se le asigna una imagen de fondo o un color para diferenciarla visualmente. [01:08]

Implementación del Formulario de Contacto 📧

El formulario se construye utilizando los componentes modulares de Bootstrap para garantizar un diseño limpio y responsive.

1. Estructura y Contenedor 🧱

Título: Se añade el título "Contáctanos" (<h1>) al centro de la nueva sección. [05:24]
Centrado con Grillas: Para centrar el formulario, se utiliza el sistema de grillas de Bootstrap, creando tres columnas: una vacía (col-md-4) a la izquierda, la columna del formulario (col-md-4) en el centro, y otra vacía (col-md-4) a la derecha. [07:22]
Uso de un Card: El formulario se inserta dentro de un componente Card para darle un look encapsulado y profesional. [04:42]

2. Creación del Formulario (<form> y Input Groups) ⚙️

Dentro del cuerpo del Card, se crea la etiqueta principal del formulario con las siguientes configuraciones clave:

Método de Envío: Se define el method="POST" para enviar los datos de forma segura (invisible en la URL). [08:28]
Campos del Formulario: Todos los campos utilizan la clase form-control de Bootstrap para su estilo:
- Nombre: Campo de texto simple. [08:53]
- Correo Electrónico: Se utiliza el type="email" para asegurar que el navegador realice una validación básica del formato del correo. [11:11]
- Mensaje: Se utiliza el elemento textarea en lugar de un input para permitir mensajes de varias líneas. [12:16]
Botón de Envío: El botón de tipo submit se estiliza como btn btn-primary y se le da un tamaño grande (btn-lg) para que sea visible. [14:15]

Con esta lección, la página principal estática (index.html) queda completamente terminada. El próximo video se centrará en la parte administrativa del sistema.

Hilari Web