HTML Select Placeholder

With HTML5 came a way to show a placeholder for a select form element, without giving the user an option to select it. This give developers an easy way to have a nice looking placeholder but not have it as an option for selection.


Below is an example and some code to go with it.

<label style="font-weight: bold">NPC Type:</label>
<select name="npc-type">
    <option value="" disabled hidden selected>Select a Type for the NPC...</option>
    <option value="king">King</option>
    <option value="shop-keep">Shop Keep</option>
    <option value="citizen">Citizen</option>
    <option value="guard">Guard</option>
Cody's logo image, it is an abstract of a black hole with a white Event Horizon.

Cody Merritt Anhorn

A Engineer with a passion for Platform Architecture and Tool Development.