Combobox in HTML

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 a select element and input type=”text” element. The functionality of the Combobox is as same as a select tag. It’s also having a tag attribute within the tag to select the menu option from the list so one can choose an option as per their choice.

Combobox is the HTML element that can easily support all kinds 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 tag and 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 can take input from the user and show it. This input value is going to select through element from the HTML tag.
• With the above syntax, one can add javascript code to do more functionality with the Combobox element. A function like onChange can choose an option from the selection list as per user preference.
• Once the user selects the option, it will remain as shown on the output screen.

Code for this Syntax is as follows:

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

Examples of Combobox in HTML

Here are the examples of combobox in html as follows:

Example #1

Code:

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

Example #2

Code:

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

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

Example #3

Code :

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

Conclusion

HTML Combobox is one of the most important elements in web designing to create a selection list. The latest browsers use it most commonly. This is made up of a combination of .. tag for selecting the appropriate option from the list and element to store input.

The above is the detailed content of Combobox in HTML. For more information, please follow other related articles on the PHP Chinese website!