How is a drop down list done in html? HTML form elements - dropdown list (select, option, optgroup tags), text field (textarea), as well as the use of label, fieldset and legend Html dropdown button

Hello, dear readers of the blog site. As part of the study of 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 learn how to create drop-down (drop-down) lists, including with multiple choice, using select and option, how to construct text field through 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 hypertext markup language tools do not allow us to directly process this information, so with the help of HTML we create only appearance forms, and the necessary data is sent for processing. For this purpose, a special file written in one of the server languages ​​(most often PHP) is purposefully created on the web server. Let's say for feedback you can create a mail.php file, which will be the handler.

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

This information is essential, because even if you use all modern built-in developer tools (I remind you that 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, turn into a fun activity.

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

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

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

5. auto focus(doesn't matter) sets focus to the list right after the page is loaded. In addition, if the user is accustomed to doing most 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 any use of the mouse:

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

7. Form— links the list to one or more forms to which it belongs, but is outside the container

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

option tag attributes

1. value- determines 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 set by the name attribute of the select tag, and value(for this example— 1, 2, 3, 4, 5) corresponding to the selected line of the drop-down list:

2. Disabled— blocks the element of the drop-down list for selection.

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 one or another element of the list. If label is present, then the string that is 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 and is completely absent.

See. 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 appeared 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 shows the word "Textarea", which matches the value of label="Textarea".

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

If the multiple attribute is present, then more than one element can be selected:

optgroup tag attributes

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

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

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

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

A short video would be very helpful here:

Text field in form via textarea

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

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

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

1. Name- Specifies the name of the text area as a value to identify it after the form data is submitted when it is processed on the server.

2. Cols- field width, which as a parameter is set by the number of identical characters standing side by side, placed horizontally. The default value is 20.

3. Rows- height text field, determined by the number of rows. If the number of lines of text entered by the user is greater than the value specified by this attribute, a vertical scroll bar will appear to the right.

4. Maxlength- Specifies the maximum number of characters that can be placed in the text field. If the limit is exceeded, further input will not be possible.

Below is an example with all 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):

5. minlength- Specifies the minimum number of characters that must be entered in the text area. If the user tries to submit text with fewer characters, the browser will display a short message with information that will mention the need to complete the form content and how many characters have already been entered.

7. Readonly(without parameters) - if this attribute is attached 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. Autocomplete- indicates whether the browser should give hints when the user fills out the form based on previously entered data and makes it possible to automatically insert the appropriate text.

Has a total two parameters: on(on) and off(switched off). Here is an example code:

This attribute, set to "on", only works when the user's web browser has autocomplete form fields enabled.

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

Soft- a set of characters that does not fit in the field in width is automatically wrapped to a new line. At the same time, the processor the text will be sent as a single line. In the event that the user wraps the text in any desired place using the "Enter" key, then such a wrap is saved when submitting the web form.

Hard- hyphenation is performed automatically if the text does not fit into the field in width, and, when sent to the handler, the places of such hyphenation will be saved. This setting is only used in in conjunction with the cols attribute:

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

10. auto focus(no parameters) - Initiates focus on the text field when the page with the form is loaded.

11. Disabled- in contrast to 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:

Form attributes:

• The action attribute specifies a server file with a script responsible for the main processing of data sent from the form. Typically, the code for this file is written in a server-side programming language, such as php or perl.
• The enctype attribute indicates the type of information transmitted to the server, if it is just text data - text/plain , if files are sent with the form, then multipart/form-data should be specified.
• The method attribute specifies and defines the form of data transfer. We will not dwell on this in detail, but it should be said that for a more reliable transfer, the post method should be specified.

html form elements

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" > !}

Result:

• The value of the type attribute - text - indicates that this is a text field
• size - the size of the text field in characters
• maxlength - the maximum number of characters that fit in the field
• value - the initial text in the text field
• name - the name of the element, necessary for data processing in the handler file

Result:


Instead of text, a mask is displayed in the field - asterisks or circles

<input type="submit" value= "Send data">

Result:

The submit button collects all the form data entered by the user and sends it to the address specified in the form's action attribute.

<input type = "reset" value = "(!LANG:Clear form" > !}

Result:

The button returns the state of all controls to the original (clears the form)

<input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <input type = "checkbox" name = "js" value = "(!LANG:yes" checked = "checked" > !} javascript<br > <input type = "checkbox" name = "php" value = "(!LANG:yes" > !} PHP<br > <input type = "checkbox" name = "html" value = "(!LANG:yes" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML



Result:

A.S.P.
javascript
PHP
HTML

In html, a checkbox is used to organize multiple selection, i.e. when it is necessary and possible to select several answers

<input type = "radio" name = "book" value = "(!LANG:asp" > !} A.S.P.<br > <input type = "radio" name = "book" value = "(!LANG:js" > !} javascript<br > <input type = "radio" name = "book" value = "(!LANG:php" > !} PHP<br > <input type = "radio" name = "book" value = "(!LANG:html" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML




Result:

A.S.P.
javascript
PHP
HTML

radio button html serves for a single selection from multiple options

The checked attribute immediately sets the element to checked

Important: For elements radio it is necessary that the value of the attribute name all elements in the group had the same: in this case, the elements will work interconnectedly, when one element is turned on, the others will be turned off

Dropdown list HTML

Consider an example of adding a dropdown list:

A.S.P. JavaScript PHP HTML

Result:

• The dropdown list consists of the main tag - select - which has a closing pair, and each list item is an option tag, inside which the text of the item is displayed
• size attribute with value "one" indicates that the list in a collapsed form displays one item, the rest open when you click on the menu arrow
• The selected attribute of the item (option) indicates that this particular item will be initially visible, and the rest of the items are “collapsed”

For large and complex lists, there is an option add subtitles- optgroup tag with label attribute (inscription):

A.S.P. JavaScript PHP HTML ASP in Russian JavaScript in Russian

To provide an opportunity select multiple items at the same time you need to add the multiple attribute. But in this case, the size attribute should also be set to a value greater than 1:

Text

Result:

• The width of an element depends on the cols attribute, which specifies how many characters fit horizontally.
• The rows attribute specifies the number of rows in an element.

Other elements

Additional elements and attributes

• For controls radio and checkbox it is convenient to use additional elements that, firstly, make the text anchor to the radio or checkbox element itself, and secondly, add a stroke when clicked:

<input type="checkbox" id="book1"> <label for="book1"> A.S.P.</label>

A.S.P.

In the example, a label (label tag) is created for the checkbox element. Binding is done through the id attribute, the value of which is specified in the label's for attribute.

Result:



• The disabled attribute allows you to disable an element, making it uneditable by the user:

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" disabled = "disabled" >!} <input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <input type = "checkbox" name = "js" value = "(!LANG:yes" checked = "checked" disabled = "disabled" > !} javascript<br >


A.S.P.
javascript

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

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 which you can make it possible to select multiple list items. To select multiple elements, you need to hold down shift or ctr and click on the desired elements with the mouse. The following is an example of using the multiple attribute:

What names do you like?
None
Ivan
Peter
Nicholas

The second attribute is required , with which 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 the appropriate message for you. The appearance of this message depends entirely on the browser and the user cannot change it. The following is an example of using the required attribute:

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 "dropdown list", and if the size attribute is greater than 1, then the dropdown list is displayed as a "scrolling list". Here are two examples of using the size attribute:

Yes or no?
Yes
Not

You can create a dropdown list in HTML using the tag select. In addition to the dropdown (or "dropdown") list, the tag select allows you to create a list item with multiple selection. Syntax for using a tag select The HTML looks like this:

Electronics Syroezhkin Chizhikov Kukushkina

Here with the tag option the elements of the list are given.

Application result:

Electronics Syroezhkin Chizhikov Kukushkina

SELECT tag attributes

Consider the tag attributes select:

• name
• size- number of displayed lines in the list (number);
• multiple- includes the function of multiple selection of elements of the drop-down list;
• disabled- blocks access to the element;
• form- allows you to link a drop-down list to a form (may be needed if the list itself is outside the form to which it should be attached). The id of the form is passed as an argument.

Perhaps these are all the main attributes of the tag select which are most commonly used. Let's now see how to make a dropdown list in HTML using the specified attributes:

OPTION tag attributes

Tag option, as already noted, allows you to define the children of the dropdown list select, which in turn acts as a container. Tag option has its own attributes:

• disabled- establishes a ban on the selection of this element of the list;
• label- allows you to set a label for the current element of the list (instead of the text specified in the tag, the value of the label is displayed, which allows you to display a shortened value); Attention: the attribute is not supported in the Firefox browser
• selected- the current list item will be selected by default;
• value- the value that will be passed to the server;

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

Mr. Electronics Syroezhkin Chizhikov Kukushkina

The result of this example will look like this:

Mr. Electronic Syroezhkin Chizhikov Kukushkina

Nubex website builder has the ability to create custom forms using the form builder module. The work of drop-down lists in "Nubex" is described in the article:

The simplest HTML dropdown list is easy to create using the select tag. This is a container tag, option tags are nested in it - they are the ones that define the elements of the list.

There are several options for lists that can be made using the select tag: a drop-down list (options drop down after clicking on the main field or hovering over it) and a multiple-selection list - in which the user can select several items. The former are more common, they are a significant element of the navigation of modern sites. A multi-select drop-down list can be used, for example, in catalogs where you need to select several product characteristics.

You can change the appearance and properties of lists using generic and special attributes.

select tag attributes

1. Multiple - sets multiple choice.

2. Size - sets the number of visible lines in the list, that is, the height. And here it all depends on whether the multiple attribute is present or not. If yes, and you don't specify size, then if there is multiple, the user will see everything possible options selection, if there is no multiple, then only one line will be shown, and the visitor can read the rest when he clicks on the elevator icon on the right side. If the size height is set and it is less than the number of options, then a scrollbar will appear on the right.

3. Name - name. The drop-down list can do without it, but it may be necessary to interact with the handler program on the server. As a rule, the name is still indicated.

The select tag has no required attributes, unlike the option tag.

Nested option tag attributes

1. Selected - designed to select a list item. The user will be able to select more than one item if the multiple attribute is set (see above).
2. Value - value. This attribute is required. The web server must understand which list items the user has selected.
3. label. This attribute can be used to shorten list items that are too long. For example, "Milan" will be displayed on the screen, instead of the one specified in the option tag "Milan is the administrative center of Lombardy. Northern Italy". This attribute is also used to group items in a list.

As for the list width, it defaults to the length of the widest text in the list. Of course, the width can be changed using HTML styles.

Dropdown list in other ways

It can be done with CSS, for example, the list will appear when you hover over a page element. JavaScript provides excellent possibilities for creating lists, the work of which is simplified by the Jquery library. A drop-down list connected using this library can be very complex, for example, cascading. That is, when you select an element in one list, the following list appears, for example, there is a menu item "Women's Clothing" (when hovering, then when you select one of the types, for example, "Outerwear", a list with elements drops out: jackets, parkas, coats, short coats, fur coats, etc.

We briefly listed the main ways in which you can create a drop-down list. Of course, there are many nuances in and in JavaScript that allow you to change the functionality and appearance of lists.