How To Select Multiple Options From A Drop Down List In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this article we will show you the solution of how to select multiple options from a drop down list in HTML, the dropdown can be used in any way, either hovering on a text and an image or in a list.
In HTML, the drop-down list is used to select one option from many options in a list.
As the topic says, we can also select more than one option. It depends on the OS the user is using. For either WINDOWS or MAC, the selection is done differently.
For WINDOWS, it is done by holding the CTRL button; for MAC, it is done by the COMMAND button. Now, let us understand the concept.
Step By Step Guide On How To Select Multiple Options From A Drop Down List In HTML :-
as previously said the dropdown can be used as text, image, or list.
at first we have to create a list by <ul> and <li>. We can also create a form by using the <form> attribute.
In this tutorial, we will use the form format. we can use <style> to customize the list.
As we know, today’s concept is about selecting multiple options from a drop-down list in HTML. Let us do it.
Here we will use the type of list that allows us to select multiple options.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To select multiple options from a drop down list in HTML </title>
<style>
h2{
color: rgb(10, 10, 236);
font-weight: bolder;
font-size: large;
text-decoration: underline;
}
select{
margin: 0px;
padding: 2px;
background-color: antiquewhite;
height: 300px;
width: 600px;
size: 20;
}
</style>
</head>
<body>
<h2>
SELECT THE MULTIPLE OPTION FROM THE DROP DOWN LIST:
</h2>
<form id="dropdown">
<select multiple>
<option value='Facebook'>Facebook</option>
<option value='Instagram'>Instagram</option>
<option value='YouTube'>YouTube</option>
<option value='Twitter'>Twitter</option>
<option value='LinkedIn'>LinkedIn</option>
</select>
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. to add CSS we used <style> tag inside the <head> tag.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h2> tag used to add heading here.
- Then create the <form> attribute to create the list.
- <select> tag created and also added multiple properties inside it to allow it to select multiple elements.
- We can style the form by adding margin, padding, background color, etc. we can also define the size of the form.
- Lastly for select the multiple elements for WINDOWS by holding the CTRL button and for MAC it is done by the COMMAND button.
Conclusion :-
Lastly here, in conclusion, here we can say that with the help of this article we can select multiple options from a drop-down list in HTML.
I hope this article on how to select multiple options from a drop down list in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
