The “select” box is referred to as the drop-down list of an HTML document. It is one of the essential components of the form input fields. A form having a select box (drop-down) menu is beneficial in many ways, such as it formats the user response in a specific way, avoids false or irrelevant answers, saves time, and many more. More specifically, the “<select>” element of HTML is used to create a drop-down box, and the “<option>” element specifies its options.
This article will illustrate the techniques for making a placeholder for HTML select box.
How to Create a Placeholder for HTML Select Box?
In HTML, a few attributes work to make a placeholder for the selected element. The attributes used to create a placeholder are listed below:
- disabled: This is a boolean attribute, which makes the element disabled.
- selected: A boolean attribute that makes the elements pre-selected on page load.
- hidden: A boolean attribute specifies the element is no longer relevant.
How to Create a Placeholder Visible and Disabled for HTML Select Box?
To create an HTML page, follow the steps mentioned below:
- First, add an “<h2>” element to add a heading on the page.
- Then, add the “<select>” element for making a select box.
- The <select> tag contains several “<option>” tags that define the available options of the menu. In our case, we have created a drop-down menu for countries.
- To set a placeholder, add “disabled” and “selected” attributes to the first “<option>” tag:
<select name="Country" required>
<option value="" disabled selected >All Country</option>
<option value="United States">United States</option>
<option value="China">China</option>
<option value="Pakistan">Pakistan</option>
<option value="Europe">Europe</option>
</select>
The output of the above-stated code shows that the first option is selected and disabled:
In addition to making an option visible and disabled, we can also hide it using the hidden attribute.
How to Create a Placeholder Hidden for HTML Select Box?
If you want to hide the placeholder in the menu, place a “hidden” attribute to that option. In this case, the placeholder option will be invisible in the menu.
For the corresponding purpose, add a “hidden” attribute to the first “<option>” tag in the ongoing example:
<select name="Country" required>
<option value="" disabled selected hidden>All Country</option>
<option value="United States">United States</option>
<option value="China">China</option>
<option value="Pakistan">Pakistan</option>
<option value="Europe">Europe</option>
</select>
It can be observed from the below output that the first option is selected, disabled, and hidden by default:
We have effectively elaborated on how to make a select box and the method to set its placeholder by using several HTML attributes.
Conclusion
The HTML “<select>” element is utilized to include a select box in a document. The “<option>” elements within the <select> element specify the available menu items. The “disabled”, “selected”, and “hidden” attributes are added to the <option> element that adjusts a placeholder text. This post has explained the methods of making a select box and how to set a placeholder for a select box.