Combobox dalam HTML

HTML Combobox digunakan terutamanya untuk membina borang dalam HTML. Di mana pengguna boleh memilih pilihan daripada senarai mengikut keutamaan mereka. Ia dibentuk dengan elemen pilih dan jenis input = elemen "teks". Fungsi Combobox adalah sama seperti tag pilih. Ia juga mempunyai atribut tag dalam tag untuk memilih pilihan menu daripada senarai supaya seseorang boleh memilih pilihan mengikut pilihan mereka.

Combobox ialah elemen HTML yang boleh menyokong semua jenis penyemak imbas dengan mudah. Ia berfungsi sebagai bentuk objek terkini sebagai Kotak Kombo untuk mengisi data melalui pilihan dalam medan teks tertentu.

Sintaks KomboKotak dalam HTML

Seperti yang kita tahu, Combobox ialah gabungan tag dan elemen, jadi sintaks untuk Combobox ditakrifkan dalam dirinya sahaja.

Kod untuk Sintaks ini adalah seperti berikut:

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

• Dalam sintaks di atas, jenis input ialah elemen yang akan mencipta teks input di mana kita boleh mengambil input daripada pengguna dan menunjukkannya. Nilai input ini akan dipilih melalui elemen daripada teg HTML.
• Dengan sintaks di atas, seseorang boleh menambah kod javascript untuk melakukan lebih banyak fungsi dengan elemen Combobox. Fungsi seperti onChange boleh memilih pilihan daripada senarai pilihan mengikut keutamaan pengguna.
• Sebaik sahaja pengguna memilih pilihan, ia akan kekal seperti yang ditunjukkan pada skrin output.

Kod untuk Sintaks ini adalah seperti berikut:

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

Contoh Combobox dalam HTML

Berikut ialah contoh combobox dalam html seperti berikut:

Contoh #1

Kod:

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

Output:

Contoh #2

Kod:

<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

Output:

Selepas memilih pilihan daripada senarai, ia akan dipautkan ke borang atau halaman web yang dilampirkan. Dan selepas mengklik pada nilai hantar, ini menunjukkan borang dengan elemen seperti berikut:

Contoh #3

Kod :

<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

Output:

Kesimpulan

HTML Combobox ialah salah satu elemen terpenting dalam reka bentuk web untuk membuat senarai pilihan. Pelayar terbaharu menggunakannya paling kerap. Ini terdiri daripada gabungan .. tag untuk memilih pilihan yang sesuai daripada senarai dan elemen untuk menyimpan input.

Atas ialah kandungan terperinci Combobox dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!