Creating a form in HTML. How to create a drop-down list in html? Form with drop-down list in css examples

(doesn't work in Firefox).

selected List item selected by default.

Ham

cheese

Ham

RESULT:

Multiple choice list example ... Tea Coffee Milk Ham Cheese

Group of list items Container

allows you to group list items.

Ham

js JavaScript dhtml

DHTML

Ham

Moreover, for additional clarity, each group with

using CSS you can paint it in your own color. Example of highlighting groups of list items with color you can paint it in your own color. HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML you can paint it in your own color. A dropdown list in HTML can be created using a tag

select . In addition to the drop-down (or "drop-down") list, the tag allows you to create a list item with multiple selection. Tag usage syntax The HTML looks like this:

Elektronik Syroezhkin Chizhikov

Kukushkina

Here using the tag

option

list elements are specified. you can paint it in your own color.:

• Result of application:
• Electronics Syroezhkin Chizhikov Kukushkina SELECT tag attributes
• Let's look at the tag attributes name
• size- number of displayed lines in the list (number);
• multiple- enables the function of multiple selection of drop-down list elements;

disabled you can paint it in your own color.- blocks access to the element;

- allows you to bind a drop-down list to a form (may be necessary if the list itself is outside the form to which it should be linked). The form id is passed as an argument.

Perhaps these are all the main attributes of the tag Syroezhkin which are most often used. Let's now see how to make a dropdown list in HTML using the specified attributes: you can paint it in your own color. Dropdown list using HTML - Nubex Syroezhkin has its own attributes:

• size- sets a ban on selecting a given list element;
• label- allows you to set a label for the current list element (instead of the text specified in the tag, the value of the label is displayed, which allows you to display an abbreviated value); Please note: this attribute is not supported in Firefox.
• selected- the current list item will be selected by default;
• value- the value that will be transferred to the server;

Let's look at an advanced use case for the tag Syroezhkin:

Mister Electronic . In addition to the drop-down (or "drop-down") list, the tag allows you to create a list item with multiple selection. Tag usage syntax The HTML looks like this:

The result of the example above will look like this:

Mr. Electronics Syroezhkin Chizhikov Kukushkina

The Nubex website builder allows you to create custom forms using the form builder module. The operation of drop-down lists in Nubex is described in the article:

The HTML option tag is used to create a dropdown list that allows the user to select one option from a predefined set of values.

The text visible to the user may differ from the text specified in the value attribute. Here's how to create a dropdown list:

Green Yellow Black

• The dropdown list is created using the tag ;
  Inside a tag
  options for selection are defined using a tag ;
• In the tag you can use the value attribute to access the selected option with using PHP, JS, Jquery, etc.

It is also possible to specify a CSS class instead of using an ID to style the dropdown list.

In the next section, I will show examples of using HTML dropdown list in JavaScript/JQuery. The examples will also show how to set styles using CSS/CSS3 and Bootstrap framework.

Example of creating a simple dropdown list

This example uses the HTML select option to create a dropdown list with three options to choose from:

The example above uses the following markup to create a dropdown list:

5 10 15 20 25

Using the value attribute

As mentioned earlier, the value of the value attribute may differ from the text displayed on the page. For example, you can display the names of countries or colors for users, and use shortcodes in the value attribute.

In the following example, we will create a dropdown list with a value attribute:

View online demo and code

Group of list items The following code is used:

Maroon Green Yellow Blue Red

Example of accessing the selected option in JavaScript

Now let's create an example of accessing the value of a selected option and performing some actions. We create the same list as in the example above with color options. Once selected, click the button to apply that color to the document:

View online demo and code

For option value HTML the following code is used:

Maroon Green Yellow Blue Red Other

The following line of code is used in JavaScript to access the value of an option's value attribute :

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

When the button is clicked, a JS function is called, which assigns the value selected in the drop-down list to the variable. This value is used to apply a color to the current document.

Accessing visible text in JQuery

This time I'll use JQuery to access the value of the selected option: both the text and the value . In this demo, I'll be accessing the visible text in an option tag in HTML:

View online demo and code

In the code for each option in the tag

the meaning is different from the text. Once you select a color, jQuery displays the visible text in the alert. Tag code next:

Maroon Green Yellow Blue Red

Here's how to access this value in HTML select option selected JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

You can also access the value using the JQuery $.val() method:

var selectedcolor = $("#jqueryselect").val();

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

An example of getting a value in a PHP script

In this example of getting the value of the option selected from a dropdown list, the form is created using the tag in the markup section. After selecting a color from the drop-down list, click on the “Submit” button. The form data will be passed to the same PHP file, after which the selected color will be displayed:

View online demo and code

The form method used in the example is POST, so you can get the form values ​​using PHP array$_POST[“”] . This is the form code used in the example:

Select A Color:

Maroon Green Yellow Blue Red