by Sai gowtham

How to add a placeholder to select element in html

How to add a placeholder to select element in html

In this tutorial, we are going to learn about how to add a placeholder text to a <select> element (tag) in html.

The Html form elements like input and textarea we have a placeholder attribute to add the placeholder text.

<input placeholder="Name"/>
<textarea placeholder="comment"></textarea>

Adding placeholder to select element

In select element we don’t have a placeholder attribute but we can add it by using <option> element with disabled, selected and hidden attribute.

Example:

<select>
  <option value="" disabled selected hidden>Choose your framework</option>  <option value="react">React</option>
  <option value="Vue">Vue</option>
  <option value="Angular">Angular</option>
</select>

added placeholder to select html

  1. The disabled attribute makes the option unable to select.
  2. The selected attribute shows the text inside <option> element opening and closing tags.
  3. Whenever a user clicks on a select dropdown the hidden attribute makes this option hidden.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course