Diseño de un formulario - www.microcontrolador.net

Ejemplo 1: Crear un formulario sencillo que lea los datos del alumno y los muestre sin usar alert.

Archivo: index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario Alumno</title>
</head>
<body>
    <h1>Formulario de Alumno</h1>
    <form id="formAlumno">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre"><br><br>

        <label for="apellido">Apellido:</label>
        <input type="text" id="apellido" name="apellido"><br><br>

        <label for="dni">Documento (DNI/NIE):</label>
        <input type="text" id="dni" name="dni"><br><br>

        <label for="edad">Edad:</label>
        <input type="number" id="edad" name="edad"><br><br>

        <label for="direccion">Dirección:</label>
        <input type="text" id="direccion" name="direccion"><br><br>

        <label for="telefono">Teléfono:</label>
        <input type="text" id="telefono" name="telefono"><br><br>

        <label for="grado">Grado:</label>
        <select id="grado" name="grado">
            <option value="Primaria">Primaria</option>
            <option value="Secundaria">Secundaria</option>
            <option value="Universidad">Universidad</option>
        </select><br><br>

        <button type="button" id="submitBtn">Enviar</button>
    </form>
    <h2>Datos del Alumno:</h2>
    <div id="resultado"></div>

    <script src="main.js"></script>
</body>
</html>

Archivo: main.js

// Selección de elementos del DOM
const form = document.getElementById('formAlumno');
const resultado = document.getElementById('resultado');
const submitBtn = document.getElementById('submitBtn');

// Manejar el evento del botón "Enviar"
submitBtn.addEventListener('click', () => {
    // Recuperar los valores de los campos del formulario
    const nombre = document.getElementById('nombre').value;
    const apellido = document.getElementById('apellido').value;
    const dni = document.getElementById('dni').value;
    const edad = document.getElementById('edad').value;
    const direccion = document.getElementById('direccion').value;
    const telefono = document.getElementById('telefono').value;
    const grado = document.getElementById('grado').value;

    // Mostrar los datos en el div de resultados
    resultado.innerHTML = `
        <p><strong>Nombre:</strong> ${nombre}</p>
        <p><strong>Apellido:</strong> ${apellido}</p>
        <p><strong>Documento:</strong> ${dni}</p>
        <p><strong>Edad:</strong> ${edad}</p>
        <p><strong>Dirección:</strong> ${direccion}</p>
        <p><strong>Teléfono:</strong> ${telefono}</p>
        <p><strong>Grado:</strong> ${grado}</p>
    `;
});

Explicación del Código:

Formulario en index.html:

Contiene los campos solicitados: nombre, apellido, documento, edad, dirección, teléfono, y grado.
Un botón «Enviar» con tipo button para evitar el comportamiento predeterminado de recargar la página.

JavaScript en main.js:

Utiliza addEventListener para escuchar el clic del botón.
Recupera los valores de los campos usando document.getElementById('campo').value.
Inserta el resultado en el elemento <div id="resultado"> utilizando innerHTML.

Sin alert:

Los datos se muestran directamente en la página dentro del div resultado.

Puede que también te guste...

Cómo instalar API para JavaScript

Operador => en JavaScript

Testing JavaScript Program

Deja una respuesta Cancelar la respuesta