Form a Story DATALIST issue

Form a Story DATALIST issue:

No matter how I enter it, I can’t get the dropdown list to work. Even after simplifying my options to this:

https://www.codecademy.com/courses/learn-html/projects/form-a-story

1 Like

I don’t see any problems with the code, could you please copy and paste the full code here?

1 Like
Form a Story Form A Story Logo
<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>

Number:
Yes or No
Yes
    <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>

Meaningful Message:





    <input type="submit" value="Form My Story!"
  </form>
</section>
1 Like

I found only one problem, you forgot to close the input at the end, but it worked without correcting it, here’s the full code (I corrected a few indentation problems):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>story</title>
  <link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <section id="main">
    <h1>Complete the Form -<br> Complete the Story!</h1>
    <hr>
    <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>
      <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>
      <input type="submit" value="Form My Story!"> <!-- This is where you forgot to close the input tag -->
    </form>
  </section>
  <script src="script.js"></script>
</body>
</html>

Hope this helps :grinning:

I was confused at a Youtube tutorial teaching a few things that had meta tags I wasn’t familiar and I was like, “What’s this?, no tutorials explain this.”

Then I Google it, nothing comes up except from 7 years ago. Then I filter by the last year. This is the first thing that comes up. But only because the answer has the code, and not the question, and also with no explanation. It’s like the viewport tag just shows up, along with a few other tags, and nobody says why. It’s just there.

1 Like

But are you familiar with it now?
If not, just reply and I’ll be happy to help :grinning: