Events in html php css dropdown. We create stylish drop-down lists. Plain HTML, CSS dropdown

Greetings, dear readers of the blog site. Today I want to talk about things like HTML forms. Whatever the engine of your site (cms), it will definitely use forms created using the Form and Input tags, as well as the Button, Checked, Value, Checkbox, Radio, Checkbox, Submit attributes and parameters .

Well, you can also add elements to this for creating drop-down lists and text fields - Select, Option, Textarea, Label, Fieldset, Legend.

Why forms are needed and how they work on modern sites

The same site search string () is created using these tags, and searching for that on your project will be mandatory. Therefore, understanding how they are arranged and work will not hinder you at all for successful work on the design, and it will not be superfluous for self-promotion and promotion.

So, with the rationale for the need to study these elements, I think there should be no more questions, so it's time to proceed directly to the study of their possible options.

Yes, I also want to remind you that we have already managed to consider a lot of materials on the topic of hypertext markup language, for example, three ) and .

At their core, forms consist of elements, to create which various tags are inserted inside the main container from Form tags - Checked, Value, Checkbox, Radio, Checkbox, Submit, etc. We just need to place its code in any place convenient for this site template , specifying how it should look with the help of tags and their attributes.

This could be a text box with a submit button for the entered request, radio button choices (where you can only leave 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 the case of feedback, the user, after filling in the field with his name, entering his E-mail and message text, and then clicking on the submit button, will have the right to hope to send the data from the form to the E-mail of the site author. But to implement this using only one hypertext markup language (), unfortunately, is not possible.

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 them to the E-mail owner of the resource. Which program will do this, you must specify yourself using the Action attribute.

Typically, the 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 located on the server of your hosting. I will give as an example a subscription to the RSS feed of my blog via E-mail:

A little unclear, probably, it seems at first, but I think that everything will become clearer as the story goes on.

Form and Input tags for creating buttons, checkboxes and radio buttons

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:

Name - a unique name that must be specified if several web forms will be used in the Html file where you are doing something
Action - a mandatory attribute indicating the path to the script to which the data from it will be transferred for further processing
Method - using it you can change the method of passing data from this web form to the handler file script. 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 also passing data in an open way through the browser's address bar. To pass form data to the handler script, it is still better to use POST method, designed specifically for transferring text messages in a closed way

Let's look at 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 written, which determines what exactly the HTML form created using this tag will be like.

With Input and Type , you can create the following elements:

single line text fields (Type="Text")
password fields (Type="Password")
checkboxes (Type="Checkbox")
radio buttons (Type="Radio")
hidden fields (Type="Hidden")
normal buttons (Type="Button")
buttons for submitting data to the handler (Type="Submit")
buttons to bring the web form to its original state (Type="Reset")
fields for uploading files to the server (Type="File)
image buttons (Type="Image")

Input does not have a closing tag. What exactly will be the web form created with it depends entirely on the parameter specified in the Type attribute. If Type is not specified, a text field will be created by default.

Examples of forms created on Input with different values for Type

Other attributes of the Input tag and examples of their use

Consider what the rest of the attributes are for:

Name - if the data is to be sent to the handler program script, then you must specify a parameter for the Name attribute. Under this name, the data submitted from the form will appear in the information handler program.
Size - with the help of it the size of the field of the created web form is set. The value is specified in the number of characters that can fit in this field. If Size is not specified, the width will default to 24 characters.
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 limit. More characters than it will be indicated, you will not be able to enter in the field
Value - with it you can set what exactly will be written by default in the field or on the send data button
Checked is a flag attribute that can be inserted into the Input for radio buttons (radio) or for checkboxes (checkbox). In this case, this radio button or checkbox will be active when the page with the webform is loaded (they will already have a checkmark)

Now let's look at everything form examples with Input. The appearance of the text field is similar to the appearance of the password field, so we will only consider the option of creating Text, for example, to enter an email address:

Now let's look at creating a web form with radio buttons (Radio):

Note that this form uses the Input tag twice, once to create each of the two radio buttons. Moreover, each of them has the Name attribute with the same value (resultat), and the Value value is different (YES and NO).

This means that when processing it, if any of the radio buttons is selected, a variable will be sent, the name of which is written in Name, but the value of this variable will depend on which radio button was selected.

Consider the example of creating a web form with checkboxes (Checkbox):

Checkboxes differ from radio buttons by the ability to select multiple options at once. Name is used to determine in the handler file which checkbox the checkboxes are set in, and Value specifies the value that will be sent to the handler (if Value is not set, then the text located next to this checkbox will be sent to the handler).

Select, Option, Textarea, Label, Fieldset, Legend - drop-down lists, text areas and other web form elements

To begin with, I want to remind you a little what, in fact, web forms are and why they are needed on the pages of the site. They are primarily designed to repeat the elements available in any operating system in a user-friendly form: buttons, text entry fields, drop-down lists, checkboxes, switches, and the like.

All users, without any additional explanation, understand the purpose of these elements, and if they see an Html form button, they understand that they need to click on it.

Moreover, all its constituent elements (like Select, Option, Textarea, Label, Fieldset, Legend) are already finished blanks (containers), for inserting which it will be enough just to use the desired tag with the necessary attributes and parameters.

Browsers themselves know how to display a particular web form element. True, the display options for the same element in different browsers may differ slightly from each other, but, as a rule, not significantly.

That. it turns out that web forms in Html are an attempt to transfer key elements used in any operating system, to website pages. But why might they be needed on the pages of the site?

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 transferred to the server, where it is processed by a special program (hypertext markup language, unfortunately, 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 clicking on the send data button, will launch the mail program used on his computer by default.

The opening Form tag should then look something like this:

Select and Option are dropdown tags

All webform elements that create fields with drop-down lists are formed in the same way. First, the combo box container is defined using the opening and closing Html Select tags. And then, inside this container, separate containers are created with items (elements) of this list. This is done with opening and closing Option tags.

It turns out something like this:

But this is a simplified design, because Select and Option have a number of attributes, which define the properties and appearance of the generated combo box.

Name - You must provide 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 a 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.
Size - with it you can set the number of displayed items. In other words, using Size, you can set the height of the list, measured in the number of lines displayed. If you do not explicitly specify the Size value in the Select tag, then the default height of the drop-down list will be used, and it will be different if the Multiple attribute is absent or present in the Select:
1. If Multiple is present in Select, then the height of the drop-down list in the web form will by default be equal to the number of its elements. Those. all the items in the multi-select dropdown list will be shown. See the plural example below. If the Size attribute in Select is set to less than the number of items, then a scroll bar will appear on the right.
2. If there is no Multiple in Select, then the height of the drop-down list in the web form will default to one line. Those. only one line will be visible, and the remaining items will be available only by pressing the elevator button (on the right). See example below
Multiple - attributing 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.

Forms with drop-down lists can be divided into two options. In the first option, you can select only one element (line) of the field with a drop-down list, in the second option, by 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 points 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, because it is written simply Multiple and that's it. If it is present, then a drop-down list webform with multiple selection (by holding Ctrl or Shift) will be created.

A variant of the field with a drop-down list, in which there will be multiple choice possible, will look something like this:

On the right is an example of a multi-select dropdown web form based on the code above. As you can see, holding Ctrl or Shift can select multiple items at the same time.

If there is no Multiple attribute in the Select tag, then only one element of this drop-down list (row) can be selected.

An example where only one item can be selected can be seen here:

Label Select SelectED Website Legend

Option tag attributes

In the created drop-down list (using Select and Option), you can add something like separators with the group heading, which will differ from the rest of the menu items in font style.

To create a group from the drop-down list items, you need to enclose them in the opening and closing tags of the Optgroup form, and in the opening Optgroup tag, specify the Label attribute, as a parameter of which you will need to enter the desired group name.

For example like this:

Label Select
SelectED Website Legend

Textarea - creating a text field in a form

There is one more web form element that we have not considered - Textarea (a field with the ability to enter multiline text). It is created using a paired Html Textarea tag. Moreover, it is possible to transfer text to a new line in it 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 write an 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.

What can you say 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 that the Label tag is designed to fix. It allows you to make the text next to the web form element clickable, which is undoubtedly improve usability.

But how to link form Html element and text? To do this, you need to add an ID with a unique parameter to the attribute, and the text must be surrounded by opening and closing Label tags. And that is not all. In the opening Label tag, you need to write 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 - splitting the form into parts

You probably often saw that large forms in Html are divided into groups (Fieldset), which are circled in a frame, and each such group has its own header (Legend). This is implemented using just two tags: Fieldset and Legend. They are paired, i.e. they must have an opening and a closing one.

So, to create a group of component parts, you need to enclose all these parts in the 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 construction from the opening and closing Legend, between which you need to insert the text of the group's title.

Here is an example of creating groups using Fieldset and Legend:

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

Grouping menu items

Let's consider the following tag A that is used to group related data in a dropdown list name="black&white"> label="whitelist">

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 disabled boolean attribute, we will disable one group (" Group B"):

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

The result of our example:

Disabling the list and multi-selection

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

In this example, we have created two dropdown lists. For the first list, we used the disabled attribute, which prevents the list from being interacted with (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 (via ctrl on Windows and through command on Mac).

In the browser it looks like this:

Text area

The result of our example:

Disabling the text area

By analogy with the previously considered elements, the tag has a disabled boolean attribute that specifies that the text area should be disabled (not available for user interaction). The attribute can be used in conjunction with scripts, for example, until some condition is met the element is inactive.</p> <p>Let's consider an example of use:</p> <span><!DOCTYPE html> <html> <head> <title> </span> The disabled and name attributes of the tag <textarea><span></title> </head> <body> <form> <textarea name = "userInfo" > </span> The text field is available for filling. <span> </span> The text field is not available for filling.

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

In this example, we have created two text areas (element ), for the first and second area attribute, we set a hint for the user, which is displayed in pale text color inside the element. For the second text area, with the readonly attribute, we indicated that it will be read-only (the content cannot be changed).</p> <p>Note that if the text field is read-only, then the content cannot be changed, but the user can still navigate to the content, select it, and copy it.</p> <p>In addition, we placed a button inside the form, which serves to submit the form (element <input>with button type "submit form": type = "submit" ).</p> <p>The result of our example:</p> <h2>Questions and tasks on the topic</h2> <p>Before moving on to the next topic, complete the practical task:</p> <ul><li>Using the knowledge gained, compose the following form for posting a vacancy:</li> </ul><p>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 knowledge from the article. If you missed it, then come back to study it.</p> <p>After you complete the exercise, inspect the page code by opening the example in a separate window to make sure you did everything correctly.</p> <p>Today I want to present a small "recipe" for creating a list in CSS. No jQuery, no CSS3 - just good old, cross-browser CSS. The example is quite simple, so experienced comrades may not be interested. We will implement a drop-down list with social buttons. <br></p> <p>So, let's not talk for a long time, let's get straight to the point</p> <h2>HTML</h2> <div class="droplink"> <h3>Share this post</h3> <ul> <li class="facebook">Facebook</li> <li class="twitter">Twitter</li> <li class="gplus">Google Plus</li> <li class="vk">In contact with</li> <li class="rss">RSS</li> </ul> </div> <p>I deliberately omit general points, such as including styles, so that the code does not grow. At the bottom of the page I will give a link to the source code - everything is there. <br>What we have in HTML is a regular list and an unusual heading. Its unusualness is that it is made by a hyperlink, which allows you to track the event <b>:hover</b>, that is, guidance. The dropdown list will work when hovering over the heading.</p> <h2>css</h2> <p>First, let's look at the basic styles of the dropdown list. I tried to comment every line of code to make it clearer:</p><p>/*Reset padding*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Block style on hover*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Title in normal state*/ .droplink h3 a( text-align:center ;width:100%;display:block;padding:12px 0px;color:#999;text-decoration:none ) a ( color:#FFF; font-weight:bold; position:absolute )</p><p>There is nothing special here, we indicated the size and style of the block, the style of the heading, and for both elements - their styles when hovering over. Go ahead:</p><p>/*Hide the list without hover*/ .droplink ul( list-style:none; display:none ) /*Display the list on hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( display:block)</p><p>This code is already more interesting and shows how it behaves <b>drop-down list</b> when hovering over. Worth it in normal condition <i>display: none</i> i.e. it is not displayed. On hover, we show it as a block. That's the whole secret. Now let's decorate the list elements a bit and insert icons:</p><p>/*List item style*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Element style on hover*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))</p><p>That, in fact, is all. The dropdown list is ready and looks nice enough. You can arrange the elements at your discretion, add rounded corners and other "gadgets".</p> <p>If you want the list to “overlap” the text below it on hover, look away <i>z-index</i>.</p> <p>If something is not clear or does not work, ask in the comments or use the "Send message" button, it's there <b>—> </b></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://bakep.ru/sobytiya-v-raskryvayushchemsya-spiske-html-php-css-sozdaem-stilnye-vypadayushchie-spiski.html" content="https://bakep.ru/sobytiya-v-raskryvayushchemsya-spiske-html-php-css-sozdaem-stilnye-vypadayushchie-spiski.html" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="События в раскрывающемся списке html php css. Создаем стильные выпадающие списки. Обычный HTML, CSS dropdown"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">RELATED ARTICLES</span></h4> <div class="ads-border"> <div class="ads-content"> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Useful</span></div> <div class="textwidget" align="center"></div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Advertising</span></div> <div class="textwidget" align="center"></div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>New</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/sobytiya-v-raskryvayushchemsya-spiske-html-php-css-sozdaem-stilnye-vypadayushchie-spiski.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png" alt="Creating Stylish Dropdown Lists" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/sobytiya-v-raskryvayushchemsya-spiske-html-php-css-sozdaem-stilnye-vypadayushchie-spiski.html" title="Creating Stylish Dropdown Lists" rel="bookmark">Creating Stylish Dropdown Lists</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/fiksirovannoe-menyu-pri-prokrutke-stranicy-kak-sdelat.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/myrusakov.ru/images/articles/css3_fixed_menu_01.jpg" alt="How to make a fixed menu when scrolling the page Menu pinned to the top" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/fiksirovannoe-menyu-pri-prokrutke-stranicy-kak-sdelat.html" title="How to make a fixed menu when scrolling the page Menu pinned to the top" rel="bookmark">How to make a fixed menu when scrolling the page Menu pinned to the top</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/podklyuchenie-jquery-cherez-google-ili-microsoft-biblioteka-jquery-ui.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/habrastorage.org/storage2/2b1/154/dc2/2b1154dc2192f939bcd4607607da281a.png" alt="Connecting jquery via Google or Microsoft" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/podklyuchenie-jquery-cherez-google-ili-microsoft-biblioteka-jquery-ui.html" title="Connecting jquery via Google or Microsoft" rel="bookmark">Connecting jquery via Google or Microsoft</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/ispravlenie-diska-mac-os-x-chetyre-prostyh-soveta-po-obsluzhivaniyu-mac.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/info-mage.ru/Photos/2013102_fix_boot_drive_errors_2.jpg" alt="Four Easy Mac Maintenance Tips How to Run Disk Utility" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/ispravlenie-diska-mac-os-x-chetyre-prostyh-soveta-po-obsluzhivaniyu-mac.html" title="Four Easy Mac Maintenance Tips How to Run Disk Utility" rel="bookmark">Four Easy Mac Maintenance Tips How to Run Disk Utility</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/othodit-ekran-na-iphone-5s-kak-ispravit-othodit-ekran-na-iphone-chto.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/appls.me/wp-content/uploads/2016/12/perekleyka-stekla-iphone-6.png" alt="How to fix screen on iphone 5s" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/othodit-ekran-na-iphone-5s-kak-ispravit-othodit-ekran-na-iphone-chto.html" title="How to fix screen on iphone 5s" rel="bookmark">How to fix screen on iphone 5s</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/kak-ispolzovat-iphone-v-kachestve-pulta-dlya-apple-tv-apple-tv-sekrety-i.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/droidtune.com/wp-content/uploads/2014/07/%D0%9F%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC-Bluetooth-%D0%BA%D0%BB%D0%B0%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D1%83-%D0%BA-Apple-TV-e1406798293573.jpg" alt="Apple TV: Secrets and tips for using So, let's immediately define what Apple TV is and why you need it" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/kak-ispolzovat-iphone-v-kachestve-pulta-dlya-apple-tv-apple-tv-sekrety-i.html" title="Apple TV: Secrets and tips for using So, let's immediately define what Apple TV is and why you need it" rel="bookmark">Apple TV: Secrets and tips for using So, let's immediately define what Apple TV is and why you need it</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/avtosumma-i-arifmeticheskie-operacii-v-word-kak-postavit-znak.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/bussoft.ru/wp-content/uploads/2016/09/matemat-3.jpg" alt="How to put a multiplication sign in Microsoft Word Multiplication formula in word" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/avtosumma-i-arifmeticheskie-operacii-v-word-kak-postavit-znak.html" title="How to put a multiplication sign in Microsoft Word Multiplication formula in word" rel="bookmark">How to put a multiplication sign in Microsoft Word Multiplication formula in word</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/chto-na-samom-dele-oznachayut-emodzi-gid-po-smailikam-kak-v-nih.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/smayli.ru/images/smiles_g2.png" alt="Emoji guide: how to understand them and not get into an awkward position How to make it easier to access notifications on iPhone X" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/chto-na-samom-dele-oznachayut-emodzi-gid-po-smailikam-kak-v-nih.html" title="Emoji guide: how to understand them and not get into an awkward position How to make it easier to access notifications on iPhone X" rel="bookmark">Emoji guide: how to understand them and not get into an awkward position How to make it easier to access notifications on iPhone X</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/en/smailiki-vk-po-kategoriyam-kody-smailov-vkontakte-kakie.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/biznessystem.ru/wp-content/uploads/2017/12/chto-takoe-emoji.png" alt="VK emoticons by category" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/en/smailiki-vk-po-kategoriyam-kody-smailov-vkontakte-kakie.html" title="VK emoticons by category" rel="bookmark">VK emoticons by category</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="https://bakep.ru/en/"><img class="td-retina-data" src="/img/logo.png" data-retina="/img/logo.png" alt="Computer tips for novice users" title="Computer tips for novice users" / loading=lazy loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p>© Computer tips for beginners, 2023</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://bakep.ru/en/feedback.html">Feedback</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://bakep.ru/en/sitemap.xml">Site Map</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">About the site</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/front.min.js'></script> <script type='text/javascript' src='/assets/imagesloaded.min.js'></script> <script type='text/javascript' src='/assets/masonry.min.js'></script> <script type='text/javascript' src='/assets/jquery.masonry.min.js'></script> <script type='text/javascript' src='/assets/rsvp.js'></script> <script type='text/javascript' src='/assets/tagdiv_theme.js'></script> <script type='text/javascript' src='/assets/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ; </script> <script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> <script type="text/javascript">  </script><br> <br> </body> </html>

Computer tips for novice users

Why forms are needed and how they work on modern sites

Form and Input tags for creating buttons, checkboxes and radio buttons

Examples of forms created on Input with different values ​​for Type

Other attributes of the Input tag and examples of their use

Select, Option, Textarea, Label, Fieldset, Legend - drop-down lists, text areas and other web form elements

Select and Option are dropdown tags

Option tag attributes

Textarea - creating a text field in a form

Fieldset and Legend - splitting the form into parts

Grouping menu items

Disabling the list and multi-selection

Text area

Disabling the text area

Examples of forms created on Input with different values for Type