Apa itu combo box HTML?

Question

HTML Combobox is mainly used for building forms in HTML. In which users are able to select an option from the list as per their preference. It is formed with select element and input type=”text” element.The functionality of the Combobox is as same as a select tag. It’s also having a <option>tag attribute within the <select >tag to select the menu option from the list so one can choose an option as per their choice.

Table of Contents Show

Syntax of Combobox in HTML
Examples of Combobox in HTML
Recommended Articles
Apa itu combobox HTML?
Apa fungsi dari combo box?
Apa itu combo box Select?

Combobox is the HTML element which can easily support all kind of browsers. It works as the latest form of objects as a Combobox for filling data through options in a given textfield.

Syntax of Combobox in HTML

As we know, Combobox is a combination of <select> tag and <input type=”text”>element, so the syntax for Combobox is defined within itself only.

Code for this Syntax is as follows:

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

In the above syntax, the input type is an element that will create input text where we are able to take input from the user and can show it. This input value is going to select through <select> element from HTML tag.
With the above syntax, one can add javascript code to do more functionality with the Combobox element. A function like onChange is able to choose an option from the selection list as per user preference.
Once the user selects the option, it will remain as it is still showing on the output screen.

Code for this Syntax is as follows:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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

List will be displaying through javascript is as follows:

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

Examples of Combobox in HTML

Examples of combobox in html are given below:

All in One Software Development Bundle(600+ Courses, 50+ projects)

Price
View Courses

600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,452 ratings)

Example #1

Code:

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

Example #2

Code:

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

After selecting an option from the list, it will be linking to the attached form or webpage. And after clicking on submit value, this is showing form with an element as follows:

Example #3

Code :

<!—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:

Conclusion

HTML Combobox is one of the most important elements in web designing to create a selection list. It is most commonly used in the latest browsers. This is made up with combination of <select> .. </select> tag for selecting appropriate option from the list and < input type=”text”> element to store input.

Apa itu combobox HTML?

Combo box atau disebut juga dengan drop down list merupakan sebuah kotak yang berisi beberapa opsi. Nantinya, kamu bisa memilih opsi yang telah disiapkan sebelumnya untuk mempermudah pekerjaan.

Apa fungsi dari combo box?

Combobox adalah sebuah fitur di Microsoft Excel yang memungkinkan pengguna untuk membuat daftar pilih berbentuk dropdown. Kamu bisa memilih salah satu dari daftar di dalam Combobox, sehingga penginputan data lebih mudah.

Apa itu combo box Select?

Combo Box merupakan sebuah elemen select (pilih) berisi list/beberapa pilihan yang di peruntukkan kepada user. User dapat memilih list yang berada pada Combo Box tersebut sesuai keinginan. Tag yang digunakan untuk pembuatan Combox Box adalah tag select disertai dengan tag option.