Survey form bug or am I messing something up

I can’t figure out what I’m doing wrong here because I did everything the user stories asked. I doubt I’m supposed to make it look exactly like the example because that would be cheating or am I not supposed to be humorous when making the form?
I know CSS isn’t looking good, but I’m mostly focused on HTML. Also, why do I have an extra textarea and why isn’t the placeholder displaying on the textarea that I want?
A Pen by BrooksDriskill (codepen.io)

You only want one <form> element on your page and then all of the <input>s will go inside that form.

1 Like

If you run the test, and press the red button, It will print out a detailed list of the user stories that were not passed:

Screenshot 2022-03-30 9.30.13 AM

The textarea element accepts content, i.e. it has a start and end tag. So whatever you put between the start and end tags will become the content. You have a bunch of space as the content so you do not see the placeholder text.

Shows the placeholder

<textarea id="comments" class="input-textarea" name="comment" placeholder="Additional Comments"></textarea>

Doesn’t show the placeholder:

<textarea id="comments" class="input-textarea" name="comment" placeholder="Additional Comments"> </textarea>

Hi @BrooksDriskill,

First, what I would advice you to do is to indent well your code. It will help you see things you may not see right now. In CodePen, you can analyze your HTML code:

You don’t need to create many form tags, you only need one, with the content inside. Example:

<form action="">
  <label for="name">
    Name: <input type="text" id="name">
  </label>

  <label for="phone">
    Phone number: <input type="number" id="phone">
  </label>

  <input type="submit" id="submit">
</form>

I saw sometimes that you forget to use "" around the name of your IDs. So, verify each user stories and see why it is not working.

Example with the first error:

  1. Inside the form element, I am required to enter an email in a field with id=“email”. If I do not enter an email I will see an HTML5 validation error. The field with id=“email” is not inside the form element

It means you have it, but, as you have many form elements, it disturbs the test, so if you clean all of them as said above, it should work.

About the textarea, your question is why do you have two of them?

1 Like
  • Just to make it even clearer the thing mentioned by @lasjorg
    Remember to keep the start of the textarea (<textarea>) and the ending of the textarea (</textarea>) close together. For example the following code:
    <textarea id="comments" class="input-textarea" name="comment" placeholder="Additional Comments">RANDOM CHARACTERS</textarea>
    would actually make the textarea be pre-filled with the text “RANDOM CHARACTERS”.
    In your code you have quite a few space-characters between your <textarea> and your </textarea> resulting in the textarea being pre-filled with a lot of spaces (this is what makes the placeholder-text seem to not be doing its work, if you delete everything in your textarea you can actually see your placeholder-text again). I made the same mistake when I did the test too and it took me some time to realize what was wrong.

The reason you have two textareas is because you have you have the code
<textarea></textarea> in 2 places, one is before your p-tag “Any comments?” and the other one is after that p-tag. Removing one of these, should make you only have one in total again.

The code below, should help with the two troubles you mentioned at least. Just in case you want to try to fix it yourself I put it into a little spoiler section. (didn’t see a function for the class=“form-group”, I guessed it was meant to be “form-control”, since you had a style inserted for that, if you wonder why that is different in the code)

Spoiler
<option value="pig farmer" id="dropdown">Barn Animal Feed
  <div class="form-control" id="dropdown"></div>

    <div class="form-control" id="dropdown">
   <p>Any comments or suggestions?</p>
    <label for="comments">
      <textarea id="comments" class="input-textarea" name="comment" placeholder="Additional Comments"></textarea>
   </label>
    </div>

PS. While humor may be banned (thank you @ALLESS for pointing that out), they luckily forgot to ban humour on freeCodeCamp. So keep it British and you should be ok :wink:

Just don’t use the British words in CSS or JS as they may in fact be “banned”, i.e. they might not work.

But that is a little random, gray and grey both work as the value but colour doesn’t work as the property.

Keeping it British: :face_with_monocle: & :teapot:

That and why I can’t put placeholder text in it, despite putting a placeholder= in two places.

I’m American lol. I did live on your Island for a while, nice place. But I don’t get why it’s not accepting id=“email” and all of the rest that I thought I was doing correctly.

You have two textarea because you defined two textarea in your HTML. About the placeholder, I think it is because of the spaces you added between the opening and closing textarea tags:

<textarea
        id="comments"
        class="input-textarea"
        name="comment"
        Placeholder= "Additional Comments">
               
       
     </textarea>

Try this:

<textarea
        id="comments"
        class="input-textarea"
        name="comment"
        placeholder= "Additional Comments"></textarea>

Thank you, but do you know why I can’t finish the user stories? I attempted to complete them I keep on getting 9/17 completed, I know how to access the failures under “tests” and still can’t get it right even though I keep doing what they ask.

Thank you but I still don’t get why it’s not accepting id=“email” and all of the rest that I thought I was doing correctly.

Hi again @BrooksDriskill,
Do you have an updated code now that you could link to, just to see you have understood the tips given above?
When I did the tests, I found that the system could mark things as “not passed” if you have nested things, that the tests were looking for, to deep in a <section> or a <div>, so you could try to “un-nest” (simplify) the code itself and check if that helps pass some more tests.

I explained you in my first post already, check it again and see what I wrote, you have things to correct such as the form tags

A Pen by BrooksDriskill (codepen.io)

@BrooksDriskill Ok, so you have got rid of that second textarea but I would still suggest that you make sure you don’t have any space at all between <textarea> and </textarea> as mentioned by LucLH. Anything you put between those two tags will be placed in your textarea (and blocking the placeholder text from being visable), so switching to the code directly below here, will make the placeholder text visable again:

<textarea 
    id="comments" 
    class="input-textarea" 
   name="comment" 
   placeholder="Additional Comments"></textarea>

I would also like to say that I am not sure that I understand the purpose of having that many form-tags. In my mind you would only need one at the very start of your questionaire and one directly after your submit button code. (if you notice in the user stories they phrase it as “…in THE form…”, so having too many forms might be incorrect according to the tester and therefore making you not pass all the tests.) try changing this and see how that works.
Maybe you can post the updated version of your codepen after that :slight_smile:

SwedishErik, or can I call you “Erik the Swede”… or just :sweden:Erik


I just saw this Article and was wondering If you are Bilingual …then maybe you should Apply :


Yes, I am bilingual, impressive detective skills, miss ALLESS :wink:.
I will definitely check it out more closely when I feel better, thanks for the tip. Saw that you knew a bunch om languages on your profile, are you planning on helping translating as well?
By the way, you can call me anything, been known by quite a few names (just let me know it), Erik is fine :blush:

Not Exactly impressive… I will not be, because my language levels are about intermediate.
But, they listed Swedish on there, and you seemed like a likely candidate for that.

Maybe we should all call ourselves by our
countries of genetic origin.

I could be IcelandicAlless… Well, at least I could be 1/4IcelandicAlless

If you are Ill, I wish you swift recovery