选择 HTML 中的标签

HTML 中的选择标签可以从选项列表中实现选择功能，例如下拉菜单或多选菜单。它是一个可以在用于创建和实现网页的 HTML 代码形式内使用的标签。语法类似于“”值选项>值 ….，其中列表中的每个项目都将由选项标记括起来，并允许用户选择功能。为了方便其他选择方法，如 opt group 和多重选择，标签可以在 内部使用标签，然后可以用来代替 分别标记。

HTML 中选择标签的语法

选择标签可以使用...；标签。

该标签的语法如下：

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

上面的语法;标签使用选项菜单创建一个选择列表，以从列表中选择任何选项。默认情况下，它将显示第一个选项作为所选选项。

使用 选择多个选项选择列表中的标签也是可能的。此语法与正常的 相同。标签;唯一的区别是使用多个关键字；它将允许用户从列表中选择各种选项。

将如下：

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

最重要的用途之一是标签是在列表中创建一个选项组。它将创建多个选项作为一个组，并且组标题将以粗体标题显示。

其语法如下：

<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: 上面的语法也可以定义尺寸，以便它只显示定义的尺寸

只有这样的选项：

<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>

 自动填充： 选择标签也用于自动填充字段值，如下所示：

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

自动对焦：我们可以一次关注列表中的一个特定选项，如下所示。在一页中只能使用一次自动对焦。

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

link: Select 标签用于通过指定选项打开表单链接，语法如下：

Content Name

 必需：选择标签中的此选项定义了实际提交表单之前定义列表中的强制选项。

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

占位符：我们知道，如果使用选择标签，那么它会将第一个选项视为默认选项，但如果我们想将某些选项显示为默认选项，那么我们可以设置选定的关键字具体选项如下：

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

禁用：选择标签中的另一个有用技巧，以禁用格式显示选项，如下所示：

使用这个可以显示选项，但无法采取任何操作。

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

HTML 中选择标签的示例

以下是下面提到的以下示例。

示例#1

在此示例中，我们将显示一个简单的选择标签作为选择列表、optgroup，并用于一次选择多个选项，如下所示：

代码

<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>

输出：

示例#2

此示例定义了如何通过 从链接中打开标签

代码

<title>select Tag form link</title>

Colspan tag Font Tag

输出：选择 Colspan 标签值并使用提交按钮选择它后，列表将打开链接的表单。

示例#3

列表中有多个选项，但它会根据定义的大小显示选项。

代码

<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

输出：

结论

HTML 中的 select 标签显示选择列表，用于从列表中选择一个或多个选项。 标签可以与选定、必需、禁用、必需、自动填充、自动对焦、链接、大小、多个、占位符、optgroup 等值一起使用。

以上是选择 HTML 中的标签的详细内容。更多信息请关注PHP中文网其他相关文章！