Select Tag in HTML-HTML Tutorial-php.cn

Select Tag in HTML

王林

Release： 2024-09-04 16:28:11

Original

533 people have browsed it

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 ‘, 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 can be used instead of the … tag.

The syntax for this tag is as follows:

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

Copy after login

The above syntax tag in the selection list is also possible. This syntax is the same as the normal 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  = "labelname">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</select>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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

<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="div-container">
<div class="block">
<h4>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>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>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>
</body>
</html>

Copy after login

Output:

Select Tag in HTML

Example #2

This Example defines how to open from the link through 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!