■ GUÍA COMPLETA — Crear un formulario con
JavaScript dentro del INDEX
Por: Profesora Nadia ■
■ Objetivo: Aprender a crear un formulario dentro del mismo archivo `[Link]`, aplicarle
estilo con CSS y hacerlo funcional con JavaScript. Este ejercicio enseña cómo integrar varias
tecnologías web en una sola página.
■ PASO 1 — Estructura del HTML
1■■ Abre tu archivo `[Link]`. Justo antes de la etiqueta ``, agrega la siguiente sección
para incluir el formulario dentro de la página:
<!-- ■ NUEVA SECCIÓN DE CONTACTO -->
<section class="contacto">
<h2>■ Contáctanos</h2>
<form id="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" placeholder="Escribe tu nombre">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" placeholder="ejemplo@[Link]">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" placeholder="Escribe tu mensaje aquí..."></textarea>
<button type="button" id="enviar">Enviar</button>
</form>
<p id="resultado"></p>
</section>
<!-- Debajo de esto cierra tu main -->
</main>
<script src="[Link]"></script>
</body>
</html>
■ Este código crea la estructura básica del formulario dentro de la misma página. Incluye un
título, tres campos y un botón. El script se enlaza al final para manejar las acciones.
■ PASO 2 — Dar estilo al formulario con CSS
Crea o edita tu archivo `[Link]` y agrega al final los siguientes estilos para la nueva sección
de contacto:
.contacto {
background: linear-gradient(to bottom, #015c01, #013a01);
color: #fff;
text-align: center;
padding: 30px 20px;
border-radius: 20px;
width: 80%;
margin: 40px auto;
box-shadow: 0 0 15px rgba(255, 255, 0, 0.4);
}
.contacto h2 {
color: #ffeb3b;
font-size: 2em;
margin-bottom: 20px;
text-shadow: 2px 2px 5px #000;
}
.contacto form {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.contacto input,
.contacto textarea {
width: 80%;
border: none;
border-radius: 10px;
padding: 10px;
font-size: 1em;
}
.contacto button {
background-color: #ffeb3b;
color: #013a01;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.contacto button:hover {
transform: scale(1.1);
background-color: #fff176;
}
#resultado {
margin-top: 10px;
font-weight: bold;
}
■ Este diseño usa colores y bordes suaves para mantener coherencia con el estilo del sitio
*El Comején Blanco*.
■■ PASO 3 — Agregar la lógica con JavaScript
Crea un archivo nuevo llamado `[Link]` y agrega el siguiente código:
[Link]("DOMContentLoaded", function() {
const nombre = [Link]("nombre");
const email = [Link]("email");
const mensaje = [Link]("mensaje");
const boton = [Link]("enviar");
const resultado = [Link]("resultado");
[Link]("click", function() {
let nombreValor = [Link]();
let emailValor = [Link]();
let mensajeValor = [Link]();
if (nombreValor === "" || emailValor === "" || mensajeValor === "") {
[Link] = "red";
[Link] = "■■ Por favor, completa todos los campos.";
return;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if () {
[Link] = "orange";
[Link] = "■ El correo no es válido.";
return;
}
[Link] = "lightgreen";
[Link] = `■ Gracias ${nombreValor}, tu mensaje fue enviado correctamente.`;
[Link] = "";
[Link] = "";
[Link] = "";
});
});
■ Este código realiza tres tareas principales:
1■■ Verifica que los campos no estén vacíos.
2■■ Comprueba que el correo tenga un formato válido.
3■■ Muestra mensajes dinámicos de error o éxito en la misma página.
■ PASO 4 — Probar el formulario
1■■ Guarda los tres archivos (`[Link]`, `[Link]` y `[Link]`) en la misma carpeta.
2■■ Abre el archivo `[Link]` en tu navegador.
3■■ Completa los campos y haz clic en **Enviar** para ver cómo JavaScript valida los datos
y muestra mensajes dinámicos.
■ ACTIVIDAD FINAL
Crea tu propio formulario con al menos tres campos. Agrega validaciones y un mensaje
personalizado usando JavaScript. Puedes usar los colores y estilos que mejor se adapten al
tema de tu sitio web.