FAQ: Learn HTML: Forms - Dropdown list

This community-built FAQ covers the “Dropdown list” 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 Dropdown list

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!

2 posts were split to a new topic: Why do we need an ID attribute?

2 posts were split to a new topic: How can I style a dropdown menu?

4 posts were split to a new topic: How can I customize what the dropdown defaults to?

3 posts were split to a new topic: Why does the dropdown list have both up and down arrows?

Why does select not require an input tag?

1 Like

2 posts were merged into an existing topic: How can I customize what the dropdown defaults to?

2 posts were split to a new topic: Why doesn’t this pass validation?

6 posts were split to a new topic: What order should attributes be in?

Much like mchugn01 asked, why has the W3C chosen to call it “select” instead of doing something like …

<input type="select" ... >

2 Likes

So the lesson goes like this " The text rendered is the text included between the opening and closing <option> tags. However, it is the value of the value attribute that is used in <form> submission (notice the difference in the text and value capitalization)."

I need to know if there was not a difference in capitalization what would be different? I tried and tested and could not see a difference. It rendered without any difference.

Would appreciate a response.

as you say here:

so changing the capitalization of the value of value attribute, would affect your form handling/submission, there is no visual difference on the page

1 Like

Hi! It already has been asked, hopefully this post will bump this topic to the top.
Why are we using <select> instead of <input> for the dropdown list? I mean if you think about it you are selecting options as well when using radio buttons, but they have the input tag. How do I know when to use what?

The <input> element does not expect any child elements to be nested inside it. This is hinted at by the fact that it is a self closing tag. <select> is expecting children, in the form of <option> tags, allowing you to provide your own list of customized options to pick from.

I think you could probably argue, well why not just have several <input> elements of type select that make the drop down instead of nesting <options>, like your radio button example, but consider that each radio button is a separate “thing” always visible on the page. You want a drop down list to be collapsed by default and only show the options when interacted with. This implementation either simplifies that process or makes it possible altogether, I’m not sure (perhaps someone else can add more insight).

As far as picking which to use, well if you want a drop down list, use <select>. It’s up to your discretion how to make the webpage, consider what makes most sense for you to use.

1 Like