FAQ: Learn HTML: Forms - Datalist Input

This community-built FAQ covers the “Datalist Input” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Datalist Input

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

10 posts were split to a new topic: Do we only need a value with datalists, and not text between the tags?

3 posts were split to a new topic: What’s the connection between input and datalist, and do we need to specify type?

Hello,
In this exercise, when I typed in the datalist lines, the screen became an automatic roll down. Is this a CSS feature ?

2 posts were merged into an existing topic: What’s the connection between input and datalist, and do we need to specify type?

2 posts were split to a new topic: Is option a self-closing tag?

6 posts were split to a new topic: What is the difference between id and name?

Is there an attribute that makes it so you have the “searchable” list but it does not allow freeform entry? ie anything that isn’t in the list is not permitted? I imagine you can do this with validation of the input by the next page but it would seem better for it to be possible to restrict it in the first place? I can think of options (ie Country) where searchable is helpful but you don’t want freeform entry too?

1 Like

What if i want to add an option of more than a word like that ?
< option value=nosauce> < /option >
without make the form consider it as another attribute ?

Hi
in the exercise dont have type="text attribute as mentioned at the begining of this lesson and showed in the example but still display dropdown correctly. why?

The default type is text, so we can leave off this attribute as it is moot.

1 Like

Is the default always text - or can the default be changed?

The HTML5 input types - Learn web development | MDN

Read the Previous page to that one, as well.

My browser is rendering the “value” inside the option, and the option itself. Because of that, datalist input is being displayed in an apparently duplicate way (just not the first letter in capital letter).

Is this a new browser rendering model? Are there any new practices to be adopted on this, if this is the new standard?

1 Like

Why do we not have to add a closing datalist tag after the options?

I’m working on this now. Once I completed this part, I look to see of I can type in index.html and it still only comes down with a dropdown. I’m using Google Chrome by the way. What am I doing wrong? Codecaedamy is giving me a check so it seems to be saying there is nothing wrong? Image 8-6-20 at 11.36 AM|690x247

You can take a look at this url developper.mozilla:

datalist

You will see the exemple below:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

You have to save the file before running it.

My datalist is showing up as a blank text box. I have even pasted the above example and i get the same blank text box. Am I missing something that would turn it from text to a drop down list?

  <label for="quote">Motivational Quote:</label>

  <input id="quote" name="quote" type="text" list="quote-choices" required>

    <datalist id="quote-choices">

      <option value="Unbelievable"></option>

      <option value="good job"></option>

      <option value="Amazing"></option>

    </datalist>

datalist elements have an endtag which means there is a text node.That is where the literal value should be written. What we write in the value attribute is arbitrary. It can be a number, a letter, an abbreviation, or whatever.

Hello guys,
I wanna ask about what does list attribute stands for please ?

Thank you in advance .