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: |
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: |
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:
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: |
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: |
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: |
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
- Inside the 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
An example of creating a simple dropdown list
This HTML select option example is used to create a dropdown list with three options to choose from:
The above example uses the following markup to create the dropdown:
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
var seltheme = document.getElementById (“selcolor”). value;
When the button is clicked, the JS function is called, which assigns the value selected in the drop-down list to the variable. This value is used to apply color to the current document.
Accessing visible text in JQuery
This time, I'll be using JQuery to access the value of the selected option, both text and value. For this demo, I will be accessing the visible text in the option tag in HTML:
View online demo and code
In the code for each option in the tag
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
View online demo and code
The form method used in the example is POST, so you can get form values using the PHP $ _POST [“”] array. This is the form code used in the example:
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
View online demo and code
Along with the 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; -moz- box-shadow: rgba (0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba (0,0,0, 0.1) 0px 0px 8px; width: 150px;)
Rounded corners with border-radius property
For the HTML select option, we'll set the CSS3 border-radius property to make rounded corners. The color scheme also changes. You can experiment with borders, widths, margins and other properties as you like:
View online demo and code
Using multiple CSS attributes and styles
To enable users to select multiple options from a list, use the multiple attribute. In the above example, only one option can be selected. When using multiple, you can select multiple options by pressing the CTRL key:
View online demo and code
In this article, we will look at the elements that allow you to create drop-down lists, we will learn how to form groups in these lists, we will look at how to disable items and even groups of lists, we will get acquainted with the element that allows you to create a multi-line text field, you can later use it inside HTML forms (element
In addition, we placed a button inside the form that serves to submit the form (element with the button type "submit": type = "submit").
The result of our example:
Tooltip for text area
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
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:
type = "submit" name = "submitInfo" value = "(! LANG: submit" > !}
In this example, we have created two text areas (element
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 with the button type "submit": type = "submit").
The result of our example:
Questions and tasks on the topic
Complete the Practice Activity before moving on to the next topic:
- Using the knowledge gained, compose the following vacancy posting form:
Before proceeding with the assignment, 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 syntax select The HTML looks like this:
Here using the tag option the elements of the list are set.
Application result:
Electronics Syroezhkin Chizhikov Kukushkina
SELECT Tag Attributes
Consider tag attributes select:
- name
- size- the number of displayed lines in the list (number);
- multiple- includes the function of multiple selection of items in the drop-down list;
- disabled- blocks access to the element;
- 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 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. Now let's see how to make a dropdown list in HTML using the specified attributes:
OPTION Tag Attributes
Tag option, as noted, allows you to define the children of a dropdown list select which, in turn, acts as a container. Tag option has its own attributes:
- disabled- sets a ban on the selection of this list item;
- 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
- selected- the current item in the list will be selected by default;
- value- the value that will be transmitted to the server;
Let's take a look at the advanced use case for the tag option:
The result of the given example will look like this:
Mr. Electronic Syroezhkin Chizhikov Kukushkina
In the site constructor "Nubeks" there is an opportunity to create arbitrary forms using the module of the constructor of forms. The operation of drop-down lists in "Nubex" is described in the article: