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中文網其他相關文章！