Html form submit button with dropdown list. HTML form elements - a drop-down list (select, option, optgroup tags), a textarea, and applying a label, fieldset and legend. Optgroup tag attributes

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

There are several options for lists that can be made using the select tag: a drop-down list (options drop out after clicking on the main field or hovering over it) and a multiple choice list - in it the user can select several items. The former are more common; they are an important navigation element in modern websites. The multiple choice 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 custom 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 do not specify size, then in the presence of multiple, the user will see all possible choices, if multiple is absent, then only one line will be shown, and the rest of the visitor will be able to read when he clicks on the elevator icon on the right side. If size is specified and it is less than the number of options, then a scroll bar will appear on the right.

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

The select tag does not have the required attributes, unlike the option tag.

Option nested tag attributes

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).
Value - value. This attribute is required. The web server must understand exactly which list items the user has selected.
Label. With this attribute, you can shorten list items that are too long. For example, “Milan” will be displayed instead of the option “Milan is the administrative center of Lombardy” specified in the tag. Northern Italy". This attribute is also used to group items in a list.

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

Dropdown in other ways

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

We've roughly listed the main ways in which you can create a dropdown list. Of course, there are a lot of nuances in and in JavaScript that allow you to change the functionality and appearance of lists.

In this article, we will look at the elements that allow you to create drop-down lists, learn how to form groups in these lists, consider how to disable items and even groups of lists, get acquainted with the element that allows you to create a multi-line text field, you can use it later inside HTML forms (element

Drop-down list

The first item in the list is usually displayed as selected, but you can add the selected attribute to that item to set a predefined option.

let's

Example of using an element <select>

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 \u003d "black & white"\u003e label \u003d "Whitelist"\u003e

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

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

Example of using the disabled attribute of the HTML tag <optgroup>

The result of our example:

List mute and multi-select

The disabled and multiple tag attributes <select>

In this example, we have created two dropdown lists. For the first list, we used the disabled attribute, which does not allow us to interact 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 has a disabled boolean attribute that indicates that the text area should be disabled (unavailable for user interaction). The attribute can be used in conjunction with scripts, for example, until some condition is met, the element is inactive. Let's look at an example of use: <!DOCTYPE html> <html> <head> <title> The disabled and name tag attributes <textarea></title> </head> <body> <form> <textarea name = "userInfo" > The text field is available for filling. The text field is not available for filling.

), we set unique names for the first and second areas with the name attribute. For the second text area, using the disabled attribute, we specified that it will be disabled on page load. In addition, we placed a button inside the form that serves to submit the form (element <input> with the button type "submit form": type \u003d "submit"). The result of our example: <h2>Tooltip for text area</h2> And so you and I will consider the final example and move on to the practical task of the article of this tutorial. Thanks to the (HTML tag <textarea>) it is allowed to specify the text of the tooltip, which describes the expected value for the user to enter into the element. The hint text is hidden when the user enters a value (any character) into the text field, if you remove it, the hint will be displayed again. Let's look at an example of use: <!DOCTYPE html> <html> <head> <title> Placeholder and readonly tag attributes <textarea></title> </head> <body> <form> <textarea placeholder = "Enter information in the text box"> "The field is read-only" readonly\u003e
type \u003d "submit" name \u003d "submitInfo" value \u003d "(! LANG: submit" > !}

In this example, we have created two text areas (element ), for the first and second areas with the attribute we set a hint for the user, which is displayed with a pale color of the text inside the element. For the second text area with the readonly attribute, we specified that it will be read-only (the content cannot be changed). Note that if the text field is read-only, then the content cannot be changed, but the user can navigate to the content, select it, and copy it. In addition, we placed a button inside the form that serves to submit the form (element <input> with the button type "submit form": type \u003d "submit"). The result of our example: <h2>Questions and tasks on the topic</h2> Complete the Practice Activity before moving on to the next topic: <ul><li>Using the knowledge gained, compose the following vacancy posting form:</li> </ul>Before proceeding with the task, open the example in a new window and carefully examine the form in order to repeat all its points. To complete the task, you will need the knowledge from the article. If you missed it, then come back to study it. After you complete the exercise, inspect the page code by opening the example in a separate window to make sure you did everything correctly. A dropdown list in HTML can be done using the tag select... In addition to the dropdown (or "dropdown") list, the tag select allows you to create a multiple choice list item. Tag Usage Syntax select The HTML looks like this: <select> <option>Electronic</option> <option>Syroezhkin</option> <option>Chizhikov</option> <option>Kukushkina</option> </select> Here using the tag option list elements are set. Application result:Electronics Syroezhkin Chizhikov Kukushkina<h2>SELECT Tag Attributes</h2> Consider tag attributes select: <ul><li>name</li> <li>size - the number of displayed lines in the list (number);</li> <li>multiple - includes the function of multiple selection of items in the drop-down list;</li> <li>disabled - blocks access to the element;</li> <li>form - allows you to associate a drop-down list with a form (it may be needed if the list itself is outside the form to which it should be attached). The form id is passed as an argument.</li> </ul>Perhaps these are all the main attributes of the tag selectwhich are most commonly used. Now let's see how to make a dropdown list in HTML using the specified attributes: <html> <head> <title>Dropdown list using HTML - Nubex</title> </head> <body> <form id="nubexForm" action="do.php"> <input type="submit" value="Send message" /> </form> <select name="nubexSelect" size="3" multiple form="nubexForm"> <option>Electronic</option> <option>Syroezhkin</option> <option>Chizhikov</option> <option>Kukushkina</option> </select> </body> </html> <h2>OPTION tag attributes</h2> Tag optionas noted, allows you to define the children of the dropdown selectwhich, in turn, acts as a container. Tag option has its own attributes: <ul><li>disabled - sets a ban on the selection of this list item;</li> <li>label - allows you to set a label for the current list item (instead of the text specified in the tag, the label value is displayed, which allows you to display an abbreviated value); Note: the attribute is not supported in the Firefox browser</li> <li>selected - the current item in the list will be selected by default;</li> <li>value - the value that will be transmitted to the server;</li> </ul>Let's look at an advanced use case for the tag option: <select> <option label="Электроник" value="1" selected>Mr Electronic</option> <option>Syroezhkin</option> <option disabled>Chizhikov</option> <option>Kukushkina</option> </select> The result of the given example will look like this:Mr. Electronic Syroezhkin Chizhikov KukushkinaIn the site constructor "Nubex" it is possible to create arbitrary forms using the form constructor module. The operation of drop-down lists in "Nubex" is described in the article: 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. <h2>The select tag and creating a dropdown list</h2> 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 <select> <option value = "Bull">Bull</option> <option value = "Cow">Cow</option> <option value = "Sheep">Sheep</option> <option value = "Horse">Horse</option> </select> 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 html list can be regular or multiple choice. To make it possible to select multiple items, 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 items, but it is still 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. <h2>Option tag attributes</h2> 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 example: 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. <h2>Important clarification for correct operation</h2> 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. <h2>What is select for?</h2> 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 list items 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 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 it does not change through 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 the 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, will you not write 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. Greetings to you, dear readers of the blog site. Today I want to talk about such as HTML forms. Whatever the engine of your site (cms), it will definitely use in one form or another forms created using Form and Input tags, as well as attributes and parameters Button, Checked, Value, Checkbox, Radio, Checkbox, Submit ...Well, you can also add elements to this to create drop-down lists and text fields - Select, Option, Textarea, Label, Fieldset, Legend.<h2>Why are we needed and how do forms work on modern websites</h2>The same site search string () is created using these tags, and then search on your project will be mandatory. Therefore, understanding how they are arranged and work will not hurt you at all for successful work on the design, and even with self-promotion and promotion it will not be superfluous.So, with the rationale for the need to study these elements, I think no more questions should arise, so it's time to move directly to the study of their possible options.Yes, I also want to remind you that we have already reviewed a lot of materials on the topic of hypertext markup language, for example, three) and.At its core, forms consist of elements, for the creation of which, inside the main container, from Form tags, various tags are inserted - Checked, Value, Checkbox, Radio, Checkbox, Submit, etc. We just need to place its code in any convenient place of the site template by specifying with tags and their attributes how it should look.This could be a text box with a submit button for the query you entered, choices with radio buttons (where you can leave only one of the provided buttons pressed), multiple text boxes with a submit button (), and more.For example, in the case of "search", using the Value attribute, you can specify what exactly will be written on the button located next to the field for entering a query. The data entered in the forms must be further processed in some way.For example, in case of feedback, the user, after filling in the field with his name, enters his E-mail and the text of the message, and then clicks on the send button, will be entitled to hope to send data from the form to the E-mail of the author of the site. But unfortunately, it is not possible to implement this using only one hypertext markup language ().For these purposes, a special handler program is required, which, after the user clicks on the send button, will take all the data from the feedback fields and send it to the resource owner by E-mail. Which program will do this, you must specify yourself using the Action attribute.Usually a processing program is a script written in PHP. Therefore, in the Action attribute of the Form tag, you will need to specify the path to the file of this script, which is located on your hosting server. I will give as an example a subscription to the RSS feed of my blog via E-mail:A bit incomprehensible, probably, it seems at the beginning, but I think that everything will become clearer as we continue the story.<h3>Form and Input tags for creating buttons, checkboxes and radio buttons</h3>Any form must be enclosed in opening and closing tags Form... This is a kind of container for their creation. This tag has a number of required and optional attributes:<ol><li>Name - a unique name that must be specified if several web forms will be used in the Html file where you are doing something</li><li>Action - a required attribute indicating the path to the script, which will receive data from it for further processing</li><li>Method - using it you can change the method of transferring data from this web form to the script of the handler file. If you do not specify it, then the Get method will be used by default, which, in fact, is intended mainly for variables and short messages, and, moreover, in an open way transferring data through the address bar of the browser. To pass form data to the handler script, it is still better to use pOST methoddesigned specifically for sending text messages in a closed way</li> </ol>Consider the rest of the tags that allow you to create a variety of web forms. The most versatile is Input... Inside it, the Type attribute must be prescribed, which determines what exactly the HTML form created with this tag will be.The following elements can be created using Input and Type:<ol><li>single line text fields (Type \u003d "Text")</li><li>fields for entering a password (Type \u003d "Password")</li><li>checkboxes (Type \u003d "Checkbox")</li><li>radio buttons (Type \u003d "Radio")</li><li>hidden fields (Type \u003d "Hidden")</li><li>regular buttons (Type \u003d "Button")</li><li>buttons for sending data to the handler (Type \u003d "Submit")</li><li>buttons for bringing the web form to its original state (Type \u003d "Reset")</li><li>fields for uploading files to the server (Type \u003d "File)</li><li>buttons with an image (Type \u003d "Image")</li> </ol>Input has no end tag. What exactly the web form created with it will look like depends entirely on the parameter specified in the Type attribute. If Type is not specified, then a text field will be created by default.<h3>Examples of forms created on Input with different values \u200b\u200bfor Type</h3> <h3>Other attributes of the Input tag and examples of their use</h3>Let's see what the rest of the attributes are for:<ol><li>Name - if the data is to be sent to the script of the handler program, then you must specify the parameter for the Name attribute. Under this name, the data submitted from the form will appear in the information handler program.</li><li>Size - it sets the size of the field of the created web form. The value is indicated in the number of characters that can fit in this field. If Size is not specified, then the default width will be 24 characters</li><li>Maxlength - by default, the number of characters that can be entered in the Html form is not limited, but using Maxlength you can set this limitation. You will not be able to enter more characters than will be indicated in the field</li><li>Value - using it you can set what exactly will be written by default in the field or on the button for sending data</li><li>Checked is a flag attribute that can be inserted into Input for radio buttons (radio) or for checkboxes (checkbox). In this case, this radio button or checkbox will be active when loading a page with a web form (there will already be a check mark in them)</li> </ol>Now let's go over everything examples of forms with Input... The appearance of the text field is similar to the appearance of the password input field, so we will only consider the option of creating Text, for example, to enter an email address:<img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png' width="100%" loading=lazy>Now let's look at creating a web form with radio buttons (Radio):<img src='https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-45-36.png' width="100%" loading=lazy>Note that this form uses the Input tag twice — once to create each of the two radio buttons. Moreover, each of them contains the Name attribute with the same value (rezultat), and the Value value is different (YES and NO).This means that when processing it, if any of the radio buttons are selected, a variable will be sent whose name is written in Name, but the value of this variable will depend on which radio button was selected.Let's consider an example of creating a web form with checkboxes:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/26-06-201323-46-30.png' width="100%" loading=lazy>Checkboxes differ from radio buttons by the ability to select several options at once. Name is used to define in the handler file which checkbox the checkboxes are in, and Value sets the value that will be sent to the handler (if Value is not specified, then the text located next to this checkbox will be sent to the handler).<h2>Select, Option, Textarea, Label, Fieldset, Legend - drop-down lists, text areas and other elements of web forms</h2>To begin with, I want to remind you a little of what, in fact, web forms are and why they are needed on the site pages. They are primarily designed to repeat the elements available in any operating system in a user-friendly way: buttons, text input fields, drop-down lists, checkboxes, radio buttons, and the like.All users, without any additional explanation, understand the purpose of these elements and if they see the Html button of the form, they understand that they need to click on it.Moreover, all its constituent elements (like Select, Option, Textarea, Label, Fieldset, Legend) are already finished workpieces (containers), to insert which it will be enough just to use the required tag with the necessary attributes and parameters.Browsers themselves know how to display a particular element of a web form. True, the options for displaying the same element of it in different browsers may slightly differ from each other, but, as a rule, not significantly.So it turns out that web forms in Html are an attempt to transfer key elements used in any operating system, to the pages of the website. But why might they be needed on site pages?In principle, for the same purpose for which similar elements are used in operating systems - the transfer of data from the user. In the case of forms, data from the user is transmitted to the server, where it is processed by a special program (unfortunately, the hypertext markup language does not allow data processing).Although, data can be sent not only to the server, but also, for example, by e-mail to the address specified in the Action attribute of the Form tag. When sending data from Html to E-mail, the user who fills in the fields, after pressing the button for sending data, will launch the mail program used on his computer by default.The opening Form tag in this case should look something like this: <form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain"> <h3>Select and Option - dropdown tags</h3>All elements of a web form that create fields with drop-down lists are formed in the same way. First, the container of the combo box is set using the opening and closing Html Select tag. And then inside this container, separate containers are created with the items (elements) of this list. This is done using Option opening and closing tags.It turns out something like this:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-21-18.png' width="100%" loading=lazy>But this is a simplified construction, since select and Option have a number of attributesthat define the properties and appearance of the created dropdown box.<ol><li>Name - you must specify a unique name for this web form element created using Select. This name will be passed to the server in the data handler program as the name for the variable. The value of the Value attribute (set in Option for each item) of the drop-down list item that the user selects will be passed as the value of this variable.</li><li>Size - you can use it to set the number of displayed items. In other words, with the help of Size, you can set the height of the list, measured in the number of displayed lines. If you do not explicitly specify the Size value in the Select tag, then the default value of the drop-down list height will be used, and it will be different in the absence or presence of the Multiple attribute in Select: <ol><li>If Multiple is present in Select, then the height of the drop-down list in the web form will be equal to the number of its elements by default. Those. all items in the multiple choice dropdown will be shown. See an example of a plural below. If the Size attribute in Select is set to less than the number of items, a scroll bar appears on the right.</li><li>If there is no Multiple in Select, then the height of the drop-down list in the web form will be equal to one line by default. Those. only one line will be visible, and the rest of the items will be available only when you press the elevator button (on the right). See example below</li> </ol></li><li>Multiple - assigning this attribute in the Select tag will allow you to create a drop-down list with the ability to select multiple items at the same time. Read more about this attribute below.</li> </ol>Drop-down forms can be divided into two options. In the first option, you can select only one item (line) of the field with a drop-down list, in the second option - holding Ctrl or Shift you can select several of the available items at the same time.In this case, in the second option, data on all selected items will be sent to the server. Which drop-down list will be created is determined by the presence or absence of the Multiple attribute in the Select tag.Multiple is specified in Select without a parameter, since it is written simply Multiple and that's it. If it is present, it will create a drop-down list webform with the possibility of multiple selection (holding Ctrl or Shift).A variant of the field with a drop-down list, which will multiple choice possible, will look something like this:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-23-55.png' width="100%" loading=lazy>On the right is an example of a web form for a multi-select dropdown list, which is based on the code above. As you can see, holding Ctrl or Shift can select several items at the same time.If there is no Multiple attribute in the Select tag, then only one item of this drop-down list (row) can be selected.<img src='https://i0.wp.com/ktonanovenkogo.ru/image/27-06-20130-25-25.png' width="100%" loading=lazy>An example where only one item can be selected can be seen here:Label Select SelectED Legend website<h3>Option Tag Attributes</h3> <img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-36-11.png' width="100%" loading=lazy>In the created drop-down list (using Select and Option), you can add something like separators with the heading of the groups, which will differ from the rest of the menu items in font style.To create a group from the items in the drop-down list, you need to enclose them in the opening and closing tags of the Optgroup form, and in the opening tag of Optgroup, write the Label attribute, as a parameter of which you will need to enter the desired group name.For example like this:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-38-10.png' width="100%" loading=lazy>Label Select SelectED Legend website <h2>Textarea - creating a text field in a form</h2>There is one more element of web forms that we have not considered - Textarea (a field with the ability to enter multi-line text). It is created using the paired Html tag Textarea. Moreover, in it you can transfer text to a new line and it will be transmitted to the server, taking into account the transfers made.So, to create a multi-line text field, you need to register the opening and closing Textarea, and between them you can add text that will be visible when the page with the web form is loaded. The user can then erase this text and write his own. <form> <textarea rows="3" cols="15" name="textt">What can you tell us about yourself?

As you can see, clicking on the text to activate this element is useless - you need to click on it yourself. This is exactly the state of affairs and is intended to fix the tag Label. It allows you to make the text next to the web form element clickable, which is undoubtedly will improve usability.

But how to link the Html element of the form and the text? To do this, add an ID with a unique parameter to the attribute, and surround the text with the opening and closing Label tags. And that is not all. In the opening Label tag, you need to register the For attribute, the parameter of which must be exactly the same as the ID attribute in the Html tag of the form element. It turns out something like this:

As you can see, now, thanks to the use of Label, web form elements can be activated not only by clicking on it, but also by clicking on the text located next to it.

Fieldset and Legend - breaking the shape into pieces

You've probably often seen that large forms in Html are divided into groups (Fieldset), which are surrounded by a frame, and each such group has its own title (Legend). This is done with just two tags: Fieldset and Legend. They are paired, i.e. they must have an opening and closing.

So, to create a group of component parts, you need to wrap all these parts in opening and closing Fieldset tags. And in order to set a title (Legend) for this group, you need to immediately after the opening Fieldset write a structure from the opening and closing Legend, between which you need to insert the text of the group title.

Here's an example of creating groups using Fieldset and Legend:

Good luck to you! See you soon on the pages of the blog site