Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
I want to know why my paragraph “What will your project be” isn’t showing

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css" />
  <title>Zeraldo Musical Instruments</title>
  <body>
    <h1 id="title">Zeraldo Musical Instruments</h1>
    <p id="description">Luthier looking for projects!</p>
    <form id="survey-form">
     <fieldset>
       <label class="project-title">Enter your information and explain your project!</label> 
       <label id="name-label">Name: <input placeholder="Jennifer" id="name" type="text" required>
      <label id="email-label">Email: <input placeholder="Jennifer122333@gmail.com" id="email" type="email" required></label>
      <label id="number-label">Age: <input placeholder="18" id="number" type="number" min="18" max="110"></label>
     <Label>Where will your project be?<select id="dropdown"></label>
        <option>-Select-</option>
        <option>Guitar</option>
        <option>Violin</option>
        <option>Electric guitar</option>
        <option>Bass</option>
        <option>Banjo</option>
        <option>Other</option>
    <p>What will your project be?</p>
       <label><input type="radio" name="1" value="Table">Guitar</label>
       <label><input type="radio" name="1" value="Chair">Electric guitar</label>
       <label><input type="radio" name="1" value="Desk">Violin</label>
       <label><input type="radio" name="1" value="TV">Bass</label>
       <label><input type="radio" name="1" value="Cabinet">Banjo</label>
       
       <label>Other<input placeholder="Enter type"></label>
      <label>Wood<input type="checkbox" value="1"></label>
      <label>Metal<input type="checkbox" value="2"></label>
      <label>Project details:</label>
      <label id="project-details"><textarea placeholder="Tell me about your ideia..." rows="5" cols="50"></textarea></label>
      <input id="submit" type="submit">
      </fieldset>
    </form>
    </body>
  </html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://images.unsplash.com/photo-1655569614970-67d5579f1c60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80);
  font-family: 'Poppins', sans-serif;
  color: white
}

form {
  
}


h1, p {
  margin: 1em auto;
  text-align: center;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

The select element needs both an opening and closing tag.

Also, you can’t put an opening select tag inside of a label element like that.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.