453 lines
No EOL
18 KiB
HTML
453 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang=en data-bs-theme=dark>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
|
<title>Questionnaire Example</title>
|
|
<link rel=stylesheet type=text/css
|
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
|
</head>
|
|
<body>
|
|
<h1 class=visually-hidden>Questionnaire Example</h1>
|
|
<main class=container>
|
|
<form class=py-5 action=# method=post>
|
|
<fieldset>
|
|
<legend>How old are you?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Gender</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 text gender -->
|
|
<div class=mb-3>
|
|
<label class="form-label group-gender"
|
|
for=group-gender-pleasespecify>Please specify</label>
|
|
<input class=form-control id=group-gender-pleasespecify type=text
|
|
name=group-gender>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>How many hours per day, on average, do you spend browsing the internet?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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 -->
|
|
<div class=form-check>
|
|
<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>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>What are your favorite brands?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-brands" for=group-brands-branda>
|
|
<input class=form-check-input type=checkbox name=group-brands
|
|
value=brand-a id=group-brands-branda> Brand A</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-brands" for=group-brands-brandb>
|
|
<input class=form-check-input type=checkbox name=group-brands
|
|
value=brand-b id=group-brands-brandb> Brand B</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-brands" for=group-brands-brandc>
|
|
<input class=form-check-input type=checkbox name=group-brands
|
|
value=brand-c id=group-brands-brandc> Brand C</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-brands" for=group-brands-none>
|
|
<input class=form-check-input type=checkbox name=group-brands
|
|
value=none id=group-brands-none> None</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-brands" for=group-brands-other>
|
|
<input class=form-check-input type=checkbox name=group-brands
|
|
value=other id=group-brands-other> Other</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CTRL text brands -->
|
|
<div class=mb-3>
|
|
<label class="form-label group-brands"
|
|
for=group-brands-pleasespecify>Please specify</label>
|
|
<input class=form-control id=group-brands-pleasespecify type=text
|
|
name=group-brands>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>How often do you shop online?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-shopping"
|
|
for=group-shopping-daily>
|
|
<input class=form-check-input type=radio name=group-shopping
|
|
value=daily id=group-shopping-daily> Daily</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-shopping"
|
|
for=group-shopping-weekly>
|
|
<input class=form-check-input type=radio name=group-shopping
|
|
value=weekly id=group-shopping-weekly> Weekly</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-shopping"
|
|
for=group-shopping-monthly>
|
|
<input class=form-check-input type=radio name=group-shopping
|
|
value=monthly id=group-shopping-monthly> Monthly</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-shopping"
|
|
for=group-shopping-rarely>
|
|
<input class=form-check-input type=radio name=group-shopping
|
|
value=rarely id=group-shopping-rarely> Rarely</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-shopping"
|
|
for=group-shopping-never>
|
|
<input class=form-check-input type=radio name=group-shopping
|
|
value=never id=group-shopping-never> Never</label>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Which of the following devices do you own?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-devices"
|
|
for=group-devices-smartphone>
|
|
<input class=form-check-input type=checkbox name=group-devices
|
|
value=smartphone id=group-devices-smartphone> Smartphone</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-devices"
|
|
for=group-devices-laptoppc>
|
|
<input class=form-check-input type=checkbox name=group-devices
|
|
value=laptop/pc id=group-devices-laptoppc> Laptop/PC</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-devices"
|
|
for=group-devices-tablet>
|
|
<input class=form-check-input type=checkbox name=group-devices
|
|
value=tablet id=group-devices-tablet> Tablet</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-devices"
|
|
for=group-devices-smartwatch>
|
|
<input class=form-check-input type=checkbox name=group-devices
|
|
value=smartwatch id=group-devices-smartwatch> Smartwatch</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-devices" for=group-devices-none>
|
|
<input class=form-check-input type=checkbox name=group-devices
|
|
value=none id=group-devices-none> None</label>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>What is your preferred method of payment for online purchases?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-payment"
|
|
for=group-payment-creditdebitcard>
|
|
<input class=form-check-input type=radio name=group-payment
|
|
value=credit/debit-card id=group-payment-creditdebitcard> Credit/Debit Card</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-payment"
|
|
for=group-payment-paypal>
|
|
<input class=form-check-input type=radio name=group-payment
|
|
value=paypal id=group-payment-paypal> PayPal</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-payment"
|
|
for=group-payment-banktransfer>
|
|
<input class=form-check-input type=radio name=group-payment
|
|
value=bank-transfer id=group-payment-banktransfer> Bank Transfer</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-payment"
|
|
for=group-payment-cashondelivery>
|
|
<input class=form-check-input type=radio name=group-payment
|
|
value=cash-on-delivery id=group-payment-cashondelivery> Cash on Delivery</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-payment"
|
|
for=group-payment-cryptocurrency>
|
|
<input class=form-check-input type=radio name=group-payment
|
|
value=cryptocurrency id=group-payment-cryptocurrency> Cryptocurrency</label>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Which social media platforms do you use regularly?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-facebook>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=facebook id=group-socialmedia-facebook> Facebook</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-twitter>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=twitter id=group-socialmedia-twitter> Twitter</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-instagram>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=instagram id=group-socialmedia-instagram> Instagram</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-linkedin>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=linkedin id=group-socialmedia-linkedin> LinkedIn</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-tiktok>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=tiktok id=group-socialmedia-tiktok> TikTok</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-none>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=none id=group-socialmedia-none> None</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-socialmedia"
|
|
for=group-socialmedia-other>
|
|
<input class=form-check-input type=checkbox name=group-socialmedia
|
|
value=other id=group-socialmedia-other> Other</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CTRL text socialmedia -->
|
|
<div class=mb-3>
|
|
<label class="form-label group-socialmedia"
|
|
for=group-socialmedia-pleasespecify>Please specify</label>
|
|
<input class=form-control id=group-socialmedia-pleasespecify
|
|
type=text name=group-socialmedia>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>How do you usually consume news?</legend>
|
|
<ol style="list-style-type: none">
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-newsconsumption"
|
|
for=group-newsconsumption-onlinenewswebsites>
|
|
<input class=form-check-input type=radio name=group-newsconsumption
|
|
value=online-news-websites
|
|
id=group-newsconsumption-onlinenewswebsites> Online News Websites</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-newsconsumption"
|
|
for=group-newsconsumption-socialmedia>
|
|
<input class=form-check-input type=radio name=group-newsconsumption
|
|
value=social-media id=group-newsconsumption-socialmedia> Social Media</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-newsconsumption"
|
|
for=group-newsconsumption-television>
|
|
<input class=form-check-input type=radio name=group-newsconsumption
|
|
value=television id=group-newsconsumption-television> Television</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-newsconsumption"
|
|
for=group-newsconsumption-newspapersmagazines>
|
|
<input class=form-check-input type=radio name=group-newsconsumption
|
|
value=newspapers/magazines
|
|
id=group-newsconsumption-newspapersmagazines> Newspapers/Magazines</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-newsconsumption"
|
|
for=group-newsconsumption-radio>
|
|
<input class=form-check-input type=radio name=group-newsconsumption
|
|
value=radio id=group-newsconsumption-radio> Radio</label>
|
|
</div>
|
|
<li>
|
|
<!-- FORM/CHECKABLE -->
|
|
<div class=form-check>
|
|
<label class="form-check-label group-newsconsumption"
|
|
for=group-newsconsumption-none>
|
|
<input class=form-check-input type=radio name=group-newsconsumption
|
|
value=none id=group-newsconsumption-none> None</label>
|
|
</div>
|
|
</ol>
|
|
</fieldset>
|
|
<button class="btn btn-primary" type=submit>Submit</button>
|
|
</form>
|
|
</main>
|
|
<script
|
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
|
</body>
|
|
</html> |