Challenge: Building a Web Form
Task
Create an HTML form to gather user feedback. Prompt users to input their names and comments. In this exercise, we'll include the JavaScript script for demonstration purposes only. Upon completion, you should be able to input and submit feedback form data, which will then be displayed in the browser window.
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();
});
Everything was clear?
Thanks for your feedback!
Section 4. Chapter 4
