EJERCICIO BASICO - FORMULARIO
Cómo implementarlo en
VS Code:
- Abre VS Code.
- Crea una nueva carpeta para tu proyecto
(ej. mi-formulario).
- Dentro de esa carpeta, crea dos archivos:
- formulario.html
- estilos.css
- Copia el código HTML en formulario.html.
- Copia el código CSS en estilos.css.
- Guarda ambos archivos.
- Puedes abrir formulario.html directamente
en tu navegador web (haz clic derecho en el archivo en el explorador de VS
Code y selecciona "Open with Live Server" si tienes la
extensión, o "Copy Path" y pégalo en la barra de direcciones de
tu navegador).
Puedes copiar y pegar esto directamente en
archivos .html y .css en VS Code.
1. Archivo HTML (por
ejemplo, formulario.html):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario Básico</title>
<link rel="stylesheet" href="estilos.css"> <!-- Enlazamos el archivo CSS -->
</head>
<body>
<div class="contenedor-formulario">
<h1>Formulario de Contacto</h1>
<form action="/enviar-datos" method="POST">
<!--
<form action="https://edutechsiglo21.com/2025/procesar_formulario.php" method="POST">
-->
<!-- Campo Nombre -->
<div class="grupo-formulario">
<label for="nombre">Nombre Completo:</label>
<input type="text" id="nombre" name="nombre_usuario" required>
</div>
<!-- Campo Email -->
<div class="grupo-formulario">
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email_usuario" required>
</div>
<!-- Campo Asunto -->
<div class="grupo-formulario">
<label for="asunto">Asunto:</label>
<input type="text" id="asunto" name="asunto_mensaje">
</div>
<!-- Campo Mensaje -->
<div class="grupo-formulario">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje_usuario" rows="5" required></textarea>
</div>
<!-- Botón de Envío -->
<div class="grupo-formulario">
<button type="submit">Enviar Mensaje</button>
</div>
</form>
</div>
</body>
</html>
2. Archivo CSS (por
ejemplo, estilos.css, en la misma carpeta que formulario.html):
/* Estilos generales para el cuerpo de la página */
body {
font-family: Arial, sans-serif; /* Tipo de fuente agradable */
background-color: #f4f4f4; /* Color de fondo suave */
display: flex; /* Para centrar el formulario */
justify-content: center;
align-items: center;
min-height: 100vh; /* Asegura que ocupe al menos toda la altura de la ventana */
margin: 0;
padding: 20px;
box-sizing: border-box; /* Para que el padding no afecte el ancho total */
}
/* Contenedor principal del formulario */
.contenedor-formulario {
background-color: #ffffff; /* Fondo blanco para el formulario */
padding: 25px;
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
width: 100%;
max-width: 500px; /* Ancho máximo del formulario */
}
/* Título del formulario */
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
/* Estilos para cada grupo de label e input */
.grupo-formulario {
margin-bottom: 15px;
}
.grupo-formulario label {
display: block; /* Hace que la etiqueta ocupe toda la línea */
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
.grupo-formulario input[type="text"],
.grupo-formulario input[type="email"],
.grupo-formulario textarea {
width: 100%; /* Hace que el campo ocupe todo el ancho disponible */
padding: 10px;
border: 1px solid #ddd; /* Borde sutil */
border-radius: 4px;
box-sizing: border-box; /* Para que el padding no afecte el ancho total */
font-size: 16px;
}
.grupo-formulario textarea {
resize: vertical; /* Permite redimensionar solo verticalmente */
}
/* Estilos para el botón de envío */
.grupo-formulario button[type="submit"] {
background-color: #007bff; /* Color de fondo azul */
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer; /* Cambia el cursor al pasar por encima */
font-size: 16px;
width: 100%; /* Botón de ancho completo */
transition: background-color 0.3s ease; /* Transición suave para el hover */
}
.grupo-formulario button[type="submit"]:hover {
background-color: #0056b3; /* Color más oscuro al pasar el ratón */
}
/* Estilos para el foco en los campos (opcional, pero mejora la UX) */
.grupo-formulario input:focus,
.grupo-formulario textarea:focus {
outline: none; /* Quita el borde por defecto del navegador */
border-color: #007bff; /* Cambia el color del borde al enfocar */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
Explicación del Código:
HTML (formulario.html):
- <!DOCTYPE html> y estructura básica: Define el tipo de documento y la estructura
HTML.
- <meta charset="UTF-8">: Asegura la correcta visualización de
caracteres especiales.
- <meta name="viewport"...>: Esencial para el diseño responsivo, para
que la página se vea bien en móviles.
- <link rel="stylesheet"
href="estilos.css">: Enlaza
el archivo CSS externo.
- <div
class="contenedor-formulario">: Un div para agrupar y centrar
todo el formulario.
- <h1>: Título del formulario.
- <form action="/enviar-datos"
method="POST">:
- action="/enviar-datos": Indica que
cuando se envíe el formulario, los datos irán a una URL (ficticia en este
caso) llamada /enviar-datos. En una aplicación real, esta sería la
URL de un script del servidor que procesa los datos.
- method="POST": Los datos se enviarán
de forma oculta.
- <div class="grupo-formulario">: Se usa un div para agrupar
cada label con su input o textarea. Esto ayuda a
aplicar estilos y espaciado.
- <label for="id_del_campo">:
- El atributo for se vincula con
el id del campo de entrada correspondiente. Esto mejora la
accesibilidad y permite que al hacer clic en la etiqueta, el foco se
ponga en el campo.
- <input type="text"
id="nombre" name="nombre_usuario" required>:
- type="text": Campo de texto de una
línea.
- id="nombre": Identificador único para
este elemento (usado por el label).
- name="nombre_usuario": Nombre que se
enviará al servidor para identificar este dato.
- required: Atributo HTML5 que hace que este campo
sea obligatorio.
- <input type="email" ...>: Similar al de texto, pero optimizado para
emails (puede tener validación del navegador).
- <textarea id="mensaje" ...
rows="5">:
- rows="5": Sugiere una altura inicial
para el área de texto (5 líneas).
- <button type="submit">: Crea un botón que, al ser presionado, envía
el formulario.
CSS (estilos.css):
- body: Estilos
básicos para la página, incluyendo centrado del contenido.
- .contenedor-formulario: Estilos para el div que envuelve
el formulario (fondo, padding, sombra, bordes redondeados).
- h1: Estilos
para el título.
- .grupo-formulario: Agrega un margen inferior a cada grupo de
etiqueta/campo.
- .grupo-formulario label: Hace que la etiqueta sea un bloque (ocupe
su propia línea) y le da un poco de estilo.
- .grupo-formulario input[type="text"],
... textarea: Estilos
comunes para los campos de entrada y el textarea (ancho
completo, padding, bordes).
- .grupo-formulario textarea: Permite que el textarea solo se
pueda redimensionar verticalmente.
- .grupo-formulario button[type="submit"]: Estilos para el botón de envío (color,
padding, etc.).
- :hover para el botón: Cambia el color del botón cuando el ratón
pasa por encima.
- :focus para los campos: Mejora la experiencia del usuario al
resaltar el campo que tiene el foco.
