Codecademy Forums

Datalist help!

Hi guys!

I’m having an issue on the 'forms’s practice in HTML where i’m doing the make a story project.

It was all going fine but when I get to the datalist section the ‘options’ will not come up when I click on the box or start typing. I’ve watched the tutorial and copied his code exactly. It still won’t work.
can anyone help?:triumph::confounded:

I’ve attached a screen shot of the code I used.

2019-04-16_11-10-08

Thanks :grinning:

Laura

The id tag for your datalist is missing a - :wink: .
id="quote-choices"

1 Like

:woman_facepalming:

@janneslohmeijer thanks! :rofl:

1 Like

I’m having this same issue but I have the “quote-choices” part correctly. Do you think you can help me? (please ignore the humorous quote options)

1 Like

I just noticed I was missing the name attribute, but even after adding that, still no drop down list with my options!

1 Like

There seems to be nothing wrong with your code. Keep in mind the input field should not provide a drop down menu, it should give suggestions upon typing. Type y in the field and see if it works. If it is not working there might be something wrong with the rest of your code. Please provide the code if this is the case.

Hint for the next time when presenting code on the forum use the “preformatted text” option, paste the code in the text box, select it all and press the </> button. Like so:

<label for="quote">Motivational Quote:</label>
<input id="quote" name="quote" type="text" list="quote-choices" required>
<datalist id="quote-choices">
    <option value="you win the lottery!"></option>
    <option value="your ex comes crawling, begging you to take him back!"></option>
    <option value="your parents are actually proud of you for the first time!"></option>
    <option value="your student loans are paid off!"></option>
</datalist>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>Form a Story</title>
  </head>
  <body>
    <section id="top">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
    </section>

    <section id="main">
      <h1>Complete the Form -<br> Complete the Story!</h1>
      <hr>
      <!--Add your form below:-->
      <form action="story.html" method="GET">
        <label for="animal-1">Animal</label>
        <input id="animal-1" type="text" name="animal-1 required">
        <br>
        <label for="animal-2">Another Animal:</label>
        <input id="animal-2" name="animal-2" type="text" required>
        <br>
        <label for="animal-3">One More Animal</label>
        <input id="animal-3" name="animal-3" type="text" required>
        <br>
        <label for="adj-1">Adjective (past tense):</label>
        <input id="adj-1" name="adj-1" type="text" required>
        <br>
        <label for="verb-1">Verb (ends in -ing):</label>
        <input id="verb-1" name="verb-1" type="text" required>
<br>
        <label for="num-1">Number:</label>
        <input id="num-1" name="num-1" type="number" required>
<br>
        <span>Yes or No</span>
<br>
        <input type="radio" id="yes" name="answer" value="yes" required>
        <label for="yes">Yes</label>
    
        <input type="radio" name="answer" id="no" value="no" required>
        <label for="no">No</label>
        <br>
        <label for="speed">Relative speed (ends in-er):</label>
        <select id="speed" name="speed" required>
          <option value="faster">Faster</option>
          <option value="slower">Slower</option>
          <option value="lazier">Lazier</option>
          <option value="uglier">Uglier</option>
        </select>
        <br>
    <label for="quote">Motivational Quote:</label>
        <br>
    <input id="quote" name="quote" type="text" list="quote-choices" required>
    <datalist id="quote-choices">
      <option value="you win"></option>
      <option value="good job"></option>
      <option value="give me a 5"></option>
    </datalist>
        
    
<br>
  <label for="message">Meaningful Message:</label>
  <br>
  <textarea id="message" name="message" rows="8" cols="40" minlength="10" maxlength="45"  required></textarea> 
          
          
<br>          
<br>        
<br>
<br>
          <br>
          
        
        <input type="submit" value="Form My Story!"
      </form>
    </section>
  </body>
</html>
1 Like

Even when I type in the blank, nothing comes up. This happened back when the datalist element was first introduced, but I thought maybe it was just a glitch and moved on.

Click in the field (maybe press the down arrow key?). Does the list drop down?

Nothing drops down. Nothing pops up when I type in the field.

The example on this page works on a click, or using the down arrow…

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Hmm. This example doesn’t give me a dropdown list or any options. I wonder if this a problem with my MacBook then?

That I wouldn’t know, I’m on a Windows 7 machine using FF. Do you have a choice of browsers? Chrome, maybe?

Just tried it with Chrome. It works! So the datalist element doesn’t work in Safari. Thanks for the suggestion!

3 Likes

Let’s check: datalist

If you can, upgrade your Safari browser. The Mar 24 release offers support for this and probably other new attributes.

2 Likes

Glad we got it sorted then :wink: . Keep up the good work all!

1 Like

Right again. I updated my laptop and the dropdown options are there now. Thanks again!

4 Likes

Hello everybody!
I am having the same problemwith the , the field seems empty depite I wrote down some options. (I’m on Chrome and still nothing showns up).
Here’s my code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>Form a Story</title>
  </head>
  <body>
    <section id="top">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
    </section>

    <section id="main">
      <h1>Complete the Form -<br> Complete the Story!</h1>
      <hr>
      <!--Add your form below:-->
      <form action="story.html" method="GET">
        <label for="animal-1">Animal:</label>
        <input id="animal-1" name="animal-1" type="text" value="cat" required>
        <br>
        
        <label for="animal-2">Another Animal:</label>
        <input id="animal-2" name="animal-2" type="text" required>
        <br>
        
        <label for="animal-3">One More Animal:</label>
        <input id="animal-3" name="animal-3" type="text" required>
        <br>
        
        <label for="adj-1">Adjective (past tense)</label>
        <input id="adj-1" name="adj-1" type="text" required>
        <br>
        
        <label for="verb-1">Verb</label>
        <input id="verb-1" name="verb-1" type="text" required>
        <br>
        
        <label for="num-1">Number:</label>
        <input id="num-1" name="num-1" type="number" required min="1" max="9">
        <br>
        
        <span>Yes or No:</span>
        <input id="yes" name="answer" type="radio" value="yes" required checked>
        <label for="yes">Yes</label>
        <input id="no" name="answer" type="radio" value="no" required>
        <label for="no">No</label>
        <br>
        
        <label for="speed">Relative speed (ends in -er):</label>
        <select id="speed" name="speed" required>
          <option value="faster">Faster</option>
          <option value="quicker">Quicker</option>
          <option value="speedier">Speedier</option>
        </select>
        <br>
        
        <label for="quote">Motivational Quote:</label>
        <input id="quote" name="quote" type="text" required list="quote-choices">
        <datalist id="quote-choices">
          <option value="winner gets ice cream"></option>
          <option value="no homework for a week"></option>
          <option value="choosing dessert on the weekend"></option>
        </datalist>
        <br>
        
        <label for="message">Meaningful Message:</label>
        <textarea id="message" name="message" rows="8" cols="40" required minlenght="30" pattern="[a-zA-Z0-9]+">Replace this with your message</textarea>
        <br>
        
        <br>
        <input type="submit" value="Form My Story">
      </form>
    </section>
  </body>
</html>

Thank you very much for your precious help!
Have a good day!

Seems to be working ok for me on chrome. What exactly are you experiencing?

Hello @janneslohmeijer,

Thank you for answering!
What happens is that on the little arrow on the right of the form I have no options to choose. And also even if I start typing the options, nothing appears, it’s like empty.