DropDown List

HTML select dropdown: Learn to Create and style with CSS

The text visible to the user can be different to the text in the value attribute of tag. This is how you can create a dropdown, e.g.

This is how you can create a dropdown, e.g.

• The dropdown is created by using the tag.
• Inside the tag, you can create options by using the tag.
• Create as many options as you want.
• You may use the value attribute in the tag to access the selected option in scripting language like PHP, JS, jQuery etc.

You may also specify a CSS class instead of using ID to style the select–option dropdown.

In the following section, I will show you examples of using HTML dropdown from selecting the single option to using it with JavaScript / jQuery. The example also includes styling the select HTML tag with CSS/CSS3, Bootstrap framework. Let me start with a basic example to create a simple dropdown.

An example of creating a simple select-option

In this example, the tag is used to create a dropdown with three options. See the demo online by clicking the link or image below:

See online demo and code

The following markup is used in the above example for creating HTML select:

Using the value attribute

You may use the value attribute in tag. As mentioned earlier, the value can be different to the text displayed to the users. For example, you can show complete country or color names to the users while using a shortcode in the value attribute.

You may access this value in a scripting language like PHP or client side like JavaScript to perform certain actions.

See the following demo of creating a dropdown with value attribute:

See online demo and code

The following code is used for tag:

An example of accessing selected option in JavaScript

Let me move ahead and access the value/text of selected option and perform some action based on it. The same dropdown as in above example is created with options to select a color. After selecting the color, press the button to apply that color to the document. See the demo online:

See online demo and code

The following code is used to create dropdown:

This line of code is used in the JavaScript section to access the value of option:

var seltheme = document.getElementById(“selcolor”).value;

At the click event of the button, the JS function is called that assigns the selected value in the dropdown to a variable. This value is used in applying the color to the current document.

See the complete code including JS, markup and CSS in the demo page.

A demo of accessing visible text in jQuery

This time, I will use jQuery to access the value of selected option. You may access both the text as well as value in jQuery b y using different methods. In this demo, I will access visible text. See the demo online:

See online demo and code

You can see in the code, the value is different to text for each option in tag. As you select a color, the jQuery displays the visible text in an alert. The code is:

This is how its value is accessed in jQuery code:

See the complete jQuery code and markup in the demo page.

Similarly, you may access the value by using the $.val() jQuery method:

Replace this line in above example and it will display the shortcode/value of the color in value attribute rather visible text.

An example to get value in PHP script

In this example of getting the value of selected option of HTML dropdown, a form is created with a tag in the markup section. After choosing a color from the drop-down, click the “Submit” button. The form’s data will submit to the same PHP file and it will display the selected color. See the demo online:

See online demo and code

The form method used in the example is “post”, so you may get the form controls values by using the $_POST[“”] PHP array. This is the form’s code used in the example:

And this is how PHP script is used to get the value:

If you specified the “get” method in form then you could use the $_GET[“”] PHP array.

Styling the select dropdown by CSS

Now, let me show how you may style the dropdown by using the power of CSS. In the following demo, I have used a few simple CSS properties along with CSS3 gradient property.

See the demo and code online:

See online demo and code

Along with border linear-gradient, the box-shadow property is also used in the dropdown. The complete CSS class for this select dropdown is:

background : -webkit-gradient ( linear, left top, left 25, from ( #FFFFFF ) , color-stop ( 4%, #CAD9E3 ) , to ( #FFFFFF ) ) ;

Rounded borders by border-radius property

This dropdown is given the border-radius property of CSS3 to make the borders rounded. The color scheme is also changed. Play with border, width, padding and other properties as you want:

See online demo and code

Using multiple attribute and styling with CSS

In order to allow visitors choose multiple options in the tag, you may use the multiple attribute. In above example, you saw only one option could be selected.

By using multiple attributes, a user may select more than one options by pressing the ctrl key as using windows platform.

See a demo online by clicking the links below:

See online demo and code

Use Bootstrap framework and plug-in for creating beautiful select dropdowns

If you are using the Bootstrap framework then there are nice plug-ins for creating cool select dropdowns.

One such plug-in is Bootstrap-Select which is explained here. It adds useful features to default dropdowns. For example, you may search the options by adding a textbox. This is particularly useful if there are many options in the dropdown.

Similarly, all selected options are visible as ticked and you may set the limit of selected options if using multiple attribute.

See a few demos of these dropdowns, first a simple one where a user may choose two options.

See online demo and code

A dropdown with search option demo

Using the same plug-in and adding a text box allowing users to search the options.

See online demo and code

See the complete code in the demo page.

Источник

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.

Web development, programming languages, Software testing & others

Syntax of Dropdown List in HTML

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

 option1 option2 option3 option3 

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:

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.

 Math English Science Biology 

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

   
Seven Wonders of the world
 
 Taj Mahal Great Wall of China Christ the Redeemer Satue Machu Picchu Chichen Itza The Roman Colosseum Petra  
 

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

Example #2

    Mumbai Pune Nagpur Solapur Latur  
Multiple options can be selected here .Please press ctrl key and select multiple options at a time.
 function multipleFunc() 

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.

Example #3

    .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 .dropdowndemo:hover .dropdownlist-content .dropdowndemo:hover .dropdownbtn 
Hover Dropdown Demo
 
HTML forms Element 
Links Dropdown list Input Field Button Radio Buttons 
 
  

The dropdown list will be open on the hover effect.

Conclusion

We can conclude that the Dropdown list is used to select an option from the selection list. It is used to select single or multiple options at a time. Users can select an option from the list as per their choice, so it becomes more user-friendly. Attributes listed above is used with the select tags to do various selection operations with the Dropdown list.

Recommended Article

This is a guide to Dropdown List in HTML. Here we discuss how Dropdown List Work in HTML and its Examples with Code Implementation. You can also go through our other related articles to learn more –

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests
125+ Hours of HD Videos
33 Courses
9 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник