Below you can look on source code. It is implemented in one file:
Index.html
<html>
<head>
<meta charset="UTF-8">
<title>Dawid Andrejczuk</title>
</head>
<body>
<h1>Data collector for task 1</h1>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" name="surname"></td>
</tr>
<tr>
<td>Age:</td>
<td>
<select name="age">
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female<br>
<input type="radio" name="sex" value="unrecognize"> Gender<br>
</td>
</tr>
<tr>
<td>Hobby:</td>
<td>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="swimming"> Swimming<br>
<input type="checkbox" name="hobby" value="cooking"> Cooking<br>
<input type="checkbox" name="hobby" value="trading"> Trading<br>
<input type="checkbox" name="hobby" value="programing"> Programing<br>
</td>
</tr>
</table>
<input type="submit" value="OK" onclick="displayData()">
<input type="button" value="Cancel">
</form>
<script>
function displayData() {
var name = document.getElementsByName("name")[0].value;
var surname = document.getElementsByName("surname")[0].value;
var age = document.getElementsByName("age")[0].value;
var sex = document.querySelector('input[name="sex"]:checked').value;
var hobbies = document.getElementsByName("hobby");
var selectedHobbies = "";
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked) {
selectedHobbies += hobbies[i].value + ", ";
}
}
selectedHobbies = selectedHobbies.slice(0, -2);
var popupData = "Name: " + name + "\nSurname: " + surname + "\nAge: " + age + "\nSex: " + sex + "\nHobbies: " + selectedHobbies;
alert(popupData);
}
</script>
</body>
</html>
On next page you can check demo version.