Below you can look on source code. It is implemented in two files:
Index.html
<html>
<head>
<meta charset="UTF-8">
<title>Dawid Andrejczuk</title>
<link href="styles.css" rel="stylesheet" media="all" />
</head>
<body>
<h1>Data collector for task 2</h1>
<form>
<section class="row">
<div class="column-1" style="background-color:red;">
<h2>Name:</h2>
<input type="text" name="name">
</div>
<div class="column-1" style="background-color:blue;">
<h2>Surname:</h2>
<input type="text" name="surname">
</div>
</section>
<section class="row">
<div class="column-2" style="background-color:green;">
<h2>Age:</h2>
<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>
</div>
<div class="column-2" style="background-color:brown;">
<h2>Sex:</h2>
<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>
</div>
<div class="column-2" style="background-color:purple;">
<h2>Hobby:</h2>
<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>
</div>
</section>
<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>
styles.css
.column-1 {
float: left;
width:50%;
}
.column-2 {
float: left;
width:33.3333%;
}
.row {
width:100%;
display: inline-flex;
flex-wrap: wrap;
}
On next page you can check demo version.