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
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.
Seperti yang kita tahu, Combobox ialah gabungan
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>
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;
Berikut ialah contoh combobox dalam html seperti berikut:
Kod:
<html> <head> <title>Example of Combobox</title> </head> <style> .combo{ padding:10px; } </style> <h1>Front End Development languages</h1> <body> <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> </body> </html>
Output:
Kod:
<!DOCTYPE html> <html> <body> <h2>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> <form action="C:\Users\Sonali\Desktop\HTML files\Dropdownlist.html"> <input list="html_elements" name="web_language"> <datalist id="html_elements"> <option value="Anchor_tag"> </option> <option value="Aside _tag"> </option> <option value="dragdrop"> </option> <option value="Dropdownlist"> </option> <option value="Font_tag"></option> <option value="Block_elements"> </option> <option value="Blockquote"> </option> <option value="Colsapn"> </option> <option value="inline_style"> </option> <option value="Kbd"></option> <option value="Meta_tags"> </option> <option value="Quotation"> </option> <option value="Table_background"> </option> <option value="Table_border"> </option> <option value="Caption"> </option> <option value="Select tag"> </option> </datalist> <input type="submit"> </form> </body> </html> <!--HTML Form Code --> <!DOCTYPE html> <html> <head> <style> .dropdownbtn { background-color: lightgreen; color: white; padding: 12px; font-size: 12px; } .dropdowndemo{ position:fixed; display: block; } .dropdownlist-content { display: none; position: absolute; background-color: deepskyblue; min-width: 120px; z-index: 1; } .dropdownlist-content a { color:black; padding: 14px 18px; display: block; } .dropdownlist-content a:hover {background-color: lightcyan;} .dropdowndemo:hover .dropdownlist-content {display: block;} .dropdowndemo:hover .dropdownbtn {background-color: palevioletred;} </style> </head> <body> <div class="dropdowndemo"> <button class="dropdownbtn">HTML forms Element</button> <div class="dropdownlist-content"> <a href="#">Anchor_tag</a> <a href="#">Aside _tag</a> <a href="#">dragdropdown</a> <a href="#">Font_tag</a> <a href="#">Block_elements</a> <a href="#">Blockquote</a> <a href="#">Colsapn</a> <a href="#">inline_style</a> <a href="#">Kbd</a> <a href="#">Meta_tags</a> <a href="#">Quotation</a> <a href="#">Table_background</a> <a href="#">Table_border</a> <a href="#">Caption</a> <a href="#">Select tag</a> </div> </div> </body> </html>
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:
Kod :
<!—Main page--> <!DOCTYPE html> <html> <body> <h2>Student Details</h2> <form action="C:\Users\Sonali\Desktop\HTML files\combodemo.html"> <input list="stud" name="demo"> <datalist id="stud"> <option value="Student Details"> </option> <option value="Registration"> </option> </datalist> <input type="submit"> </form> </body> </html> <!—Registration form code--> <html> <head> <title>Student Details</title> <style> h3{ text-align: center; } table{ color:white; background-color:chocolate; border-collapse: collapse; border: 2px solid black; } table.inner{ border: 0px } </style> </head> <body> <h3>STUDENT REGISTRATION FORM</h3> <form> <table align="center" cellpadding = "6"> <tr> <td>FIRST NAME</td> <td><input type="text" name="First_Name"/> </td> </tr> <tr> <td>LAST NAME</td> <td><input type="text" name="Last_Name"/> </td> </tr> <tr> <td>DATE OF BIRTH</td> <td><input type="date" name="Birth_date" /></td> </tr> <tr> <td>EMAIL ID</td> <td><input type="text" name="Email_Id" maxlength="100" /></td> </tr> <tr> <td>MOBILE NUMBER</td> <td> <input type="text" name="Mobile_Number" maxlength="10" /> </td> </tr> <tr> <td>GENDER</td> <td> Male <input type="radio" name="Gender" value="Male" /> Female <input type="radio" name="Gender" value="Female" /> Transgender <input type="radio" name="Gender" value="Transgender" /> </td> </tr> <tr> <td>CITY</td> <td><input type="text" name="City" maxlength="20" /> </td> </tr> <tr> <td>PINCODE</td> <td><input type="text" name="pincode" /> </td> </tr> <tr> <td>STATE</td> <td><input type="text" name="State" /> </td> </tr> <tr> <td>COUNTRY</td> <td><input type="text" name="Country" value="India" readonly="readonly" /></td> </tr> <tr> <td>HOBBIES <br /><br /><br /></td> <td> Writing <input type="checkbox" name="Hobby_1" value="Writing" /> Sketching <input type="checkbox" name="Hobby_2" value="Designing" /> Designing <input type="checkbox" name="Hobby_3" value="Cooking" /> <br /> Others <input type="checkbox" name="Hobby_4" value="Other"> <input type="text" name="Other_Hobby" maxlength="30" /> </td> </tr> <tr> <td>Percentage</td> <td><input type="text" name="percentage"/ maxlength="2" placeholder="marks in %"></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </body> </html>
Output:
HTML Combobox ialah salah satu elemen terpenting dalam reka bentuk web untuk membuat senarai pilihan. Pelayar terbaharu menggunakannya paling kerap. Ini terdiri daripada gabungan
Atas ialah kandungan terperinci Combobox dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!