Беспредельный form html. Создание и работа с формами в html. Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

3. Создание полей формы

Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .

4. Текстовые поля ввода

Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Кошка

7. Кнопки

Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type , например, .

Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.

Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .

... содержимое формы...

Атрибуты формы:

• В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl .
• Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
• Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .

Элементы формы html

<input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" >

Результат:

• Значение атрибута type — text — указывает на то, что это именно текстовое поле
• size — размер текстового поля в символах
• maxlength — максимальное кол-во вмещающихся в поле символов
• value — первоначальный текст в текстовом поле
• name — имя элемента, необходимо для обработки данных в файле-обработчике

Результат:


Вместо текста в поле отображается маска — звездочки или кружочки

<input type = "submit" value = "Отправить данные" >

Результат:

Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

<input type = "reset" value = "Очистить форму" >

Результат:

Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

<input type = "checkbox" name = "asp" value = "yes" > ASP<br > <input type = "checkbox" name = "js" value = "yes" checked = "checked" > javascript<br > <input type = "checkbox" name = "php" value = "yes" > PHP<br > <input type = "checkbox" name = "html" value = "yes" checked = "checked" > HTML<br >

ASP
javascript
PHP
HTML



Результат:

ASP
javascript
PHP
HTML

В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа

<input type = "radio" name = "book" value = "asp" > ASP<br > <input type = "radio" name = "book" value = "js" > Javascript<br > <input type = "radio" name = "book" value = "php" > PHP<br > <input type = "radio" name = "book" value = "html" checked = "checked" > HTML<br >

ASP
Javascript
PHP
HTML




Результат:

ASP
Javascript
PHP
HTML

radio кнопка html служит для единственного выбора из нескольких вариантов

Атрибут checked устанавливает сразу элемент отмеченным

Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

Выпадающий список HTML

Рассмотрим пример добавления выпадающего списка:

ASP JavaScript PHP HTML

Результат:

• Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
• Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
• Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

ASP JavaScript PHP HTML ASP по-русски JavaScript по-русски

Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1:

Текст

Результат:

• Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
• Атрибут rows определяет количество строк в элементе

Другие элементы

Дополнительные элементы и атрибуты

• Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

<input type = "checkbox" id = "book1" > <label for = "book1" > ASP</ label >

ASP

В примере создана надпись (тег label) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

Результат:



• Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

<input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" disabled = "disabled" > <input type = "checkbox" name = "asp" value = "yes" > ASP<br > <input type = "checkbox" name = "js" value = "yes" checked = "checked" disabled = "disabled" > javascript<br >


ASP
javascript

Формы HTML необходимы когда вы хотите собрать некоторые данные от посетителя места. Например во время регистрации пользователя вы хотел были бы к собирать данным как имя, адрес электронной почты, кредитная карточка, etc.

Форма примет входной сигнал от посетителя места и после этого вывесит ее к конечный применению как CGI, сценарий ASP или сценарий etc. PHP конечное применение выполнит необходимый обрабатывать на переданных данных основал на определенной логике дела внутри применения.

Различные элементы формы доступные как поля текста, поля textarea, раскрывающееся меню, кнопки с зависимой фиксацией, флажки, etc.

Бирка

Сформируйте атрибуты

Отдельно от общих атрибутов, следование список наиболее часто используемых атрибутов формы:

Примечание: Вы можете сослаться к Perl & CGI для детали на как upload данным по формы работает.

Управления формы HTML

Разные виды управлений формы которые вы можете использовать для того чтобы собрать данные используя форму HTML:

Управления флажков

Управления коробки Рейдио

Выберите управления коробки

Храньте отборные коробки

Спрятанное управление

Clickable кнопки

Представьте и кнопка возврата

Управления входного сигнала текста

3 типа входного сигнала текста используемого на формах:

Одностроковые управления входного сигнала текста - это управление использовано для деталей которые требуют только одной линии входного сигнала потребителя, как коробки поиска или имена. Они созданы используя бирку HTML.

Пароль input управление - это также одностроковой входной сигнал текста но оно маскирует характер как только потребитель входит в его. Они также созданы используя бирку HTML.

Многополосные управления входного сигнала текста - это использовано когда потребованы, что дает потребитель детали которые могут быть более длинни чем одиночно предложения. Многополосные управления входного сигнала созданы используя бирку </b> HTML.</p> </ul><h2>Одностроковые управления входного сигнала текста</h2> <p>Это управление использовано для деталей которые требуют только одной линии входного сигнала потребителя, как коробки поиска или имена. Они созданы используя бирку <input> HTML.</p> <h3>Пример</h3> <p>Здесь основной пример однострокового входного сигнала текста используемого для того чтобы принять имя и фамилию:</p><p> <!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form > First name: <input type="text" name="first_name" /> <br> Last name: <input type="text" name="last_name" /> </form> </body> </html> </p><p>Это даст следующий:</p> <h3>Атрибуты</h3> <p> <input> для создавать поле текста.</p> <h2>Управления входного сигнала пароля</h2> <p>Это также одностроковой входной сигнал текста но оно маскирует характер как только потребитель входит в его. Они также созданы используя бирку <input> <b>паролю </b>.</p> <h3>Пример</h3> <p>Здесь основной пример однострокового входного сигнала пароля используемого для того чтобы принять пароль потребителя:</p><p> <!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body> <form > User ID: <input type="text" name="user_id" /> <br> Password: <input type="password" name="password" /> </form> </body> </html> </p><p>Это даст следующий:</p> <h3>Атрибуты</h3> <p>Следование список атрибутов для бирки <input> для создавать поле пароля.</p> <h2>Многономенклатурные управления входного сигнала текста</h2> <p>Это использовано когда потребованы, что дает потребитель детали которые могут быть более длинни чем одиночно предложения. Многополосные управления входного сигнала созданы используя бирку <textarea> HTML.</p> <h3>Пример</h3> <p>Здесь основной пример многополосного входного сигнала текста используемого для того чтобы принять описание деталя:</p><p> <!DOCTYPE html> <html> <head> <title>Multiple-Line Input Control</title> </head> <body> <form> Description: <br /> <textarea rows="5" cols="50" name="description"> Enter description here...

Это даст следующий:

Атрибуты

Следование список атрибутов для бирки .</p> <h2>Управление флажка</h2> <p>Флажки использованы когда больше чем необходим, что выбран один вариант. Они также созданы используя бирку <input> HTML но тип атрибут установлен к <b>флажку </b>.</p> <h3>Пример</h3> <p>Здесь Код HTML примера для формы с 2 флажками:</p><p> <!DOCTYPE html> <html> <head> <title>Checkbox Control</title> </head> <body> <form> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics </form> </body> </html> </p><p>Это даст следующий:</p> <h3>Атрибуты</h3> <p>Следование список атрибутов для бирки <checkbox>.</p> <h2>Управление кнопки с зависимой фиксацией</h2> <p>Использованы необходимы, что выбраны кнопки с зависимой фиксацией когда из много вариантов, как раз один вариант. Они также созданы используя бирку <input> HTML но тип атрибут установлен для <b>радиопередачи </b>.</p> <h3>Пример</h3> <p>Здесь Код HTML примера для формы с 2 кнопками с зависимой фиксацией:</p><p> <!DOCTYPE html> <html> <head> <title>Radio Box Control</title> </head> <body> <form> <input type="radio" name="subject" value="maths"> Maths <input type="radio" name="subject" value="physics"> Physics </form> </body> </html> </p><p>Это даст следующий:</p> <h3>Атрибуты</h3> <p>Следование список атрибутов для кнопки с зависимой фиксацией.</p> <h2>Выберите управление коробки</h2> <p>Отборная также вызванная коробка, падает вниз коробка которой обеспечивает вариант для того чтобы перечислить вниз с различных вариантов в форме упадите вниз список, от где потребитель может выбрать одни или больше варианты.</p> <h3>Пример</h3> <p>Здесь Код HTML примера для формы с одним падает вниз коробка</p><p> <!DOCTYPE html> <html> <head> <title>Select Box Control</title> </head> <body> <form> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> </select> </form> </body> </html></p> <h3>Описание</h3> <p>Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.</p> <p>Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.</p> <p>Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.</p> <p>Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form> . Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET , то адресная строка может принимать следующий вид.</p> <p>http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p> <p>Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).</p> <p>Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.</p> <h3>Синтаксис</h3> <form action="URL"> ... </form> <h3>Атрибуты</h3> Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. Адрес программы или документа, который обрабатывает данные формы. Включает автозаполнение полей формы. Способ кодирования данных формы. Метод протокола HTTP. Имя формы. Отменяет встроенную проверку данных формы на корректность ввода. Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. <h3>Закрывающий тег</h3> <p>Обязателен.</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег FORM</title> </head> <body> <form action="handler.php"> <p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p> <p><input type="radio" name="answer" value="a1">Офицерский состав<Br> <input type="radio" name="answer" value="a2">Операционная система<Br> <input type="radio" name="answer" value="a3">Большой полосатый мух</p> <p><input type="submit"></p> </form> </body> </html> </p><p>Результат данного примера показан на рис. 1.</p> <p>Рис. 1. Вид элементов формы в окне браузера</p> <h2>Описание</h2> <p>HTML тег <form> создаёт HTML форму, которая используется для отправки введённых пользователем данных на сервер.</p> <p>Так как сама форма не предоставляет никаких средств для пользовательского ввода данных, внутри элемента <form> располагают другие элементы, цель которых предоставить пользователю различные способы ввода данных:</p> <p>Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.</p> <p>По умолчанию форма никак не отображается на веб-странице, видны только элементы расположенные внутри неё, однако с помощью CSS можно придать форме любой внешний вид.</p> <h2>Атрибуты</h2> accept-charset: Указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды .<p>Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент <form>). action: Указывает адрес отправки данных из заполненной формы, где будет обрабатываться данная информация. autocomplete: Определяет, включить или выключить автозаполнение формы. При включенном автозаполнение браузер автоматически подставляет значения, которые пользователь вводил во время предыдущего использования формы. Возможные значения атрибута: </p><ul><li><b>on: </b> браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).</li> <li><b>off: </b> пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.</li> </ul><p>Примечание: атрибут autocomplete не поддерживается браузером Opera.</p><p>Enctype: Указывает способ кодирования данные формы при отправке на сервер. Может использоваться только совместно с атрибутом method="post". Возможные значения: </p><ul><li><b>application/x-www-form-urlencoded: </b> значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ "+ ", а специальные символы в значения ASCII HEX).</li> <li><b>multipart/form-data: </b> символы не кодируются. Используется для элементов <input>, у которых в атрибуте type установлено значение "file ".</li> <li><b>text/plain: </b> пробелы преобразуются в символ "+", но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.</li> </ul> method: Указывает метод передачи данных HTTP-протокола, который будет использован при отправке данных формы. Возможные значения: <ul><li><b>get: </b> данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (? ), для разделения передаваемых данных между собой используется символ амперсанда (& ). Данный метод применяется при отправке данных небольшого размера.</li> <li><b>post: </b> данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.</li> </ul> Если атрибут method не указан, по умолчанию будет использоваться метод GET. name: Определяет имя формы. Имя может быть использовано в JavaScript для ссылки на элемент по имени или для ссылки на данные формы после ее отправки. Если в одном документе используется несколько форм, то их имена не должны повторяться, так же нельзя в качестве значения атрибута оставлять пустую строку. novalidate: Указывает, что данные введенные в форму не будут проверятся перед отправкой. Возможные значения логического атрибута novalidate: <form novalidate> <form novalidate="novalidate"> <form novalidate=""> <p>Примечание: атрибут novalidate не поддерживается в IE9 и более ранних версиях, и в Safari.</p><p>Target: Определяет имя фрейма или ключевое слово, которое указывает место для отображения ответа, полученного после отправки формы. </p><ul><li><b>_blank: </b> открывает документ в новом окне или вкладке.</li> <li><b>_self: </b> открывает документ в той же директории, где располагается ссылка (значение по умолчанию).</li> <li><b>_parent: </b> открывает документ в родительском фрейме.</li> <li><b>_top: </b> открывает документ во всю ширину окна.</li> <li><b>имя_фрейма: </b> открывает документ в iframe, имя которого было указано в качестве значения.</li> </ul><p>Тег <form> так же поддерживает Глобальные атрибуты и События</p> <h2>Стиль по умолчанию</h2> form { display: block; margin-top: 0em; } <h3>Пример</h3> <form action="demo_form.asp"> Имя: <input type="text" name="fname" value="Mickey"><br> Фамилия:<input type="text" name="lname" value="Mouse"><br> <input type="submit" value="Submit"> </form> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?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>");</script> <noindex> </noindex> <p><b> </b></p> <p><a name="p7"></a></p> <div style="text-align: center;"></div> <noindex> <p style="text-align: center;"> <p> </p> <div id="venus-104357"></div> </p> </noindex> <a href="#" id="toTop"></a> <div id="toTop2"> <div > <center> </div> </center> </div> <span class="full-tags pull-left"></span> </div> <div class="full-comment" > <div id="yandex_rtb_R-A-233979-2"></div> </div> <div class="full-news-panel"> Это интересно: </div> <ul class="related-block "> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/kakoi-mob-internet-luchshe-samaya-luchshaya-svyaz-luchshii-operator.html" title="Какой моб интернет лучше"> <img class="related-block_item__img" src="/uploads/cbee03bb54df4c61b4177efbaba02c73.jpg" alt="Какой моб интернет лучше" / loading=lazy> <div class="related-block_item__title">Какой моб интернет лучше</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/kak-polzovatsya-poiskovoi-sistemoi-gugl-hrom-upravlenie-funkciei-mgnovennogo.html" title="Управление функцией мгновенного поиска в браузере Google Chrome После установки запускаем Хром и видим…"> <img class="related-block_item__img" src="/uploads/81cb4c06ab83d709c3441f87188005a4.jpg" alt="Управление функцией мгновенного поиска в браузере Google Chrome После установки запускаем Хром и видим…" / loading=lazy> <div class="related-block_item__title">Управление функцией мгновенного поиска в браузере Google Chrome После установки запускаем Хром и видим…</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/kak-ustanovit-taimer-otklyucheniya-pk-kak-postavit-taimer-na.html" title="Как поставить таймер на выключение компьютера"> <img class="related-block_item__img" src="/uploads/00cdc5c915c63e8f9613d36e67995dfa.jpg" alt="Как поставить таймер на выключение компьютера" / loading=lazy> <div class="related-block_item__title">Как поставить таймер на выключение компьютера</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/samye-vygodnye-partnerskie-programmy-dlya-zarabotka-i-spisok.html" title="Что такое партнерские программы и как с ними работать Хорошая партнерская программа"> <img class="related-block_item__img" src="/uploads/d4bb1f8c9f3feccd6a42b098d9d6d739.jpg" alt="Что такое партнерские программы и как с ними работать Хорошая партнерская программа" / loading=lazy> <div class="related-block_item__title">Что такое партнерские программы и как с ними работать Хорошая партнерская программа</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/megafon-tarifnyi-plan-xs-tarif-megafon-vse-vklyucheno-xs-podklyuchenie-i.html" title="Тариф Мегафон «Все включено XS»: подключение и описание Как происходит списание абонентской платы"> <img class="related-block_item__img" src="/uploads/5e7062f67cb9e04f72911cf648eb5618.jpg" alt="Тариф Мегафон «Все включено XS»: подключение и описание Как происходит списание абонентской платы" / loading=lazy> <div class="related-block_item__title">Тариф Мегафон «Все включено XS»: подключение и описание Как происходит списание абонентской платы</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/pochemu-net-interneta-na-telefone-bilain-segodnya-pochemu-ploho-rabotaet.html" title="Почему плохо работает интернет на телефоне билайн"> <img class="related-block_item__img" src="/uploads/b9e19f54ee14b611fee544557cd5a953.jpg" alt="Почему плохо работает интернет на телефоне билайн" / loading=lazy> <div class="related-block_item__title">Почему плохо работает интернет на телефоне билайн</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/pochemu-ischez-telekanal-doverie-chastoty-tv-kanalov-deistviya-dlya.html" title="Почему исчез телеканал доверие"> <img class="related-block_item__img" src="/uploads/ed6e355c72a110f0eb57ecbf97ebf7b3.jpg" alt="Почему исчез телеканал доверие" / loading=lazy> <div class="related-block_item__title">Почему исчез телеканал доверие</div> </a> </li> <li class="related-block_item col-sm-3 col-xs-6"> <a href="/fresh-dostavka-na-dom-otzyvy-ob-internet-provaidere-freshtel-ru.html" title="Отзывы об интернет провайдере FreshTel RU"> <img class="related-block_item__img" src="/uploads/188ed1913d3ce45b053e5aa3d3b934d4.jpg" alt="Отзывы об интернет провайдере FreshTel RU" / loading=lazy> <div class="related-block_item__title">Отзывы об интернет провайдере FreshTel RU</div> </a> </li> </ul> </div> </div> </div> <aside id="rightblock" class="rightblock side-block col-lg-3 col-md-3 hidden-sm hidden-xs"> <div class="side-head">Категории:</div> <div id="accordian"> <ul class="list-unstyled"> <li><a href="/category/excel/"><span>Excel</span></a></li> <li><a href="/category/windows/"><span>Windows</span></a></li> <li><a href="/category/word/"><span>Word</span></a></li> <li><a href="/category/browsers/"><span>Браузеры</span></a></li> <li><a href="/category/internet/"><span>Интернет</span></a></li> <li><a href="/category/payment-systems/"><span>Платежные системы</span></a></li> <li><a href="/category/good-to-know/"><span>Полезно знать</span></a></li> <li><a href="/category/programs/"><span>Программы</span></a></li> <li><a href="/category/download-software/"><span>Скачать софт</span></a></li> <li><a href="/category/how-to-open/"><span>Чем открыть</span></a></li> </ul> </div> <div class="side-head">Популярные статьи</div> <ul class="side-top s_a list-unstyled"> <li class="top-news"> <a href="/transportnyi-modul-egais-instrukciya-port-dlya-utm-egais-kak-otkryt.html" title="Порт для утм егаис: как открыть"> <img src="/uploads/0fb5dccd9850a21ab3b1ec6c033007dd.jpg" alt="Порт для утм егаис: как открыть" / loading=lazy> <div class="top-news_img">Порт для утм егаис: как открыть</div> </a> </li> <li class="top-news"> <a href="/nachalo-raboty-v-bgu-2-0-byudzhetnaya-i-buhgalterskaya-otchetnost.html" title="Начало работы в бгу 2.0. Бюджетная и бухгалтерская отчетность"> <img src="/uploads/c1185a968fa303dc9bd54ecf7632ae28.jpg" alt="Начало работы в бгу 2.0. Бюджетная и бухгалтерская отчетность" / loading=lazy> <div class="top-news_img">Начало работы в бгу 2.0. Бюджетная и бухгалтерская отчетность</div> </a> </li> <li class="top-news"> <a href="/hands-free-fm-transmitter-avtomobilnyi-s-bluetooth-podderzhkoi-hands-free.html" title="Hands Free: FM-трансмиттер автомобильный с Bluetooth поддержкой Что делать если устройство не читает флешку"> <img src="/uploads/99d967f85ec6f3ef8b7e73fd367120a0.jpg" alt="Hands Free: FM-трансмиттер автомобильный с Bluetooth поддержкой Что делать если устройство не читает флешку" / loading=lazy> <div class="top-news_img">Hands Free: FM-трансмиттер автомобильный с Bluetooth поддержкой Что делать если устройство не читает флешку</div> </a> </li> </ul> <script language="javascript"> $(document).ready(function() { var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left: left + 'px', position: 'fixed', top: "10px", width: width + "px" }); } else { $('#float-sidebar').css({ position: 'static', }); } }); }); </script> <div id="float-sidebar" style="margin-right: 5px" > </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="col-sm-3 footer_logo"> <p>zhurnaly-onlain.ru - Программы. Браузеры. Интернет. Word. Windows. Полезно знать</p> <form method="post" action=''> <input type="hidden" name="do" value="search" /> <input type="hidden" name="subaction" value="search" /> <input id="story2" name="story" value="Найти ответ" onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Найти ответ') this.value='';" type="text" /> <div class="src-sug"></div> <button class="btn search_btn" type="submit"><span class="glyphicon glyphicon-search"></span></button> </form> </div> <div class="col-sm-6 footer_info"> <p></p> </div> <div class="col-sm-3 footer_links"> <a class="footer_links_item" href="/feedback.html">Обратная связь</a> </div> <div class="col-sm-12 text-center"> </div> <script src="/templates/otvet/js/jquery.min.js"></script> <script src="/templates/otvet/js/libs.js"></script> <script src="/templates/otvet/js/up.js"></script> <script src="/templates/otvet/js/main.js"></script> <script src="/templates/otvet/js/bootstrap.min.js"></script> <script src="/templates/otvet/js/tooltip.js"></script> <p> </p> </div> </footer> </body> </html>