Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

The test request me to create and #name input and an #email input. I did it but the tests tell me it´s wrong. Can somebody help me? I think is a page error.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang=en>
  <head>
    <meta charset="UTF-8">
    <title>Karate course 2025</title>
    <link rel="stylesheet" href="styles.css" />
  <head>
  <body>
    <h1 class="title" id="title">Karate course 2025
    </h1>
    <p id="description" class="title">
      Registration for new     enrollment for the 2025 academic year!</p>
<form id="survey-form" >
  <fieldset class="survey">
    <legend>Personal data</legend>
<label for="name" id="name-label" class="label"> First name
<input type="text" id="name" placeholder="My name is..." >
</label>
<label for="number" class="label" id="number-label"> How old are you?
  <input type="number" id="number" min="18" max="80" placeholder="Age...">
  </label>
<label for="email" id="email-label" class="label">
  What's your email?
  <input id="email" type="email" placeholder="email...">
  </label>
  </fieldset>
  <fieldset class="time">
  <label class="dropdown" for="dropdown" id="dropdown-label">What time do you prefer to do the practices?
<select name="time" id="dropdown">
  <option value="">--Please choose an option--</option>
  <option value="only on weekends">Only on weekends</option>
  <option value="Mondays & Wednesdays">Mondays & Wednesdays</option>
  <option value="Tuesdays & Thursdays">Tuesdays & Thursdays</option>
  </select>
  </fieldset>
  <fieldset>
    <legend>Have you trained martial arts before?</legend>
  <label class="radio" for="trained-martial-arts" id="label-experience">Yes<input type="radio" name="experience-type" id="trained-martial-arts" value="Yes">
  <label class="radio" for="not-trained-martial-arts" id="label-experience2">No<input type="radio" id="not-trained-martial-arts" name="experience-type" value="no">
  </fieldset>
  <fieldset>
    <legend>What do you hope to achieve in this course</legend>
    <label for="goals" id="label-goals">
    <textarea id="goals" placeholder="I hope..." name="goals" cols="30" Rows="4"></textarea>
    </label>
    <label for="conditions" id="conditions-label">
      <p class="check">I agree that my data may be processed by the company</p>
      <input class="checkbox" type="checkbox" required name="conditions" id="conditions"
      value="conditions">
    </label>
    <fieldset class="checkbox2">
    <label for="advertising" id="advertising-label">I agree to receive company promotions to my email address.
      <input type="checkbox" name="advertising" id="advertising" value="advertising">
      </label>
    <label for="submit" id="submit-label">
      <input type="submit" id="submit" value="submit">
      </label>

/* file: styles.css */
.title {
  text-align: center;
  margin-bottom: 25px;
}

h1 {
  font-family: Arial;
}

p {
  font-family: Verdana;
}

body {
background-color: #88B898;
}

input {
  margin-left:5px;
}

fieldset {
  border: none;
   border-top: 2px solid rgba(6, 54, 44, 0.467);
   margin-top: 20px
}

.label {
  margin-top: 20px;
  display: block;
}

select {
  margin-top: 20px;
}

legend {
  font-family: fantasy;
  margin-bottom: 20px;
  margin-top: 40px;
}

.radio {
margin-left: 25%;
}
.checkbox {
  margin-left: 50%;
}

.check {
  border-top: solid black;
  margin-top: 80px;
  margin-left: 20%;
  margin-right: 20%
}

input[type="submit"] {
  display: block;
  margin-left: 47%;
  margin-top: 45px;
}

.time {
  margin-top: 0px;
  border: none;
}

.checkbox2 {
  margin-left: 25%;
  margin-right: 25%;
  border: none;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

what does the failed test say exactly?

1 Like
3

Says " 8. Your #name should require input." and " 12. Your #email should require input."

4

Hi,
Are your name and email requiring inputs? Like, what if the user doesn’t fill those fields? You have to make sure they fill the name and email by adding some attribute there, right?

1 Like
5

Ah ok I understand it now, it’s mean that i have to add the atribute “required” to both options. Thank you so much.

1 Like