Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

My first fieldset isn’t supposed to be turquose. What’s happening here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8"/>
 <title>Survey</title>
 <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <h1 id="title">Survey</h1>
   <p id="description">Hope this survey helps us improve our services! :3</p>
   <form id="survey-form" action="https://survey-form.freecodecamp.rocks"
  <fieldset>
     <label id="name-label" for="name">Name<input id="name" name="name" type="text" placeholder="Your first and last name" required /></label>
     <label id="email-label" for="email">Email<input id="email" name="email" type="email" placeholder="Your email" required /></label>
    <label id="number-label" for="age">Age<input id="number" name="age" type="number" min="16" max="105" placeholder="Your age"/></label>
    </fieldset>
    <fieldset>
      <label for="dropdown">What is your job?
      <select id="dropdown">
        <option value="">select one :3</option>
        <option value="1">Doctor</option>
        <option value="2">Engineer</option>
        <option value="3">Teacher</option>
        <option value="4">Content Creator</option>
        <option value="5">Firefighter</option>
        <option value="6">Police</option>
        <option value="7">Manager</option>
        <option value="8">Others...</option>
        <option value="9">No job :(</option>
      </select>
      </label>
      </fieldset>
    </form>
    </body>
    </html>

/* file: styles.css */
body { 
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #f5e8e1;
  color: #b7917b;
  font-family: verdana;
  font-size: 16px;
}
h1, p { 
  margin: 1em auto;
  text-align: center
}
form { 
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}
fieldset { 
border: none;
padding: 2rem 0;
border-bottom: 2px solid #b7917b;
}
fieldset:last-of-type {
  border-bottom: none;
}
label{ 
  display: block;
  margin: 1rem 0;
}
input, textarea, select { 
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
input, textarea {
  background-color: #caa795;
  border: 1px solid #b7917b;
  color: #ffffff;
}

.inline { 
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #caa795;
  border-color: #b7917b;
  min-width: 300px;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hii Buddy, Can you tell us in which part of your code are you facing trouble ?

Or can you tell us Your Problem in your own words

4

how do i show the part when commenting?

5

Hi @kerem

To which colour do you refer?

image
image538×468 7.03 KB

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

6

You need to close the form opening tag. It’s missing >bracket .

1 Like
7

sorry, i forgot that the color changes in forum.
it was the blue fieldset, but hasanzaib1389 already replied, but thanks for the
help

1 Like