And here's how the PHP script is used to get the HTML select option value:

". $_POST["selfphp"].""; } ?>

If the form indicates GET method, then use PHP array $_GET[“”].

Styling a Dropdown List with CSS

Now let's look at how to define dropdown list styles using the power of CSS. In the following demo I used some simple CSS properties and CSS3 gradient properties:

View online demo and code

Together with linear-gradient, the box-shadow property is used here. The complete CSS code looks like this:

Selcls ( padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to (#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

Rounded corners using the border-radius property

For the HTML select option, we'll set the CSS3 border-radius property to make the corners rounded. The color scheme also changes. You can experiment with borders, width, margins and other properties as you wish:

View online demo and code

Using Multiple CSS Attributes and Styles

To allow users to select multiple options from a list, you need to use the multiple attribute. In the example above, only one option can be selected. When using multiple, you can select multiple options by pressing the CTRL key:

View online demo and code

HTML tag and, defining HTML forms Online

We create websites and individual pages on the Internet to communicate with visitors.

HTML forms are used to register visitors on the site, for interactive surveys and voting, allow you to send messages, make purchases, and so on. HTML The form is created for one purpose: collecting and subsequently transmitting information for processing by a software script or via email.

Example HTML form | Enter the site

Tags, attributes and values

• - determine the shape.
• name="" - defines the name of the form.
• method="" - defines the method of sending data from the form. Values: "get" (default) and "post" . The "post" method is often used, as it allows large amounts of data to be transferred.
• action="" - defines the url at which the data is sent for processing. In our case - enter_data.php ..

- define such form elements as buttons, switches, text fields for data entry.

type="text" - defines a text field for data entry.

type="password" - defines a field for entering a password, with the text displayed in the form of asterisks or circles.

type="checkbox" - defines a radio button.

type="hidden" - defines a hidden form element - used to transfer additional information to the server.

size="25" - length of the text field in characters.

maxlength="30" - the maximum allowed number of entered characters.

value="" - defines the value that will be sent for processing if it relates to radio buttons or switches. The value of this attribute as part of a text field or button will be shown as, for example, Vasya or Login in the example above.

Example HTML form | Comments on the site

Name Mail

Tags, attributes and values

• action="http://site/comments.php" - defines the url to which data from the form will be sent.
• id="" - defines the name and identifier of the form element.
• name="" - defines the name of the form element.
• - define a text field as part of the form.
• cols="" - determines the number of columns of the form text field.
• rows="" - defines the number of rows of the form text field.

If between place text, it will be shown inside the field as an example that can be easily removed.

Example HTML form | Drop-down list

First position Second position Third position Fourth position

Tags, attributes and values

• - define a list with positions to select.
• size="" - determines the number of visible list positions. If the value is 1 , we are dealing with a dropdown list.
• - determine the positions (items) of the list.
• value="" - contains the value that will be sent by the form to the specified url for processing.
• selected="selected" - highlights a list item as an example.

Example HTML form | List with scroll bar

By increasing the value of the size="" attribute, we get a list with a scroll bar:

First position Second position Third position Fourth position

First position Second position Third position Fourth position

For this option, use the multiple="multiple" flag, which makes it possible to select multiple positions. Its absence allows you to select only one item.

type="submit" - defines a button.

type="reset" - defines a reset button.

value="" - defines the label on the button.

See additionally:

Thanks to the tag It became possible to create a drop-down list and a multiple choice list. If you are going to send data to the server, then the tag must be placed in the form (tag

). Below is an example:

What names do you like?
None
Ivan
Peter
Nikolai

What are the attributes of the select tag?

Tag has three useful attributes (we will not consider the rest, I have already talked about them). The first attribute is multiple , thanks to it you can make it possible to select multiple list elements. To select multiple elements, you need to hold down shift or ctr and click on the desired elements with the mouse. Below is an example of using the multiple attribute:

What names do you like?
None
Ivan
Peter
Nikolai

The second attribute is required , with its help you can “tell” the browser that the list must be selected before submitting the form, otherwise the browser will prohibit submitting the form and will display a corresponding message to you. The appearance of this message is entirely browser dependent and cannot be changed by the user. Below is an example of using the required attribute:

Yes or no?
Yes
No

The third attribute is size , which can be used to specify the number of list items to display. The size attribute can only contain an integer. The size attribute transforms the list, for example, if it is equal to 1, then the tag is displayed as a "drop-down list", and if the size attribute is greater than 1, then the drop-down list is displayed as a "scrollable list". Below are two examples of using the size attribute:

Yes or no?
Yes
No

Yes or no?
Yes
No

Greetings to all readers of my blog. Today I will tell you how to make a drop-down list in HTML, what tags and attributes you need to use, and also for what purposes you may need it.

The select tag and creating a dropdown list

So, a drop-down list in html is created using a paired select tag, in which paired option tags are placed. It is in them that all the options that will be offered when you click on the list are recorded. Example:

Choose an animal Bull Cow Sheep Horse

In this case, you will see what is displayed between the opening and closing parts of the option on the screen, and the value contained in the value attribute will be sent to the server or processed using a script.

The list in html can be regular or with multiple choice. To make it possible to select multiple items, you need to add an empty multiple attribute to select. To select multiple values, hold ctrl and press the left mouse button.

Another useful attribute is size . It allows you to choose how many rows to show in the dropdown list.

Another attribute is disabled . It makes the list unclickable and unclickable, but still visible on the page.

Required – html5 attribute. If set, the form will not be submitted without selecting a value from the dropdown list. In general, it becomes a must-have choice. While the attribute does not work in all browsers.

Option Tag Attributes

Actually, select only serves as a container for list items; they themselves are specified using the option tag. It has a value parameter, as we already found out, but besides this there are others. For example:
Disabled – makes the list item unavailable for selection. It will be displayed, but you cannot click on it.

Selected – the element will be selected by default. In a regular list, this attribute without a value can be assigned to only one item; in a multiple list, it can be assigned to several.

Important clarification for proper operation

If the selection result needs to be sent to the server or processed through scripts, then place the select in the form so that no errors occur. The fact is that the drop-down list was originally created as one of the form elements.

What is select used for?

Usually it can be useful to you if you register on your website or want to conduct a survey. The element has a drawback - it does not change very well appearance via css.

By default, when you click on a list, a blue frame appears; those list items over which the cursor is hovered are highlighted in the same color. To prevent the frame from appearing when clicked, or to be highlighted in a different color, you can write the following selector:

Select:focus(
outline: 1px solid orange;
}

The frame will now be orange.

Option can also be styled, but when you hover over an item, its background turns blue and for some reason this does not change through styles.

Option(
color: brown;
background: aqua;
}

By the way, maybe some of you know how to change the background color when hovering over an item via css?

That's all for now on the select tag and its use. None additional features there is no provision for it in html. All other operations with it can be performed using using javascript and php. For example, if you need to create a list to select the year of birth and there may be 80-100 different options, you won’t write them manually, will you?

This is precisely why you need to use programming, namely a loop. Well, okay, this is a topic for another conversation, but for today this is all the information I wanted to tell you. You can get acquainted with other main tags in html.

Description

HTML tag used to create a drop-down (drop-down) list that appears when a form element is clicked and allows the site visitor to select one of the predefined options.

Element

may contain two or more tags , which define the available selections in the drop-down list. Text of the first child element will initially be displayed in the drop-down list, that is, it will be the default value for the list. Change or set the default value for You can add the selected attribute to the desired option:

Volvo Saab VW Audi

The width of the dropdown will be determined by the longest text specified in the tag .

Attributes

autofocus: Specifies that the element should automatically receive focus when the web page loads. Possible values ​​for the autofocus boolean attribute: Example »

Note: the autofocus attribute is not supported in IE9 and later earlier versions, and in Firefox.

Disabled: Indicates that the element is inactive, meaning the user will not be able to interact with the element. Possible values ​​for the disabled Boolean attribute:

Example » form: Defines the form the element is associated with. The attribute value is the element identifier

. This attribute allows you to place an element in any place in the document, and not just as a descendant of the element .

Note: the form attribute is not supported in Firefox.

Multiple: Indicates that multiple options can be selected at one time. Multiple selections vary depending on operating system:

• Windows: Hold down the CTRL key to select multiple options.
• Mac: Hold down the CMD key to select multiple options.

Possible values ​​for the multiple logical attribute: Example »

Note: due to in various ways selecting multiple items and additionally notifying users that multiple options are available, it is recommended to use checkboxes instead of a drop-down list.

Name: Defines the name for the dropdown list. It can be used to access form data after it has been submitted, or to reference an element in JavaScript.