Hello how are you? So I am working on the first certification project, ‘Build a survey form’, and here is my code so far, I just started my checkboxes. I am not done with them, but I did the first few so I would learn the syntax of this, and I’ll continue with them later. Somehow the help button is not letting me type anything alongside sharing my code, but here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="survey" content="Mercury Airlines satisfaction survey">
<meta name="keywords" content="satisfaction survey, Mercury Airlines, travel, Tourism">
<meta name="author" content="Judith Rekassa">
<title>Are you happy with us?</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
</html>
<h1 id="title">Satisfaction survey for Mercury Airlines.</h1>
<p id="description">How often do you use / how satisfied are you with our airline?</p>
<br>
<hr>
<br>
<form id="survey-form">
<p class="questions">Name (Please write your full name here):</p>
<label id="name-label">
<input id="name" type="text" required placeholder="John Smith"></label>
<p class="questions">Email:</p>
<label id="email-label">
<input id="email" type="email" required placeholder="email@email.com"></label>
<p class="questions">Age (18+only):</p>
<label id="number-label">
<input id="number" type="number" min="18" max="120" placeholder="18"></label>
<label><p class="questions">How often do you fly with us?</p>
<select id="dropdown">
<option value="">(Select one)</option>
<option value="1">This is my first time travelling with you.</option>
<option value="2">Up to twice a year.</option>
<option value="3">Between three and five times a year.</option>
<option value="4">More than five times a year.</option>
</select>
</label>
<br><br>
<fieldset>
<legend class="questions">Are you happy with the services provided by Mercury Airlines? </legend>
<br>
<div class="radio">
<label for="extremely-happy"><input type="radio" name="satisfaction" checked id="extremely-happy" value="extremely-happy"> Extremely happy.</label>
</div>
<div class="radio">
<label for="very-happy"><input type="radio" name="satisfaction" id="very-happy" value="very-happy"> Very happy.</label>
</div>
<div class="radio">
<label for="happy"><input type="radio" name="satisfaction" id="happy" value="happy"> Happy.</label>
</div>
<div class="radio">
<label for="unhappy"><input type="radio" name="satisfaction" id="unhappy" value="unhappy"> Unhappy.</label></div>
<div class="radio">
<label for="extremely-unhappy"><input type="radio" name="satisfaction" id="extremely-unhappy" value="extremely-unhappy"> Extremely unhappy.</label>
</fieldset>
</div>
<br>
<fieldset>
<legend class="questions">How can we improve our service(s)? (Check all that apply).</legend>
<label for="online-check-in"><input type="checkbox" id="online-check-in"/> Easier online check-in.</label>
<label for="in-person-check-in"><input type="checkbox" id="in-person-check-in"/> Easier in-person check-in.</label>
</fieldset>
</form>
</body>
CSS:
body {
background-color: #E0E0E0;
}
#title {
background-color: #00B140;
color: #E0E0E0;
font-family: "Arial Black";
font-size: 22px;
padding: 40px;
text-align: center;
}
#description {
color: #000000;
font-family: "Arial Black";
font-size: 18px;
}
hr {
height: 1px;
background-color: #00B140;
border-color: #00B140;
}
.questions {
color: #000000;
font-family: "Arial Black";
font-size: 14px;
}
#dropdown {
color: #000000;
font-family: "Times New Roman";
font-size: 16px;
}
.layout {
color: #000000;
font-family: "Times New Roman";
font-size: 16px;
}
.radio {
display: flex;
align-items: center;
}
Now this is my question: as you can see, this is a satisfaction survey for a fictional airline. And the question asked that the user can answer by checking certain checkboxes is: ‘How can we improve our service(s)? (Check all that apply).’ My question is, might the form be submitted should a user not check any box? As maybe some airline customers are particularly happy with ‘our’ airline and have nothing to check… I mean, I suppose I could add a checkbox saying ‘All is perfect, thank you!’ that they can check if they are happy with everything the airline does… But otherwise, is there a way to make sure the form could send even if the user didn’t check anything? As so far, I don’t think I added a required attribute to the checkboxes, as I couldn’t exactly require that a certain checkbox is checked by customers if I want to know what the airline could improve… But so yeah, my question is, with this code, could the user submit the form without checking any checkboxes? As I suppose, there is no sense in encouraging customers to give negative feedback on this airline if there are none… And also, regarding the required attribute, I believe we had one in the previous project, ‘Build a registration form’, as the checkbox was for accepting the terms and conditions so the user had to click on that for the registration form to send… But if the checkboxes are multiple choice and I wouldn’t want to force the user to check one, I don’t suppose there is a required attribute that could be used on a multiple choice list of checkboxes, or is there? Thank you… But yeah, my most important question here I guess is ‘Could this form be sent, with the code I have, even if no checkboxes at all are checked’? Thank you! 