Form i added stopped forms before

Tell us what’s happening:
How come when I added the strain choice from it stopped showing the other forms I had name and email? thank you in advance
Your code so far

Tell me about music

This is a survey where you can tell us about the music you're inspired by

placeholder="First Name"


<select id="dropdown" name="Cannabis">
  <option value="gelato">Gelato</option>
  <option value="og">OG</option>
  <option value="wedding cake">Wedding cake</option>
  <option value="grandfaddy purple">Granddaddy Purple</option>
</select>

<input type="submit">
</from>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

We really can’t help much if we can’t see your project code. Please put it in codepen or something similar and provide us a link.

But…I do see that your closing form tag is </from> instead of </form>.

Tell us what’s happening:
Why are the first forms disappearing when I started on the later forms?
Your code so far

<!DOCTYPE html>
<head>
<style>
body {
  font-family: sans-serif;
  padding-left: 20%;
  padding-right: 20%;

}
label {
  font-size: 18px;
  display: block;
  padding-bottom:  10px;
}
input, textarea, select {
  display: block;
  width: 100%;
  padding-bottom: 20px;
}

form {
  background-color: #6E0AB2;
  padding: 40px 40px 40px 40px;
}
#radio-button-area {
  float: left;
  width: 50%;
  height: 50%;

}

.radio-inline {

}
</style>
</head>

<body>
  <h1 id="titile">Tell me about music</h1>
  <p id="description">
      This is a survey where you can tell us about the music you're inspired by
</p>
    <form id="survey-from">
    <label id="name-label>Name</label>
    <input type="text" name="name" id="name" required> placeholder="First Name"<br>
    <label id="email-label>Email: </label>
    <input type="email" name="email" id="email" required placeholder="Best Email"><br>
    <label id="number-label>Number</label>
    <input type="number" name="number" id="number" min="0" max="10" required placeholder="$"><br>

  <label id="strain-type-label>strain type</label>
    <select id="dropdown" name="Cannabis">
      <option value="gelato">Gelato</option>
      <option value="og">OG</option>
      <option value="wedding cake">Wedding cake</option>
      <option value="granddaddy purple">Granddaddy Purple</option>
    </select>
    <label id="additional-comments-label>additonal comments</label>
    <textarea placeholder="additional comments"></textarea>
<br>
<div id="button-area">
    <label id="gender-label>Gender</label>
    <input type="radio" id="male" class="radio-inline"name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" class="radio-inline"name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" class="radio-inline"name="gender" value="other">
    <label for="other">Other</label>
  </div>
<br>
<div id="button-area">
    <label id="transportation-type-label>transportation typer</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
</div>

    <input type="submit" id="submit">
    </from>
<script type="text/javascript" src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

First obvious issue I see:

</from> should be </form>

UPDATE: I see now that this was a duplicate. At least I am consistent in my answer :slight_smile:

Hi @omoiyari23 !

I moved your latest post over here since it is dealing with the same project and question.

You will get more responses to your post if you share a link to your codepen so we can see what is happening.

Right now, I am not entirely sure what your question is. It would be better if you showed us the issue.

Thanks!

what do you mean with this? I don’t understand what’s happening

Like the others, I am a little confused what you mean here. When asking a question, assume that we don’t know what you added when and weren’t watching over your shoulder while you built it.

I think you mean adding the strain pulldown menu, and that broke your code.

I find a repeated error in your code in the label elements, like this:

   <label id="additional-comments-label>additonal comments</label>

Notice that there is a quote missing at the end of the id. This breaks the rest of the page. This is error is repeated everywhere you have a label with an id. I assume it was a cut and paste error - it happens in seven places.

If you have a good code editor, the different semantic colorings should give it away. What editor are you using?

In any case, that seems to fix the error and the get the forms working again.

And it’s kind of a BS question - everyone knows Wedding Cake is the best. :wink: I’d be enjoying some now, but they were out so I’m trying out some GSC.

In any case, that should get you going again. Does that make sense? Does that solve your issue?

here is the link https://omoiyari23.github.io/survey_form/

I threw your code into codepen and fixed all of the errors that @kevinSmith and @bbsmooth mentioned and got this result.

I would also personally remove the br tags and wrap the labels around the inputs.

 <label id="name-label">Name
    <input placeholder="Ex. John Doe" type="text" name="name" id="name" required>
</label>

Let us know if you have questions on how to fix the syntax errors.
Hope that helps!

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