Dropdown List in HTML

The dropdown list in HTML is an important element for form building purposes or for showing the selection list from which the user can select one or multiple values. This kind of selection list in HTML is known as the Dropdown list. It is created using tag with value. It allows the user to choose any option as per their choice. It is always a good practice to use the drop-down list when you know the option value so that one can set any value as a default attribute, and others will be as option values.

Syntax of Dropdown List in HTML

Let’s see how the Dropdown list is going to be created:

Syntax:

<select>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option3</option>
</select>

Example:

<select name="color">
<option value="red">Red</option>
<option value="purple">Purple </option>
</select>

As shown in the above syntax ,

is a tag used to create Dropdown list. tag enclosed in the select tag is an attribute value or attributes for selection list, the value will be for showing whether the option is selected, disabled or with any other properties.option1,2….will be the name. With the help of CSS, we can give effects to our selection list, able to set positions like a relative, absolute, etc., able to set width and do many other functions.

Setting background color or color to the hover by using code:

.dropdown a:hover{
Background-color: color_name;
}

Position for the dropdown list is defined into two values: position: a relative who is used to display the content of the list exactly right below the select list button. With the help of position: absolute;

Min-width is one of the properties used to give a specific width to the Drop Down list. We can set it as long as our drop-down button by setting the width to 100%. The above syntax is defined for single attribute selection; now, we will see how multiple options are going to be selected from the item list.

Syntax:

<select multiple>
<option value="">option1</option>
<option value="">option2</option>
</select>

Example:

<select name="subject" multiple>
<option value="math">Math</option>
<option value="english">English</option>
<option value="science">Science</option>
<option value="biology">Biology</option>
</select>

How does the Dropdown List work in HTML?

After studying the syntax now, we will see how exactly the Dropdown list is going to work in HTML. There are some attributes that are used in the tag, which are as follows:

1. Name: This attribute is helpful to assign a name to the control, which is going to send to the server to be identified and take the required value.
2. Multiple: If the attribute is set to “multiple” then, the user can select multiple values from the selection list.
3. Size: The size attribute is used to define a specific sized scrolling box around the Dropdown list. It is also helpful for displaying several visible options from the list.
4. Value: This attribute will show an option in the selection list is selected.
5. Selected attributes enable at the very starting points of page loads to show already selected list item from the list.
6. Label: Label attributes works as another approach to labeling options value.
7. Disabled: If we want to show a drop-down list with a disable option, it is possible to use a disabled attribute in the HTML select list.
8. onChange: Whenever the user is going to select anyone the option from the dropdown list, then the event is triggered on item selection.
9. onFocus: Whenever the user hovers the mouse on the selection list to select an option from the list, it triggers an event to select the item.
10. Form: This attribute is used to define one or multiple forms that are related to the select field.
11. disabled: We should keep our drop-down list disable from the user with the help of this attribute.
12. required: Whenever filling some form, we want to show that this field is necessary to select any value from its list before actual sending form, so in this case, we define that the user is required to select any one value from the list.

Examples of  HTML Code

The following examples will show how exactly the Dropdown list is going to be used:

Example #1

Code:

<head>
<title>DropDown List</title>
</head>
<body>
<h4>Seven Wonders of the world</h4>
<form>
<select name = "dropdown">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
</form>
</body>

The above example contains different options like disabled, selected, required, etc., which is shown in the output screen. 

Output:

Example #2

Code:

<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>

As shown in the below screenshot, select multiple options from the dropdown list, press the given button and select multiple options by pressing on CTRL.

Output:

Example #3

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>
</head>
<body>
<h2>Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>
</body>
</html>

The dropdown list will be open on the hover effect.

出力:

結論

ドロップダウン リストは、選択リストからオプションを選択するために使用されると結論付けることができます。一度に 1 つまたは複数のオプションを選択するために使用されます。ユーザーはリストからオプションを選択できるため、より使いやすくなります。上記の属性は、ドロップダウン リストでさまざまな選択操作を行うために select タグとともに使用されます。

おすすめ記事

これは HTML でのドロップダウン リストのガイドです。ここでは、HTML でのドロップダウン リストの動作と、そのコード実装の例について説明します。詳細については、他の関連記事も参照してください –

1. HTML スタイル属性
2. HTML のトップ 10 の利点
3. HTML フレーム
4. HTML レイアウト

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Will R.E.P.O. Have Crossplay?

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7546

15

CakePHP Tutorial

1381

52

What is the format of the account name of steam

83

11

win11 activation key permanent

57

19

nyt connections hints and answers

21

90

Show More

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved