The creation of that robot with forms in html. Select from list in HTML html drop-down list is displayed only once

For some butts, you can add non-primary attributes to the type data-class or data link. There is nothing to be afraid of, the stench is necessary for the correct functioning of the list, because additional information can be saved.

Let's go through the styles.

The main styles are found in the file cs-select.css. There are styles here that give the list a unique look that we call bachiti.

And in order to make the style unique and original, it is necessary to win the additions of power. For example, for the first butt () the following styles are used:

And to know the styles in the okremy file (for clarity) cs-skin-border.css.

Visnovok

Just don't do it for the unique design of your site! First smut - don't be afraid to experiment with design, gradually paint yoga. Raptome you create (through a path of experiments) the very one that suits your koristuvach and stinks to say “Wow, I like this design, what else is there on this site!” 😉 .

The simplest list you can see in HTML is easy to create with the select tag. The tag-container, the option tags are nested in the new one - the stink itself is set to the list element.

There are a number of options in lists, so you can search for additional select tags: a list to expand (options can be selected after clicking on the main field or hovering over a new cursor) and a list of multiple selections - in the new box, you can select a few items. The first widest, є significant element of navigation of modern sites. A list of multiple choices, which you can see, you can zastosuvati, for example, in catalogs, de need to select a few characteristics of a product.

You can change the current look and power of the lists with the help of universal and special attributes.

select tag attributes

1. Multiple - set multiple choices.

2. Size - sets the number of visible rows in the list, that is the height. І here everything is left to fall in order, є the attribute multiple chi nі. If so, if you do not specify the size, then for the presence of multiple coristuvach you can select all possible options for selection, if multiple times a day, then there will be less than one row of readings, and you can read the answer if you click on the elevator icon from the right side. Since the height of size is set and won't be less for the number of options, then the scrolling will appear on the right.

3. Name - im'ya. The list that you can see can be done without it, but it can be necessary for interaction with the program-computer on the server. As a rule, im'ya still tell.

The select tag doesn't have language attributes, but the option tag is visible.

Nested option tag attributes

1. Selected - assignments for the item to the list. The box can see more than one item, as long as the multiple attribute is set (div. more).
2. Value - value. Tsey attribute is obov'yazkovim. The web server is to blame for the change, yakі items in the list by selecting koristuvach.
3. label. For the help of this attribute, you can skip over other elements of the lists. For example, “Milan” appears on the screen, instead of the one indicated in the abstract option “Milan is the administrative center of Lombardy. Pivnichna Italy. This attribute is also selected for grouping items in the list.

According to the width of the list, then it will be installed behind the lock for the longest text on the list. Obviously, the width can be changed with additional HTML styling.

List of what you see in other ways

You can use it for additional CSS, for example, the list appears when you hover over the side element. You can use JavaScript to create lists, which the Jquery library will ask the robot to do. The list of connections for the help of the library can be more collapsible, for example, cascading. So when you select an element in one list, the next list is displayed, for example, use the menu item "Lady's clothes" (when hovering, it will disappear when you select one of the views, for example, "Top clothes", you will see a list with elements: jackets, parkas, coats, napіvpalto, fur coat skinny.

We overhauled the main methods, for the help of which you can create a list of what you can see. Understandably, there are a lot of nuances in JavaScript, which allow you to change the functionality and look of lists.

Hello, new readers of the blog site. As part of the exercise of wisdom, as a clergyman, we continue to sort out the details of the creation of forms on the site for help.

Today we will decide how to create lists that fall out (open up), including those with a multiple choice, for the additional select and option, in which order to construct text field for the help of a text writer, and also let's talk about the possibility of expanding the functionality of forms by way of adding tags fieldset, label and legend.

I’m wondering if it’s a form, if it’s on the side, it’s created for help and is recognized for the introduction of whether it’s information in the form of a coristuvacha and an amendment to the server (butt -).

It's a pity, the help of hypertext layouts does not allow you to process this information without intermediary, so for the help of HTML we create only a better-looking form, and the necessary data is forced for processing. With this method, a special file is created on the webserver, written one of the server mov (mostly PHP). Let's say, for a good connection, you can create a mail.php file, which will be a collector.

With a practical choice of otrimano in your publication of information, do not forget about those that can look decode all visible elements of the side, including forms, must always be in the boundaries of the body tag.

Ця інформація вкрай необхідна, оскільки навіть у разі використання всіх сучасних вбудованих інструментів розробників (нагадаю, першою ластівкою в реалізації цього функціоналу був ), ви повинні чітко уявляти собі механізм використання основних тегів, тоді редагування коду HTML, необхідність якого виникає час від часу, перетвориться busy at the reception.

2. multiple- this attribute, which does not have parameters, gives the possibility of a multiple choice on the view of the pointed butt, it is possible to select only one element (row). Try to see in this list with a bear in a row a sprat of rows (one at a time in some places, pressing the Ctrl key, or for the help of Shift coming one by one):

3. size- set the height of the list, which you see, so that the number of rows, which are displayed. If there is a multiple attribute, and the size value is not specified (as in the application), then for promotions, chotiri rows are brought up, and, for example, with size="5" you will already see five:

4. Required(Parameters are not possible) - signify that obov'yazkovo needs to make a choice before correcting the data collection. If an element is not included in the list, this form will not be edited:

5. auto focus(does not have a value) — sets the focus on the list once the page is taken. In addition, as the sound of the main part of the main part of the work of the keys, then the very same front-lined focusing to help the work of the selection of the list for the additional arrows on the keyboard without any kind of bear:

6. Disabled(No parameters) — blocks access to the list (enables it). In practice, sound victorious at the same time with scripts in quiet moods, if it is necessary to include a list of what is revealed, only when singing minds are victorious:

7. Form link to the list with one or more forms, to lie down to some wines, but to know the position of the container

Don't confuse the select tag attribute with the main tag for folding the form. The application has the id="data" attribute before the form tag, and the form="data" attribute before the select tag, which allowed the list to be linked to a specific form.

option tag attributes

1. value- assign those values ​​to the list, as if they would be sent to the server (formation form). Well, the sample is corrected by name, as it is set by the name attribute of the select tag, that value(for this butt - 1, 2, 3, 4, 5)

2. Disabled- blocks for selecting an element in the list that you can see.

As you can see from the butt, the “Option” row is inactive and it is impossible to select it.

3. label— displays a textual change (what is the meaning of) of that other list. If the label is present, then a row is displayed that has the same value as the attribute and ignores the textual space that is in the middle of the option tag. Those same vіdbuvaєsya, yakscho vmіst mizh і zovsіm vіdsutnya.

Marvel. For the hovered application, the first row for the option is for the empty code (at the left side of the table), and for the prescriptions, the parameter label="Option tag", as a result, the text itself appears in the list (at the right side). Another line of code is to replace the option tag with the text "Tag Textarea", and in the list on the right, the word "Textarea" is displayed, which matches the value of label="Textarea".

4. Selected— see the current item in the list:

Also, the multiple attribute, so that more than one element can be seen:

optgroup tag attributes

If the list, which appears, needs to be sorted, for example, divided into groups, then for the skin of these groups, vicorist container, which is formed by opening and closing the tags of the optgroup, in the middle of which there is a part of the points in the drop-down list. With this, two attributes are used to create a similar list that is being developed.

1. label— set the name of the skin group as a parameter:

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

2. Disabled(no value) - blocking the choice of elements in those groups, as many as 100 of the installations, and inactive points sound the vision with a similiar color:

A small video clip will be more useful here:

Text field near the form for additional text

Another element of the form for the site, which is visible to the world - a field with the possibility of entering up to a new rich text. Yoga can be done with the help of the textrea tag. Without attributes for capturing, adding this tag will give the following result:

At the field, you can change the transfer of rows, with which the text is transferred to the collector on the server with the correction of broken transfers. The field can be stretched along the width and length, having buried the lower right corner with a bear, which is designated by two diagonal females.

Let's try now to add to the cob code a spear of attributes from the parameters:

1. Name- designate the name of the text area as a value for identifying after the power of these forms for the hour of processing on the server.

2. Cols— the width of the field, as in the role of the parameter, is set by the number of the same symbols to stand on, placed horizontally. Value for loot - 20.

3. Rows- The height of the text field, which is determined by the number of rows. If there are a lot of rows in the text, which should be introduced by a shorthand, appear more for the value given by the attribute, then the right-hander will appear vertically scrolling.

4. Maxlength— Specify the maximum number of characters that can be placed in the text field. If the limit is moved further, the introduction will be impossible.

Below, the butt is pointed with the use of more refurbished attributes, you can interpret them especially for the skin one, simply by placing a number of letters and rows in the text area (you can simply enter one and the same character of the number of times):

5. minlength— indicate the minimum number of characters that should be entered in the text area. If you try to send a text with a smaller number of characters, then the browser will display a brief summary of the information, in order to solve the riddle about the need to add additional forms and about those symbols already entered.

7. Readonly(without parameters) - if you screw the attribute to the textarea, then the text field will appear as inaccessible change boxes and will be recognized as unreadable. And you can focus on the new one (move the cursor to the field and click the left button of the bear), as well as see and copy (often or repeat) the text:

Another piece of attributes that implement additional functionality for the hour of filling watering:

8. Autocomplete- indicate that the browser is to blame for seeing the hints when filling in the form of the text on the data that was previously entered, and giving the ability to automatically insert the correct text.

May everything two parameters: on(included) that off(Wimmed). Axis butt code:

This attribute with the value "on" is only applicable if the web browser of a particular user has autocomplete form fields enabled.

9. Wrap- Install for the browser the rules for transferring rows in the text area for an additional three values:

Soft- a set of characters, which does not move in the field beyond the width, is automatically transferred to a new row. At what obrobnik the text will be transferred in the view of one row. In that case, if you want to transfer the text in any necessary place for the help of the “Enter” key, then transferring is saved for an hour of overpowering the web form.

Hard- transfer the changes automatically, so that the text does not fit in the field in width, moreover, if the copy is overstretched, the space for such transfers will be saved. This parameter is victorious only in linking to the cols attribute:

Off- Inclusion of transfers of rows. If you want to override a text fragment without mechanically transferring it after the additional “Enter” key, the entire text will be placed in one row, moreover, a horizontal swag will appear:

10. auto focus(no parameters) — initiating focusing on the text field for the hour of focusing on the side with the form.

11. Disabled- on the view of the readonly attribute (which also hinders the editing of the fields, but also gives the ability to focus on a new one), I will block access to the text area again, so that it sounds like a Syrian color: