Desafío: Formularios
Tarea
Crea un formulario HTML para recopilar comentarios de los usuarios. Pide a los usuarios que ingresen sus nombres y comentarios. En este ejercicio, incluiremos el script de JavaScript solo con fines de demostración. Al completar, deberías poder ingresar y enviar datos del formulario de comentarios, que luego se mostrarán en la ventana del navegador.
index.html
index.js
<!DOCTYPE html>
<html>
<head>
<title>User Feedback Form</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>User Feedback Form</h1>
<!-- Step 1: Create the form structure -->
<_____ onsubmit="return false">
<label for="name-field">Name:</label>
<input type="text" id="name-field" name="name" placeholder="Your name" required /><br />
<label for="comments-field">Comments:</label>
<input type="text" id="comments-field" name="comments" placeholder="Your feedback" required /><br />
<!-- Step 2: Add a submit button -->
<_____ type="_____">Submit</_____>
</_____>
<!-- The script is added only for the demonstration purpose -->
<script src="index.js"></script>
</body>
</html>
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
event.preventDefault();
// Accessing form input values
const nameInput = form.elements["name"].value;
const commentsInput = form.elements["comments"].value;
// Displaying form input values in an alert
alert("Name: " + nameInput + "\nComments: " + commentsInput);
// Clearing form fields
form.reset();
});
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 4. Capítulo 4
