How to add default value to dropdown HTML (I did not know)

Is this what you’re trying to create in your HTML form?

how to add default value to dropdown HTML

If you’re looking for the answer, skip straight to the section below. I usually do a bit of a preamble in these posts, since this is ultimately a blog.

So, I’m currently teaching a front-end web development course at General Assembly, and one of the best things about being an instructor is that you get asked questions all the time.

Broad questions, specific questions, out-of-left-field questions. Every class has students asking them, and it’s awesome!

Sometimes, a student’s question is something you’d never thought of, or it’s related to something that you’ve just never had the chance to use at work or on side projects. Those are arguably the best opportunities for both the student and teacher to grow, and I relish them as they appear.

The great thing about very specific questions is that I’d have to google for the answer in front of the students. This indirectly demonstrates and hopefully imparts the meta-skill of googling for esoteric programming topics. That, and I get to learn something new too.

What’s not to like?

Ok, on to the answer that you’re probably here for.

Adding default value to dropdown HTML

Let’s get one thing straight: this is not obvious at all. So if you’re feeling at all embarrassed that you don’t know it already, don’t. I had to google for this answer in front of my class because I didn’t know it either!

Here is HTML for a normal <select> dropdown:

The above would render a dropdown with a default value pre-selected to be the first item in the list. So if the user hits “Submit” in the form, the value for the “course” field would default to “web-dev”. That’s no good!

Here’s the HTML you should add to give it a default value, which functions sort of like a placeholder:

Resulting HTML that has a default value:

Totally non-obvious answer. Hope it helped.

Happy developing!

Also published on Medium.