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
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
});
Hint
Step 1: Create the form structure using the
<form>
tag.Step 2: Add a
<button>
element withtype="submit"
to allow feedback submission.
index.html
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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 -->
<form 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 -->
<button type="submit">Submit</button>
</form>
<!-- The script is added only for the demonstration purpose -->
<script src="index.js"></script>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
});
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 4. Luku 4
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme