In this article, we will see how to add a placeholder in the
<select> tag for multiple dropdowns of HTML.
To add a placeholder to
<select> dropdown, we have to use the
<option> tag and add disabled, hidden, and selected attributes to it.
The placeholder attribute is used to indicate what type of value is expected from a user.
Here is an example of using placeholder attributes to add placeholder text in a form.
<form> <input placeholder="Enter Name" /> <textarea placeholder="Enter your message" /> </form>
The output will be like this,
< select > element we do not get the placeholder attribute to write the text.
So what we can do is use the
< option > tag along with the
selected attributes to write the placeholder text in it.
<select> <option value="" disabled selected hidden>Select a color</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red">Red</option> <option value="yellow">Yellow</option> </select>
disabled attribute make the option unable to select from the options.
selected attribute specifies the option that should be pre-selected when the page loads.
hidden attribute hides the option when we open the drop-down from the
< select > box on a page.