Languages
[Edit]
EN

HTML - create select element placeholder

0 points
Created by:
user4838
368

In this article, we would like to show you how to create a select element placeholder in HTML.

Quick solution:

// ONLINE-RUNNER:browser;

<select>
  <option selected disabled>Placeholder text...</option>
  <option value="option-value">option 1</option>
</select>

 

Practical example

In this section, we present how to create a select box placeholder using selected and disabled attributes of an option element at once.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <form name="my-form">
    <select name="my-fruits">
      <option selected disabled>Select fruit</option>
      <option value="apple" >🍎 Apple</option>
      <option value="banana">🍌 Banana</option>
      <option value="grape">🍇 Grape</option>
    </select>
  </form>
</body>
</html>

Note:

The placeholder's text will be visible until the user selects one of the options, then it can't be set back.

References

  1. <option> - selected | MDN
  2. <option> - disabled | MDN
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join