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