HTML 中的组合框

HTML Combobox 主要用于在 HTML 中构建表单。用户可以根据自己的喜好从列表中选择一个选项。它由 select 元素和 input type=”text” 元素组成。组合框的功能与选择标签相同。它在 标签内还有一个 标签属性，用于从列表中选择菜单选项，以便人们可以根据自己的选择选择一个选项。

Combobox是可以轻松支持各种浏览器的HTML元素。它作为最新形式的对象作为组合框，用于通过给定文本字段中的选项填充数据。

HTML 中组合框的语法

我们知道，Combobox 是 的组合。标签和 元素，因此 Combobox 的语法仅在其自身内部定义。

此语法的代码如下：

<input type="text" list="value">
<datalist>
<option>content</option>
<option>content</option>
<option>content</option>
<option>content</option>
<option>content</option>
</datalist>

• 在上面的语法中，输入类型是一个将创建输入文本的元素，我们可以在其中获取用户的输入并显示它。该输入值将通过来选择HTML 标签中的元素。
• 使用上述语法，可以添加 JavaScript 代码来使用 Combobox 元素执行更多功能。像 onChange 这样的函数可以根据用户偏好从选择列表中选择一个选项。
• 一旦用户选择了该选项，它将保持在输出屏幕上所示的状态。

此语法的代码如下：

<input type="text" id="demo" name="comboboxdemo">
<select name=" optionlist " onchange="combo(this, 'demo')">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option> option 4 </option>
<option> option 5 </option>
</select>

Javascript

var example = listdemo ld.selectedIndex;
var demo = optionlist.options[example].innerHTML;
var demo = optionlist.options[example] .value;

HTML 中的组合框示例

以下是 html 中的组合框示例：

示例#1

代码：

<title>Example of Combobox</title>

<style>
.combo{
padding:10px;
}
</style>
<h1 id="Front-End-Development-languages">Front End Development languages</h1>

<select class="combo">
<option value="Select">Select....</option>
<option value="html">HTML 5</option>
<option value="css">CSS 3</option>
<option value="javascript">Javascript/Ajax</option>
<option value="bootstrap">Bootstrap</option>
<option value="react">React JS</option>
<option value="vue">Vue JS</option>
<option value="2">Angular 2</option>
<option value="4">Angular 4</option>
<option value="5">Angular 5</option>
<option value="6">Angular 6</option>
<option value="7">Angular 7</option>
<option value="8">Angular 8</option>
<option value="CSS fw">CSS framework</option>
<option value="rw">Responsive Web Design</option>
<option value="dom">DOM scripting</option>
<option value="preprocessors">Saas, Less</option>
<option value="api">HTML 5 API</option></select>

输出：

示例#2

代码：

<h2 id="Combobox-as-a-form-element">Combobox as a form element</h2>
<p>As we all know combobox is the combination of the Select tag and Form element. Here we are going to create same thing in which we are creating combolist in which user can select option as per their choice and this option will redirect to the that particular option so It can be able to open new form using this option .</p>

HTML forms Element

Anchor_tag Aside _tag dragdropdown Font_tag Block_elements Blockquote Colsapn inline_style Kbd Meta_tags Quotation Table_background Table_border Caption Select tag

输出：

从列表中选择一个选项后，它将链接到附加的表格或网页。单击提交值后，将显示带有元素的表单，如下所示：

示例 #3

代码：

<h2 id="Student-Details">Student Details</h2>

STUDENT REGISTRATION FORM

FIRST NAME
LAST NAME
DATE OF BIRTH
EMAIL ID
MOBILE NUMBER
GENDER	Male Female Transgender
CITY
PINCODE
STATE
COUNTRY
HOBBIES	Writing Sketching Designing Others
Percentage

输出：

结论

HTML 组合框是网页设计中创建选择列表最重要的元素之一。最新的浏览器最常使用它。它由 和 的组合组成。 .. 选择>用于从列表中选择适当选项的标签和 存储输入的元素。

以上是HTML 中的组合框的详细内容。更多信息请关注PHP中文网其他相关文章！