HTML Drop-down list

If you don’t know what is the correct HTML for making a drop-down list in HTML then this article is for you. To create a drop-down list you need to use the <select> tag and add an <option> tag inside it. Let’s see in detail how to create a dropdown list.

What is a selection list?

It contains a list of options, we can display the selection list in two different ways. Either we can display the selection list in a Drop-down list or list box. If we display the selection list in a drop-down list, the user can be able to select only one option. If we display the same selection list in a list box then the user can be able to more than one option. The selection list is one of the most important controls of a form it is used to get inputs like date of birth or qualification details or listing out some set of items.

What is the drop-down list?

You should use <select> and <option> tags to create a drop-down list. When you create a form, when it’s time to provide options, you should create a drop-down list using the <select> tag. You can also use the radio button to give options in forms, but if there are more than 5 options then you should create a drop-down list. For ex: you’re only going to provide 2 options for Gender, so you can use a radio button, but when it’s time to provide 12 options for DOB Month, you’ll need to create a drop-down list using the <select> tag.

And you’ll save space on your form by creating a dropdown list, where all the options appear in a single dropdown list. All menubars on the website are created using dropdown lists. Instead of giving the pages separately in the menubar, you can link all the pages with a single drop-down list. And using a dropdown list like this gives you a lot of benefits.

How to Create drop-down Lists

<p>Qualification:</p>
<select name="slctQualification">
<option value="PU">Intern(PU)</option>
<option value="UG">Under Graduate</option>
<option value="PG">Post Graduates</option>
<option value="ph.d">PH.D</option>
</select>

Result:

For the Correct HTML syntax for creating a drop-down list, we are going to use the select tag. Select tag is paired tag, so you can end with </select> closing select tag. In this selection, as I told selection list is a list of options, we need to add options to it.

So, we can add an option by using the <options> tag, the option tag is the child of the select tag. An option tag is a paired tag, you will add an opening and closing option tag. In between the opening and closing of the option tag, enter the option you want to provide in the drop-down list. You can give as many options as you want in the select tag, but the user can be able to select only one option out of the available option in the drop-down list.

Also, we can give values to each option by using the “value” attribute of the option tag. Notice that in the above code I have used the value attribute in the option tags. You need to give the name to the selection box. You can give your selection box name using the “name” attribute in the select tag. What happens when I access this name in code, whichever item is selected that item’s value is going to be returned back in code. In the above code, If the user selects the Undergraduate option, automatically “ug” value will be returned in the code when you will say the “slctqualification” dot value.

What is a list box?

Create a list box for users to select multiple (options) values ​​in the form. It will display all options without hiding them. To create a list box you simply create a drop-down list and add the “multiple” attribute to the <select> tag.

Create List box

<p>Qualification:</p>
<select name="slctQualification" multiple>
<option value="pu">Intern(PU)</option>
<option value="ug">Under Graduate</option>
<option value="pg">Post Graduates</option>
<option value="ph.d">PH.D</option>
</select>

Result:

Similarly, we can display the selection list in a list box instead of a drop-down list. To create a list box all you need is you need to add an attribute called “multiple” to the select tag. Look at the output of the code above, instead of a drop-down list the selection list is displayed. And the selection list is displayed in a list box where we can see all the list items. As you have set the attribute multiple users can able to select more than one option.

You can use the shift key or ctrl key to select more than one item. But you should always use the ctrl key to select multiple options because in the shift key you can select only consecutive (group) options. In the ctrl key, you can also select stand-alone options. If we use the name attribute of the selection list “slctqualification” dot value, then it is going to return the array of values. For, example, In the above code, You are going to return PU, UG if intern and Undergraduate are selected. If all the options are selected then we are going to get an array of all the selected options.

How to display the selected value of a drop-down list in HTML

<select id="language" >
<option value="English">English</option>
<option value="Spanish">Spanish</option>
<option value="French">French</option> </select>
<input type="submit" onclick="myFunction() ">
<p id="demo"></p>

<script>
function myFunction() {
var x = document.getElementById("language").value;
demo = "Your Entered Language : "+x
document.getElementById("demo").innerHTML = demo;
}
</script>

Live preview:

Select Language:

Follow the step below to find the value of a drop-down list:

1. Create your dropdown list using <select> and <options> tags as shown in the HTML code above.
2. Add an id attribute to the <select> tag and assign the ID name.
3. Create an input submit button to submit after the user selects an option. Add “onclick” attribute and give the Javafunction name as a value.
4. Write a function in JS to find and display the option selected by the user. Let’s say Function name is “myFunction()”.
5. Use the “getElementbyID” method to find the user value and give the ID name you gave to the select tag in parentheses like as in the code above. Store the value we found in the x variable
6. And Use “.innerHTML” method to display user selected option and give “demo” ID in the parenthesis.
7. Call the demo ID in HTML using the p tag.

Now run your code, and the option you selected will be displayed successfully.

Drop-down list vs List box

Drop-down list:

• In the Drop-down list, the user can select only one option.
• By default, only one option in the List box is display.
• The “multiple” attribute is not included in the <select> tag and is called the Drop-down list.

List box:

• In the list box, the user can select only one option.
• By default, all options in the List box are display.
• Adding “multiple” attribute to <select> tag will call list box.

Conclusion

The selection list is very useful in application forms. We can create a selection list to get the date of birth, we can create one drop-down list for a date, one drop-down list for the month, and a drop-down list for the year. Hope you guys have understood what is the correct HTML for making a drop-down list.