Select Tag in HTML

The Select Tag in HTML enables a selection feature from the list of options, such as a drop-down menu or a multiple-selection menu. It is a tag that can be used inside the form of the HTML code used for creating and implementing a web page. The syntax goes like ‘ Value Value …., where each item in the list will be enclosed by the option tag and will allow the user selection feature. To facilitate other selection methods like opt group and multiple selection, the tag can be used inside the tag, and can be used instead of the tag, respectively.

Syntax of Select Tag in HTML

Select tag can use … tag.

The syntax for this tag is as follows:

<select>
<option> Value  </option>
<option> Value  </option>
</select>

The above syntax tag creates a selection list with the options menu to select any option from the list. By default, it will display the first option as the selected option.

Selecting multiple options using the tag in the selection list is also possible. This syntax is the same as the normal tag; the only difference is using multiple keywords; it will allow the user to select various options from the list.

It will be as follows:

<select multiple>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

One of the most important uses of the tag is to create an option group in the list. It will create multiple options as a group, and the group heading will be displayed in bold heading.

The syntax for this is as follows:

<select>
<optgroup label>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</optgroup>
</optgroup></select>

size: Above syntax can define the size also so that it will display only defined sizes

option only this is like:

<select value="" size="4">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

 autofill: select tag also used to autofill into the field values as follows:

<select>
<option value=" " autocomplete="off"> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

autofocus: we can focus on one specific option from the list at a time as follows. One can use only one autofocus into a single page.

<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

link: Select tag is used to open form link through specified option as defined in the following syntax:

Content Name

 required: This option in the select tag defines a compulsory option from the defined list before the actual submission of the form.

<select name="value" required>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

placeholder: As we know, if using a select label then it will consider the first option as a default option, but if we want to show some option as default, then we can set the selected keyword to the specific option as follows:

<select name="value">
<option value=" "> Content Name </option>
<option value=" " selected> Content Name </option>
</select>

disabled: one more useful trick in the select tag to show option in the disabled format as follow:

Using this one can show the option, but taking any action is impossible.

<select name="value">
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>

Examples of Select Tag in HTML

Here are the following examples mentioned below.

Example #1

In this example, we are going to show a simple select tag as a selection list, optgroup, and for selecting multiple options at a time as shown below:

Code

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div-container {
display: table;
width: 100%;
}
.block {
display: table-cell;
padding: 10px;
}
</style>


<div class="div-container">
<div class="block">
<h4 id="Simple-Select-tag">Simple Select tag </h4>
<select name="Web Languages">
<option> HTML 5  </option>
<option> CSS 3</option>
<option> Bootstrap  </option>
<option>Angular </option>
<option> React JS </option>
<option> Vue JS</option>
<option>Python  </option>
<option>PHP</option>
</select> <br>
</div>
<div class="block">
<h4 id="Optgroup-Select-tag">Optgroup Select tag </h4>
<select>
<optgroup label="2 wheeler">
<option value="Honda">Shine</option>
<option value="Suzuki">Access</option>
</optgroup>
<optgroup label="4 wheeler">
<option value="m">Mercedes</option>
<option value="o">Audi</option>
</optgroup>
</select>
</div>
<div class="block">
<h4 id="Multiple-Selection-in-Select-tag">Multiple Selection in Select tag </h4>
<select multiple>
<option> Green  </option>
<option> Orange</option>
<option> Blue </option>
<option>Red </option>
<option> Yellow </option>
</select>
</div>
</div>

Output:

Example #2

This Example defines how to open from the link through tag

Code

<title>select Tag form link</title>

Colspan tag Font Tag

Output: After selecting the Colspan tag value and selecting it with the submit button, the list will open the linked form.

Example #3

There are multiple options in the list,, but It will show options per the defined size.

Code

<title>select Tag form link</title>



Aurangabad
Beed
Chennai
Delhi
Egatpuri
Firozabad
Fatimpur
Goa
Harihareshwar
Indonesia
Japan
Kolkata
Latur
Mumbai
Nagpur
Oty
Pune
Qatar
Raipur
Sholapur
Tamil Nadu
Uttarakhand

Output:

Conclusion

The select tag in HTML displays the selection list for choosing one or multiple options from the list. tag can be used with values like selected, required, disabled, required, autofill, autofocus, link, size, multiple, placeholder, optgroup, and many more.

The above is the detailed content of Select Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!