​x
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1">
6
<meta http-equiv="x-ua-compatible" content="ie=edge">
7
<title>My Example</title>
8
​
9
<style>
10
.myForm {
11
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
12
font-size: 0.8em;
13
max-width: 50em;
14
}
15
​
16
.myForm * {
17
box-sizing: border-box;
18
}
19
​
20
.myForm p {
21
padding: 2em;
22
margin: 0;
23
color: #555;
24
border-style: solid;
25
border-color: limegreen;
26
border-width: 0 0 1px;
27
}
28
​
29
.myForm p:nth-of-type(1) {
30
border-top-width: 1px;
31
}
32
​
33
.myForm p:nth-of-type(odd) {
34
color: seagreen;
35
background-color: #e5f6e6;
36
}
37
​
38
.myForm select {
39
width: 60%;
40
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
41
font-size: 0.9em;
42
display: inline-block;
43
margin-right: 2em;
44
}
45
​
46
.myForm label {
47
display: inline-block;
48
vertical-align: top;
49
}
50
</style>
51
​
52
</head>
53
<body>
54
​
55
<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/form_handler.cfm">
56
​
57
​
58
<p>
59
<select required id="select1" name="select1">
60
<option value="" selected="selected">Select One</option>
61
<option value="s1"> Select Option 1 </option>
62
<option value="s2"> Select Option 2 </option>
63
<option value="s3"> Select Option 3 </option>
64
</select>
65
<label for="select1">
66
Basic
67
</label>
68
</p>
69
​
70
<p>
71
<select required name="select2" id="select2">
72
<option value="" selected="selected">Select One</option>
73
<optgroup label="Group 1">
74
<option value="s1"> Select Option 1 </option>
75
<option value="s2"> Select Option 2 </option>
76
</optgroup>
77
<optgroup label="Group 2">
78
<option value="s3"> Select Option 3 </option>
79
<option value="s4"> Select Option 4 </option>
80
</optgroup>
81
</select>
82
<label for="select2">
83
With Optgroup
84
</label>
85
</p>
86
​
87
​
88
<p>
89
<select required name="select3" name="select3" multiple>
90
<option value="" selected="selected">Select One</option>
91
<optgroup label="Group 1">
92
<option value="s1"> Select Option 1 </option>
93
<option value="s2"> Select Option 2 </option>
94
</optgroup>
95
<optgroup label="Group 2">
96
<option value="s3"> Select Option 3 </option>
97
<option value="s4"> Select Option 4 </option>
98
</optgroup>
99
</select>
100
<label for="select3">
101
Select Multiple Rows
102
</label>
103
</p>
104
​
105
<p>
106
<select required name="select4" name="select4" multiple size="8">
107
<option value="" selected="selected">Select One</option>
108
<optgroup label="Group 1">
109
<option value="s1"> Select Option 1 </option>
110
<option value="s2"> Select Option 2 </option>
111
</optgroup>
112
<optgroup label="Group 2">
113
<option value="s3"> Select Option 3 </option>
114
<option value="s4"> Select Option 4 </option>
115
</optgroup>
116
</select>
117
<label for="select4">
118
Size
119
</label>
120
</p>
121
​
122
<p>
123
<select required name="select5" name="select5" multiple size="8">
124
<option value="" selected="selected">Select One</option>
125
<optgroup label="Group 1">
126
<option value="s1"> Select Option 1 </option>
127
<option value="s2" disabled> Select Option 2 </option>
128
</optgroup>
129
<optgroup label="Group 2">
130
<option value="s3"> Select Option 3 </option>
131
<option value="s4"> Select Option 4 </option>
132
</optgroup>
133
</select>
134
<label for="select5">
135
Disabled Item
136
</label>
137
</p>
138
​
139
​
140
<p>
141
<select required name="select6" name="select6" multiple size="8" disabled>
142
<option value="" selected="selected">Select One</option>
143
<optgroup label="Group 1">
144
<option value="s1"> Select Option 1 </option>
145
<option value="s2"> Select Option 2 </option>
146
</optgroup>
147
<optgroup label="Group 2">
148
<option value="s3"> Select Option 3 </option>
149
<option value="s4"> Select Option 4 </option>
150
</optgroup>
151
</select>
152
<label for="select6">
153
Disabled List
154
</label>
155
</p>
156
​
157
​
158
</form>
159
​
160
</body>
161
</html>