Creating a form in HTML. How is a dropdown list done in html? Creation of groups of drop-down elements of form lists

Hello dear readers of the blog site. As part of the study of the intricacies, as the next task, we will continue to analyze the details of creating forms on the site using the appropriate ones.

Today we will analyze how to create drop-down (drop-down) lists, including multiple choice, using select and option, how to construct text field via textarea, and also talk about the possibility of extending the functionality of forms by using tags fieldset, label and legend.

Let me remind you that any form present on the page is created using and is designed to enter any information from the user and send it to the server (example -).

Unfortunately, the means of the hypertext markup language do not allow you to directly process this information, therefore, using HTML, we create only the appearance of the form, and the necessary data is sent for processing. For this purpose, a special file is purposefully created on the web server, written in one of the server languages ​​(most often, PHP). For example, for feedback, you can create a file mail.php, which will be the handler.

In practical use of the information obtained in this publication, do not forget about how it should look like, where the codes of all visible page elements, including forms, are always within the body tag.

This information is extremely necessary, because even in the case of using all modern built-in developer tools (remember, the first sign in the implementation of this functionality was), you must clearly understand the mechanism for using the main tags, then editing the HTML code, the need for which arises from time to time, will turn into a pleasant experience.

2. Multiple- this attribute, which has no parameters, allows multiple selection, in contrast to the above example, where you can select only one element (line). Try to select several lines in this list with the mouse (one at a time in any places, holding down the Ctrl key, or using Shift following in a row one by one):

3. Size- sets the height of the dropdown list, that is, the number of displayed lines. If the multiple attribute is present and size is not specified (as in the example above), then four lines are displayed by default, and, for example, with size = "5", five will already be visible:

Option Textarea Label Fieldset Legend

4. Required(has no parameters) - defines that a choice must be made before sending data to the handler. If an item from the list is not selected, then the form data will not be sent:

Option Textarea Label Fieldset Legend

5. Autofocus(has no value) - sets focus to the list immediately after the page is loaded. In addition, if the user is accustomed to performing the main part of the actions with the keys, then just such a pre-configured focus will help to make a choice from the list using the arrows on the keyboard without using the mouse:

6. Disabled(no parameters) - blocks access to the list (disables it). In practice, it is usually used in conjunction with scripts in cases where you need to include a drop-down list only when certain conditions are met:

7. Form- connects the list with one or more forms to which it belongs, but is outside the container

... In this case, the parameter is written in the role of the value of the form attribute. global id attribute which is added to the form tag:

Select Option Textarea Label Fieldset Legend from the list

Don't confuse the select tag attribute with the main tag for creating a form. In the example above, the id = "data" attribute was added to the form tag, and the form = "data" attribute was added to the select, which made it possible to associate the drop-down list with a specific form.

Option tag attributes

1. Value- defines the value from the drop-down list that will be sent to the server (form handler). Actually, the name is sent to the handler, which is specified by the name attribute of the select tag, and value value(for this example - 1, 2, 3, 4, 5) corresponding to the selected line of the drop-down list:

Option Textarea Label Fieldset Legend

2. Disabled- blocks a drop-down list item for selection.

Option Textarea Label Fieldset Legend

As you can see from the example, the "Option" line is inactive and cannot be selected.

3. Label- displays the text content (which is its value) of this or that list item. If label is present, then the line identical to the value of this attribute is displayed and the text content inside the option tag is ignored. The same happens if the content between is completely absent.

Textarea Tag Label Tag Fieldset Tag Legend Tag

Look. In the example provided above, the first line for option in the code is empty (on the left side of the table), but the label = "Option tag" parameter is specified, as a result, this text appears in the list (on the right side). The second line of code contains the text "Textarea Tag" as the content of the option tag, but the drop-down list on the right displays the word "Textarea", which matches the value of label = "Textarea".

4. Selected- highlights the current item in the drop-down list:

Option Textarea Label Fieldset Legend

If the multiple attribute is present, then it is possible to select more than one element:

Option Textarea Label Fieldset Legend

Optgroup tag attributes

If the drop-down list needs to be somehow ordered, for example, divided into groups, then for each of these groups a container is used, consisting of opening and closing optgroup tags, which contains a part of the drop-down list items. However, there are two attributes for configuring such a drop-down list.

1. Label- sets the name of each group as a parameter:

Option Textarea Label Fieldset Legend

The same, but with multiple and size = "7" of the select tag:

Option Textarea Label Fieldset Legend

2. Disabled(no values) - blocks the selection of elements of the group in relation to which it is set, moreover, inactive items are usually highlighted in gray:

Option Textarea Label Fieldset Legend

A short video will come in handy here:

Text field in the form via textarea

Another form element for the site that we will consider is a field with the ability to enter multi-line text into it. It can be created using the textarea tag. Without default attributes, applying this tag will give the following result:

Enter text:

Enter text:

In the field, you can carry out line breaks, while the text will be transmitted to the handler on the server, taking into account the line breaks made. The field can be stretched in width and length by grabbing the lower right corner with the mouse, which is marked with two diagonal stripes.

Now let's try to add several attributes with parameters to the original code:

1. Name- defines the name of the text area as a value for its identification after submitting the form data when processing it on the server.

2. Cols- the width of the field, which in the role of a parameter is set by the number of adjacent identical symbols placed horizontally. The default is 20.

3. Rows- the height of the text box, determined by the number of lines. If the number of lines of text entered by the user is greater than the value specified by this attribute, then a vertical scroll bar appears on the right.

4. Maxlength- indicates the maximum number of characters that can be placed in the text box. If the limit is exceeded, further entry will be impossible.

Below is an example with all of the above attributes, the effect of each of which you can check yourself by simply placing the required number of letters and lines in the text area (you can simply enter the same character several times):

Enter text:

Enter text:

5. Minlength- indicates the minimum number of characters that must be entered in the text area. If the user tries to send text with fewer characters, the browser will display a short message with information, which will contain a mention of the need to supplement the content of the form and how many characters have already been entered.

7. Readonly(without parameters) - if you attach this attribute to the textarea, then the text field will be inaccessible for users to change and will be read-only. But you can focus on it (move the cursor to the field and left-click), as well as select and copy (partially or completely) the text:

A few more attributes that implement additional functionality when filling in the fields:

8. Autoсomplete- specifies whether the browser should provide hints when the user fills out the form based on previously entered data and makes it possible to automatically insert appropriate text.

Has everything two parameters: on(included) and off(switched off). Here's some sample code:

Enter text:

This attribute with the value "on" only works when autocomplete form fields is enabled in the user's web browser.

9. Wrap- sets the rules for line wrapping in the text area for the browser using three values:

Soft- a set of characters that does not fit into the field in width is automatically wrapped to a new line. In this case, the handler the text will be transferred as one line... In the event that the user carries out the transfer of text in any desired place using the "Enter" key, then such transfer is saved when sending the web form.

Enter text:

Enter text:

Hard- hyphenations are made automatically if the text does not fit into the field in width, and, when sending to the processor, the places of such hyphenations will be saved. This parameter is only used in in conjunction with the cols attribute:

Enter text:

Enter text:

Off- disable line breaks. If you print a text fragment without mechanical transfer using the "Enter" key, then all the text will be placed on one line, and a horizontal scroll bar will appear:

Enter text:

Enter text:

10. Autofocus(has no parameters) - initiates focusing on the text field when the page with the form is loaded.

11. Disabled- unlike the readonly attribute (which also prohibits editing the contents of the field, but makes it possible to focus on it), completely blocks access to the text area, which is usually painted gray:

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, the dropdown list in html is created using the paired select tag, into which the paired option tags are placed. It is in them that all the options are recorded that will be offered when you click on the list. Example:

Choose an animal

In this case, what is displayed between the opening and closing parts of the option, you will see 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 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.

Another attribute is disabled. It makes the list inaccessible for clicking and viewing the items, but at the same time it is visible on the page.

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

Option tag attributes

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

Selected - the item will be selected by default. In a regular list, this attribute without a value can be set to only one item, in a plural list - to several.

Important clarification for proper operation

If the result of the selection 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 exactly as one of the form elements.

What is select for?

Usually it can be useful to you if you register on your site, or want to conduct a survey. The element has a drawback - it doesn't change its appearance very well via css.

By default, when you click on the list, a blue frame appears, the same color is used to highlight those items in the list that the cursor is hovering over. To prevent the frame from appearing when pressed, or to be highlighted in a different color, you can write a selector like this:

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 it does not change through the styles.

Option (
color: brown;
background: aqua;
}

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

That, in fact, is all for the select tag and its use. There are no additional features in html for it. All other operations with it can be performed using javascript and php. For example, if you need to create a list for choosing the year of birth and there may be 80-100 different options, would you mind writing them by hand?

This is exactly what you need to use programming, namely a loop. Well, okay, this is already a topic for another conversation, but for today this is all the information that I wanted to tell you. You can familiarize yourself with other basic tags in html.

The option HTML 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 can be different from the text specified in the value attribute. Here's how you can create a dropdown list:

  • The dropdown list is created using the tag defines options for selection using a tag
  • In the tag

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

In the next section, I'll show examples of using HTML dropdown in JavaScript / JQuery. The examples will also show you how to style

Using the value attribute

As mentioned earlier, the value of the value attribute can be different 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

For tag

Example of Accessing a Selected Option in JavaScript

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

View online demo and code

The HTML option value uses the following code:

The following line of code is used in JavaScript to access the value of the value attribute of a variant the meaning is different from the text. After you choose a color, jQuery displays the visible text in the alert. Tag code

This is how this value is accessed in HTML select option selected JavaScript:

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

It is also possible to access the value using the JQuery $ .val () method:

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

Replace this line in the above example 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 the drop-down list, the form is created using the tag

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

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

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

Defining dropdown styles with CSS

Now let's look at how to define the styles of the dropdown list

In this example we tagged

In the browser it looks like this:

Grouping menu items

Let's take a look at the next tag which is used to group related data in a dropdown name = "black & white"> label = "Whitelist">

In this example, we have selected 2 groups with the tag ... The element's label attribute sets the name of the selected group in bold:

In the following example, using the boolean disabled attribute, we will disable one group (" Group B"):

</span> An example of using the disabled attribute of the HTML tag <optgroup><span>

The result of our example:

List mute and multi-select

</span> The disabled and multiple tag attributes <select><span>

In this example, we have created two dropdown lists. For the first list, we used the disabled attribute, which prevents us from interacting with the list (disables it).

For the second list, we used the multiple attribute, which indicates that it is allowed to select several options in the list at once (through Ctrl in Windows and through Command on Mac).

In the browser it looks like this:

Text area

The result of our example:

Disabling the text area

Similar to the previously discussed elements, the tag


type = "submit" name = "submitInfo" value = "(! LANG: submit" > !}

In this example, we have created two text areas (element