2024-01-27 14:41:21 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang=en data-bs-theme=dark>
|
2023-11-09 17:56:37 +01:00
|
|
|
<head>
|
2024-01-27 14:41:21 +01:00
|
|
|
<meta charset=utf-8>
|
|
|
|
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
|
|
|
|
<title>Questionnaire Example</title>
|
2023-11-09 17:56:37 +01:00
|
|
|
<link rel=stylesheet type=text/css
|
2024-01-27 14:41:21 +01:00
|
|
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
2023-11-09 17:56:37 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-01-27 14:41:21 +01:00
|
|
|
<h1 class=visually-hidden>Questionnaire Example</h1>
|
|
|
|
|
<main class=container>
|
|
|
|
|
<form class=py-5 action=/submit method=post>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>How old are you?</legend>
|
|
|
|
|
<ol>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-age" for=group-age-1824>
|
|
|
|
|
<input class=form-check-input type=radio name=group-age value=18-24
|
|
|
|
|
id=group-age-1824> 18-24</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-age" for=group-age-2534>
|
|
|
|
|
<input class=form-check-input type=radio name=group-age value=25-34
|
|
|
|
|
id=group-age-2534> 25-34</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-age" for=group-age-3544>
|
|
|
|
|
<input class=form-check-input type=radio name=group-age value=35-44
|
|
|
|
|
id=group-age-3544> 35-44</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-age" for=group-age-4554>
|
|
|
|
|
<input class=form-check-input type=radio name=group-age value=45-54
|
|
|
|
|
id=group-age-4554> 45-54</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-age" for=group-age-55>
|
|
|
|
|
<input class=form-check-input type=radio name=group-age value=55+
|
|
|
|
|
id=group-age-55> 55+</label>
|
|
|
|
|
</div>
|
|
|
|
|
</ol>
|
|
|
|
|
<hr class=my-4>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Gender</legend>
|
|
|
|
|
<ol>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-gender" for=group-gender-male>
|
|
|
|
|
<input class=form-check-input type=radio name=group-gender
|
|
|
|
|
value=male id=group-gender-male> Male</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-gender" for=group-gender-female>
|
|
|
|
|
<input class=form-check-input type=radio name=group-gender
|
|
|
|
|
value=female id=group-gender-female> Female</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-gender"
|
|
|
|
|
for=group-gender-nonbinary>
|
|
|
|
|
<input class=form-check-input type=radio name=group-gender
|
|
|
|
|
value=non-binary id=group-gender-nonbinary> Non-binary</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-gender"
|
|
|
|
|
for=group-gender-prefernottosay>
|
|
|
|
|
<input class=form-check-input type=radio name=group-gender
|
|
|
|
|
value=prefer-not-to-say id=group-gender-prefernottosay> Prefer not to say</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-gender" for=group-gender-other>
|
|
|
|
|
<input class=form-check-input type=radio name=group-gender
|
|
|
|
|
value=other id=group-gender-other> Other</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CTRL -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=mb-3>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-label group-gender" for=group-gender-other>Other</label>
|
|
|
|
|
<input class=form-control id=group-gender-other type=text
|
|
|
|
|
name=group-gender>
|
|
|
|
|
</div>
|
|
|
|
|
</ol>
|
|
|
|
|
<hr class=my-4>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>How many hours per day, on average, do you spend browsing the internet?</legend>
|
|
|
|
|
<ol>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-webbrowsing"
|
|
|
|
|
for=group-webbrowsing-lessthan1hour>
|
|
|
|
|
<input class=form-check-input type=radio name=group-webbrowsing
|
|
|
|
|
value=less-than-1-hour id=group-webbrowsing-lessthan1hour> Less than 1 hour</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-webbrowsing"
|
|
|
|
|
for=group-webbrowsing-13hours>
|
|
|
|
|
<input class=form-check-input type=radio name=group-webbrowsing
|
|
|
|
|
value=1-3-hours id=group-webbrowsing-13hours> 1-3 hours</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-webbrowsing"
|
|
|
|
|
for=group-webbrowsing-35hours>
|
|
|
|
|
<input class=form-check-input type=radio name=group-webbrowsing
|
|
|
|
|
value=3-5-hours id=group-webbrowsing-35hours> 3-5 hours</label>
|
|
|
|
|
</div>
|
|
|
|
|
<li>
|
|
|
|
|
<!-- FORM/CHECKABLE -->
|
2023-11-09 17:56:37 +01:00
|
|
|
<div class=form-check>
|
2024-01-27 14:41:21 +01:00
|
|
|
<label class="form-check-label group-webbrowsing"
|
|
|
|
|
for=group-webbrowsing-5hours>
|
|
|
|
|
<input class=form-check-input type=radio name=group-webbrowsing
|
|
|
|
|
value=5+-hours id=group-webbrowsing-5hours> 5+ hours</label>
|
|
|
|
|
</div>
|
|
|
|
|
</ol>
|
|
|
|
|
<hr class=my-4>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<button class="btn btn-primary" type=submit>Submit</button>
|
|
|
|
|
</form>
|
|
|
|
|
</main>
|
2023-11-09 17:56:37 +01:00
|
|
|
<script
|
2024-01-27 14:41:21 +01:00
|
|
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
2023-11-09 17:56:37 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
