In this tutorial, we will explore the Combobox element in HTML. The term "Combobox" derives from "combo," indicating a combination. Therefore, a combobox in HTML is a fusion of boxes. In HTML, it is created using a mix of elements like <select> and <option> tags. Typically, it is employed within HTML forms to create dropdown lists.
Combobox HTML Syntax:
Example
<label for="name">Name</label>
<input type="text">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
There are many tags in the above syntax that are defined below:
- The <label for="name"> tag is utilized to provide the name of the element. This tag uses the "for" attribute that provides more accessibility.
- The <input type="text"> tag is utilized to define the single-line text field where the user can input.
- The <select> tag is utilized to make a dropdown list.
- The <option> tag is utilized inside the <select> tag to define the options in a list.
Demonstrations of Combobox
Let's explore the process of generating a dropdown list in HTML through examples.
Demonstration 1:
In this demonstration, we are creating a dropdown list that showcases programming languages used in full-stack web development.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration of Combobox in HTML</title>
</head>
<body>
<h2>It is the demonstration of Comboxbox in HTML</h2>
<label for="name">Full Stack Web Development Languages</label> <br> <br>
<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Scala">Scala</option>
<option value="Ruby">Ruby</option>
<option value=".NET">.NET</option>
<option value="Angular">Angular</option>
<option value="React">React</option>
<option value="SQL">SQL</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="OC">Objective C</option>
</select>
</body>
</html>
Output:
The resulting display showcases a combobox featuring programming languages used in full-stack web development.
Demonstration 2:
In this demonstration, we will create a dropdown list and apply CSS to style it.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration of Combobox utilizing CSS</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(165, 249, 221);
}
label {
font-weight: bold;
color: #3c7c19;
}
select {
appearance: none;
-webkit-appearance: none;
width: 450px;
padding: 10px;
font-size: 18px;
background-color: #e1f5cf;
border: 1px solid #3c7c19;
border-radius: 0.25rem;
color: green;
cursor: pointer;
}
</style>
</head>
<body>
<h2>It is a demonstration of Comboxbox utilizing CSS.</h2>
<label for="name">Full Stack Web Development Languages</label> <br> <br>
<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Scala">Scala</option>
<option value="Ruby">Ruby</option>
<option value=".NET">.NET</option>
<option value="Angular">Angular</option>
<option value="React">React</option>
<option value="SQL">SQL</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
<option value="OC">Objective C</option>
</select>
</body>
</html>
Output:
The dropdown list can be observed below in the displayed outcome with certain styling effects applied to it.
Demonstration 3:
A dropdown list will be created below the <form> component. Users will be required to select a course from the dropdown list and then submit their selection.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Combobox inside the HTML form element</title>
<style>
select, input[type="submit"] {
border: 1px solid brown;
background-color: bisque;
color: brown;
font-size: 15px;
}
label {
font-weight: bold;
color: brown;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Combobox inside the HTML form element</h1>
<form>
<label for="course">Select your course and submit:</label>
<select>
<option value="instrumentation-engineering">Instrumentation Engineering</option>
<option value="bcs">Basics of computer</option>
<option value="MBBS">MBBS</option>
<option value="textile-engineering">Textile Engineering</option>
<option value="automobile-engineering">Automobile Engineering</option>
<option value="bvc">Basics of Visual Communication</option>
<option value="bmc">Bachelor of Mass Communication</option>
<option value="bmm">Bachelor of Mass Media</option>
<option value="ms">Master of Science</option>
<option value="web-designing">Web Designing</option>
<option value="jewellery-designing">Jewellery Designing</option>
<option value="mfa">Master of Fine Arts</option>
<option value="animation">Animation</option>
<option value="photography">Photography</option>
<option value="ba-llb">BA LLB</option>
<option value="other">Other</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Displayed below is the output showcasing a drop-down menu allowing users to choose a course.
Demonstration 4:
In this tutorial, we will create a dropdown menu and style it with CSS.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructing hyperlinks of HTML elements utilizing combobox</title>
<style>
.dropdown-button {
background-color: pink;
color: rgb(207, 11, 43);
padding: 10px;
font-size: 18px;
border: 1px solid rgb(207, 11, 43);
}
.dropdown {
position:fixed;
display: block;
}
.list {
display: none;
position: absolute;
background-color: rgb(137, 198, 219);
min-width: 140px;
z-index: 1;
}
.list a {
color:rgb(46, 23, 23);
padding: 15px 19px;
display: block;
}
.list a:hover {background-color: rgb(207, 254, 254);}
.dropdown:hover .list {display: block;}
.dropdown:hover .dropdown-button {background-color: rgb(243, 136, 154)}
</style>
</head>
<body>
<h3>Hyperlinks of HTML elements</h3>
<div class="dropdown">
<button class="dropdown-button">HTML Elements</button>
<div class="list">
<a href="#"> <div> tag </a>
<a href="#"> <address> tag </a>
<a href="#"> <article> tag </a>
<a href="#"> <aside> tag </a>
<a href="#"> <header> tag </a>
<a href="#"> <footer> tag </a>
<a href="#"> <table> tag </a>
<a href="#"> <th> tag </a>
<a href="#"> <tr> tag </a>
<a href="#"> <td> tag </a>
<a href="#"> <form> tag </a>
<a href="#"> <pre> tag </a>
<a href="#"> <section> tag </a>
<a href="#"> <ul> tag </a>
<a href="#"> <ol> tag </a>
<a href="#"> <li> tag </a>
<a href="#"> <ol> tag </a>
<a href="#"> <nav> tag </a>
<a href="#"> <dd> tag </a>
<a href="#"> <dt> tag </a>
<a href="#"> <dd> tag </a>
<a href="#"> <fieldset> tag </a>
<a href="#"> <figcaption> tag </a>
<a href="#"> <main> tag </a>
<a href="#"> <noscript> tag </a>
</div>
</div>
</body>
</html>
Output:
Displayed below is the output showcasing a combobox that includes hyperlinks to HTML elements.
Demonstration 5:
In this tutorial, we will create a dropdown list in the student enrollment form.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student registration form with combobox</title>
<style>
h3{
text-align: center;
}
table{
display: block;
color:white;
background-color:rgb(169, 101, 228);
border-collapse: collapse;
border: 2px solid rgb(64, 9, 91);
}
table.inner{
border: 0px
}
input[type="submit"], input[type="reset"] {
border: 2px solid rgb(64, 9, 91);
width: 90px;
height: 30px;
border-radius: 10px;
background-color: rgb(185, 148, 216);
color: rgb(64, 9, 91);
}
</style>
</head>
<body>
<h3>Student Registration Form</h3>
<form>
<table 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="dob " /></td>
</tr>
<tr>
<td>Email-id:</td>
<td><input type="text" name="email-id" maxlength="90" /></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" />
Others <input type="radio" name="Gender" value="Others" />
</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>Course:</td>
<td> <select name="course" id="course">
<option value="BA">BA</option>
<option value="BBA">BBA</option>
<option value="BCA">BCA</option>
<option value="B.Tech">B. Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="LLB">LLB</option>
<option value="BA LLB">BA LLB</option>
</select>
</td>
</tr>
<tr>
<td>Percentage:</td>
<td><input type="text" name="percentage" maxlength="2" placeholder="Marks in %"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
The output displayed below features a dropdown menu for the "course" within the student registration form.
Demonstration 6:
In this example, we will create a disabled dropdown list using an attribute called "disabled".
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Constructing a disabled combobox</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background-color: goldenrod;
}
label {
color: darkblue;
font-weight: bold;
}
select {
border: 1px solid darkblue;
background-color: rgb(194, 249, 231);
color: darkblue;
}
</style>
</head>
<body>
<h3>Disabled Combobox</h3>
<label for="months">Months</label>
<select name="months" id="months" disabled>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</body>
</html>
Output:
A disabled dropdown menu can be observed in the downward display. When attempting to access the dropdown list, it will not reveal any options as they have been deactivated.
Conclusion
In this tutorial, we have explored the concept of the combobox in HTML. A combobox is utilized to present users with a set of predetermined choices for selection. We have gained insight into how to implement and utilize a combobox through practical demonstrations.