Example 1: placeholder select html
<!DOCTYPE html>
<head>
</head>
<body>
<select name="food">
<!-- The following line makes a placeholder -->
<option value="" disabled selected hidden>select food</option>
<option value="apple">apple</option>
<option value="melon">melon</option>
</select>
</body>
Example 2: html select placeholder
Placeholder attribute does not exist for the <select> tag.
But there are some ways to make a placeholder for the select box.
The easiest way of making a placeholder for the <select> element is using the disabled and selected attributes with the HTML5 hidden global attribute.
<select name="monthname" required>
<option value="" selected disabled hidden>Select Month</option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
Example 3: html select placeholder
//<select> tag doesn't have any placeholder attribute.
//But you can make a placeholder by making
//your first option disabled and selected.
//Maybe you would want that option to be hidden,
//just add hidden
//in Angular you need to add value="undefined"
<select name="gender" required>
<option value="" selected disabled hidden>Select a Gender</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Intersex">Intersex</option>
<option value="Trans">Trans</option>
<option value="Non-Conforming">Non-Conforming</option>
<option value="Personal">Personal</option>
<option value="Eunuch">Eunuch</option>
</select>
Example 4: placeholder in html select
<option value="" selected disabled hidden>Select Here</option>
Example 5: how do i make a placeholder for a 'select' box
<html>
<head>
</head>
<body>
<select required
<!-- The following line is the placeholder -->
<option value="" disabled selected hidden>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
<body>
</html>
Comments
Post a Comment