A select box, also called a drop-down list or pull-down list, is used to ask users to select one or multiple answers from listed options similar to radio buttons and checkboxes; however, options in the select box are hidden until users click on or tap the box.
To create a select box, use two tags: <select>
and <option>
. You need to nest the <option>
elements within the <select>
element.
name
: This attribute is used to set a name for the select element. When you submit the form, the name is sent to the web server along with the value of the selected option. If there is no name in the tag, the selected value won’t be sent.
multiple
: By adding this attribute, you can change a single selection select box to a multiple selection select box.
value
: This attribute is used to set a value of the option element. When you submit the form, the value is sent to the server along with the name of the select element.
selected
: This attribute is used to set the initial setting of selection. The option with this attribute is already selected when a browser loads the web page.
When you want to group options, you can use the <optgroup>
tag with specifying a group name in the label
attribute.
</body>
tag
<h3>3. Select Box</h3>
<form>
<h4>Select Box: Single Selection</h4>
<select name="days-of-week">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
</form>
After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows)
multiple
attribute and adjusting the title.
<form>
<h4>Select Box: Multiple Selection</h4>
<select name="days-of-week" multiple>
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
</form>
After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows).
<optgroup>
tag and adjusting the title.
<form>
<h4>Select Box: Grouping</h4>
<select name="days-of-week">
<optgroup label="Weekday">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
</optgroup>
<optgroup label="Weekend">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>
</form>
After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows).
You can also check the sample result here (Demo Site ).
A select box, also called a drop-down list or pull-down list, is used to ask users to select one or multiple answers from listed options similar to radio buttons and checkboxes; however, options in the select box are hidden until users click on or tap the box.
To create a select box, use two tags: <select>
and <option>
. You need to nest the <option>
elements within the <select>
element.
name
: This attribute is used to set a name for the select element. When you submit the form, the name is sent to the web server along with the value of the selected option. If there is no name in the tag, the selected value won’t be sent.
multiple
: By adding this attribute, you can change a single selection select box to a multiple selection select box.
value
: This attribute is used to set a value of the option element. When you submit the form, the value is sent to the server along with the name of the select element.
selected
: This attribute is used to set the initial setting of selection. The option with this attribute is already selected when a browser loads the web page.
When you want to group options, you can use the <optgroup>
tag with specifying a group name in the label
attribute.
</body>
tag
<h3>3. Select Box</h3>
<form>
<h4>Select Box: Single Selection</h4>
<select name="days-of-week">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
</form>
After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows)
multiple
attribute and adjusting the title.
<form>
<h4>Select Box: Multiple Selection</h4>
<select name="days-of-week" multiple>
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
</form>
After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows).
<optgroup>
tag and adjusting the title.
<form>
<h4>Select Box: Grouping</h4>
<select name="days-of-week">
<optgroup label="Weekday">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
</optgroup>
<optgroup label="Weekend">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>
</form>
After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows).
You can also check the sample result here (Demo Site ).