Создание формы с помощью html. Создание и работа с формами в html. Дополнительные элементы и атрибуты

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

На рисунке представлена форма регистрации студента на сайте образовательного учреждения.

Для создания формы используется контейнер

с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

Структура простейшей формы:

элементы форм…

В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

Структура кнопки:

Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

Результат работы формы представлен на рисунке.

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).</p><p>К вышеуказанному коду добавим поле текстовой области:</p><p>Комментарий:<br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Результат работы кода с текстовой областью представлен на рисунке.

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

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

текст

Радиокнопка:

текст

В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

Для вставки изображения в кнопку используется код, представленный в следующем примере:

При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:

Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

2018-06-28

Создаем формы HTML

Здравствуйте уважаемый посетитель!

В предыдущих разделах мы создали основные элементы сайта, а также рассмотрели вопросы, связанные с наполнением контента. И теперь можем перейти к следующей довольно важной и обширной теме - к работе с формами HTML.

HTML-формы важнейшие элементы взаимодействия, определяющие интерактивную часть веб-страницы. Без которых не может обойтись ни один полноценный сайт. Ведь именно с их помощью осуществляется основной обмен между пользователем и стороной сервера.

Но в то же время, формы являются довольно сложными элементами интерфейса, с большим разнообразием функциональных компонентов и текстовых полей. Поэтому, в данном разделе постараемся более подробно рассмотреть основные ее элементы, уделив особое внимание практическому их применению в создаваемом сайте.

Причем здесь также будут затронуты и вопросы работы с базой данных MySQL. Так как применение форм в наших примерах будет неразрывно связано с их взаимодействием с таблицами БД. В которых будут сохраняться введённые пользователями данные, используемые в дальнейшем сервером при обработке запросов.

В общем о формах HTML
форма онлайн заказа
Форма авторизации
форма обратной связи

В общем о формах HTML

Форма на веб-странице устанавливается блочным элементом

, который представляет собой контейнер, включающий в себя все элементы, отвечающие за обработку ввода данных, такие как , ,

.</p>
 <p>При этом у тега <form> имеется несколько атрибутов, но два из них являются обязательными. Это "action", который содержит адрес, определяющий, куда будет отправлена форма и "method", определяющий способ (POST или GET), которым она будет отправлена.</p>
 <p>Что касается ее элементов, то самым разносторонним является тег <input> с помощью которого передается большая часть информации и создаются разные элементы интерфейса. Причем тип полей ввода определяется его основным атрибутом "type", от значения которого зависит их функциональное предназначение.</p>
 <p>Так, при при значении "text" - текстовое поле, "password" - поле с паролем, "email" - поле для ввода адреса электронной почты, "radio" - переключатель, "checkbox" - флажок, "submit" - кнопка для отправки формы.</p>
 <p>Ниже показан пример с использования элемента <input> для разных видов полей.</p>
 <ol><p><form name
=<b>"example"
</b>
 action
=<b>"#"
</b>
 method
=<b>"post"
</b>
></p>
 <p><input type
=<b>"text"
</b>
 name
=<b>"login"
</b>
></p>
 <p><input type
=<b>"email"
</b>
 name
=<b>"email"
</b>
></p>
 <p><input type
=<b>"password"
</b>
 name
=<b>"password"
</b>
></p>
 <p><input type
=<b>"submit"
</b>
 name
=<b>"button"
</b>
 value
=<b>"Отправить"
</b>
></p>
 <li>
</ol><p>Рис.1 Пример формы HTML</p>
 <p>В данном примере видно, что для элемента <input> в зависимости от значения атрибута "type", поле может принимать различный вид. Например, в первом элементе (поз.2) поле предназначено для ввода текстовой информации (в данном случае для логина). В следующем (поз.3) - для ввода e-mail, далее (поз.4) - для пароля, а в последнем (поз.5) - кнопка для отправки формы.</p>
 <p>Конечно, это упрощенный пример, в котором в основном использованы обязательные атрибуты. В реальности же обычно применяются и другие, определяющие характеристики полей.</p>
 <p>При этом для каждого элемента имеется свой список атрибутов. Все их перечислять здесь не стоит, так как их достаточно много, и эту информацию лучше брать из специально предназначенной для этого справочной литературе по HTML.</p>
 <p>В сети интернет можно найти большое количество заслуживающих доверия справочников по HTML. Например, как я уже ранее упоминал, для этих целей можно использовать справочник по веб-технологиям WebReference.ru,
 одна из частей которого посвящена подробному описанию всех имеющихся в HTML5 элементов.</p>
 <p>скриншот 33</p>
 <p>Мы же здесь будем практически создавать формы для построения функциональных узлов нашего сайта. И постараемся как можно больше использовать разные элементы с различными атрибутами.</p>
 
 <h2><i>форма онлайн заказа
</i></h2>
 <p>В создаваемом сайте предусматривается оформление заказа на установку противоугонной маркировки стекол автомобиля. Для этого необходимо ввести данные автомобиля и выбрать способа маркировки. После чего, на основе введенных данных, пользователю должна предоставляться информация о стоимости выполнения работ. Причем как полной стоимости, так и рассчитанной с учетом скидок.</p>
 <p>Соответствующий вариант формы онлайн заказа, который мы будем создавать, приведен на следующем скриншоте.</p>
 
 <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy><p>Рис.2 Форма онлайн заказа</p>
 <p>Здесь будут использоваться следующие элементы:</p>
 <ul><li><input> с полем ввода текста;</li>
 <li><select>;</li>
 <li><option>.</li>
</ul><p>Форма регистрации, используемая в создаваемом сайте совмещена с онлайн заказом. Это связано с тем, что в данном случае личный кабинет пользователя предназначен для отображения состояния сделанных заказов и оформления новых. Поэтому вполне логично в этом варианте производить регистрацию одновременно с выполнением первого заказа.</p>
 <p>Ниже показано, как предполагается сформировать эту функциональную часть.</p>
 <p>Для увеличения / уменьшения размера изображения кликните по картинке</p>
 <br><img src='https://i2.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy><p>Рис.3 форма регистрации</p>
 <p>Элементы, которые должны быть предусмотрены в этом варианте:</p>
 <ul><li><label>;</li>
 <li><input> с полем ввода текста;</li>
 <li><input> с полем ввода e-mail;</li>
 <li><input> с полем ввода пароля;</li>
 <li><input> с кнопкой для отправки формы (совмещенная с формой онлайн заказа).</li>
</ul><h2><i>Форма авторизации
</i></h2>
 <p>Для входа в личный кабинет необходима авторизация. Обычно такая форма состоит из полей ввода логина, пароля и кнопки для ее отправки. Также для восстановления учетных данных часто используются дополнительные ссылки типа: "Забыли логин?", "Забыли пароль?".</p>
 <p>Несмотря на то, что такие дополнительные ссылки обычно располагаются вместе с элементами формы регистрации, но по сути к ее элементами они не относятся.</p>
 <p>Ниже показан общий вид панели пользователя с элементами авторизации.</p>
 <p>Для увеличения / уменьшения размера изображения кликните по картинке</p>
 <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy>
 <p>В этом случае будут использоваться следующие элементы:</p>
 <ul><li><label>;</li>
 <li><input> с полем ввода текста;</li>
 <li><input> с полем ввода пароля;</li>
 <li><input> </li>
</ul><h2><i>форма обратной связи
</i></h2>
 <p>Само название этой формы говорит о ее назначении. Поэтому здесь должны быть все необходимые поля для отправки сообщения. В данном случае она будет состоять из четырех полей: два для ввода имени и почтового адреса отправителя и два для передачи самого сообщения.</p>
 <p>Внешний вид такой формы показан на следующем скриншоте.</p>
 <p>Для увеличения / уменьшения размера изображения кликните по картинке</p>
 <br><img src='https://i2.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy><p>Рис.5 Форма обратной связи</p>
 <p>Здесь, помимо уже используемых элементов, должен добавиться еще один (<textarea>), с помощью которого в поле можно будет вводить несколько строк текста. А весь перечень для этого варианта примет следующий вид:</p>
 <ul><li><label>;</li>
 <li><input> с полем ввода текста;</li>
 <li><input> с полем ввода e-mail;</li>
 <li><textarea> с областью, в которую можно вводить несколько строк текста.</li>
 <li><input> с кнопкой для отправки формы.</li>
</ul><p>Таким образом, в этой, по сути, вводной статье, мы рассмотрели некоторые общие вопросы, связанные с формами HTML. И определились, с какими конкретными примерами мы будем в дальнейшем работать.</p>
 <p>После чего можем перейти и к практическому созданию форм, составляя для каждого случая необходимый код и описывая их взаимодействие с соответствующими таблицами MySQL. Но это будет уже в следующих статьях.</p>
 <p>С уважением, Николай Гришин</p>
 <ul><li>Следующая сатья:
</li></ul>
<p><b>HTML форма
</b> - это инструмент, с помощью которого HTML-документ может послать
некоторую информацию в некоторую заранее определенную точку внешнего мира,
где информация будет некоторым образом обработана.</p>
<p>Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина
очень простая: создать форму HTML гораздо проще, чем ту "точку внешнего
мира", в которую HTML форма будет посылать информацию. В качестве такой
"точки" в большинстве случаев выступает программа, написанная
на Перл или Си.</p>
<p>Программы, обрабатывающие данные, переданные формами, часто
называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает
"общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве
случаев требует хорошего знания соответствующего языка программирования
и возможностей операционной системы Unix.</p>
<p>В настоящее время определенное распространение получил язык PHP/FI,
инструкции которого можно встраивать прямо в HTML-документы (документы
при этом сохраняются в виде файлов с расширением *.pht или
 *.php).</p>
<p>HTML формы передают информацию программам-обработчикам в виде пар
 [имя переменной]=[значение переменной] . Имена переменных следует
задавать латинскими буквами. Значения переменных воспринимаются обработчиками
как строки, даже если они содержат только цифры.</p>
<h3>Как устроена HTML форма</h3>
<p>Форма открывается тегом <FORM> и заканчивается тегом
 </FORM> . HTML-документ может содержать в себе несколько форм,
однако формы не должны находиться одна внутри другой. HTML-текст, включая
теги, может размещаться внутри форм без ограничений.</p>
<p>Тег <FORM> может содержать три атрибута, один из которых
является обязательным. Вот эти атрибуты:</p>
<p>Обязательный атрибут. Определяет, где находится обработчик формы.</p><p>Определяет, каким образом (иначе говоря, с помощью какого метода
протокола передачи гипертекстов) данные из формы будут переданы обработчику.
Допустимые значения: METHOD=POST и METHOD=GET . Если значение
атрибута не установлено, по умолчанию предполагается METHOD=GET .</p><p>Определяет, каким образом данные из формы HTML будут закодированы
для передачи обработчику. Если значение атрибута не установлено, по умолчанию
предполагается ENCTYPE=application/x-www-form-urlencoded .</p><h3>Простейшая HTML форма</h3>
<p>Для того, чтобы запустить процесс передачи данных из формы обработчику,
нужен какой-то орган управления. Создать такой орган управления очень просто:</p><p>
 <INPUT TYPE=submit>
</p><p>Встретив такую строчку внутри формы, браузер нарисует на экране кнопку
с надписью Submit (читается "сабмит" с ударением на втором слоге,
от английского "подавать"), при нажатии на которую все имеющиеся
в форме данные будут переданы обработчику, определенному в теге
 <FORM> .</p>
<p>Надпись на кнопке можно задать такую, какая нравится, путем введения
атрибута VALUE="[Надпись]" (читается "вэлью"
с ударением на первом слоге, от английского "значение"),
например:</p><p>
 <INPUT TYPE=submit VALUE="Поехали!">
</p><p>Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму
(пример 11). Она не будет собирать никаких данных,
а просто вернет нас к тексту этой главы.</p><p>
 <HTML>
<HEAD>
<TITLE>Пример 11</TITLE>
</HEAD>
<H1>Простейшая форма </H1>
<FORM ACTION="pr0008.html"> 
<INPUT TYPE=submit VALUE="Назад, к главе 8...">
</FORM> 
</BODY>
</HTML>
</p><p>Надпись, нанесенную на кнопку, можно при необходимости передать обработчику
путем введения в определение кнопки атрибута NAME=[имя] (читается
"нэйм", от английского "имя"), например:</p><p>
 <INPUT TYPE=submit NAME=button VALUE="Поехали!">
</p><p>При нажатии на такую кнопку обработчик вместе со всеми остальными данными
получит и переменную button со значением Поехали! .</p>
<p>В форме может быть несколько кнопок типа submit с различными
именами и/или значениями. Обработчик, таким образом, может действовать
по-разному в зависимости от того, какую именно кнопку submit нажал
пользователь.</p>
<h3>Как HTML форма собирает данные</h3>
<p>Существуют и другие типы элементов <INPUT> . Каждый элемент
 <INPUT> должен включать атрибут NAME=[имя] , определяющий
имя элемента (и, соответственно, имя переменной, которая будет передана
обработчику). Имя должно задаваться <b>только латинскими буквами
</b>.
Большинство элементов <INPUT> должны включать атрибут
 VALUE="[значение]" , определяющий значение, которое будет
передано обработчику под этим именем. Для элементов <INPUT TYPE=text>
и <INPUT TYPE=password> , однако, этот атрибут не обязателен, поскольку
значение соответствующей переменной может вводиться пользователем с клавиатуры.</p>
<p>Основные типы элементов <INPUT> :</p>
<p><i>TYPE=text
</i></p><p>Определяет окно для ввода строки текста. Может содержать дополнительные
атрибуты SIZE=[число] (ширина окна ввода в символах) и
 MAXLENGTH=[число] (максимально допустимая длина вводимой строки
в символах).</p><h3>Пример:</h3>
<p><INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван"></p><p>Определяет окно шириной 20 символов для ввода текста. По умолчанию
в окне находится текст Иван, который пользователь может редактировать.
Отредактированный (или неотредактированный) текст передается обработчику
в переменной user .</p><p><i>TYPE=password
</i></p><p>Определяет окно для ввода пароля. Абсолютно аналогичен
типу text , только вместо символов вводимого текста показывает
на экране звездочки (*). Пример:</p><p><INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10></p><p>Определяет окно шириной 20 символов для ввода пароля. Максимально
допустимая длина пароля - 10 символов. Введенный пароль передается
обработчику в переменной pw .</p><p><i>TYPE=radio
</i></p><p>Определяет радиокнопку. Может содержать дополнительный атрибут
 checked (показывает, что кнопка помечена). В группе радиокнопок
с одинаковыми именами может быть только одна помеченная радиокнопка.</p><h3>Пример:</h3>
<p><INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с<br>
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с<br>
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с</p><p>Определяет группу из трех радиокнопок, подписанных 9600 бит/с,
 14400 бит/с и 28800 бит/с. Первоначально помечена первая из
кнопок. Если пользователь не отметит другую кнопку, обработчику будет
передана переменная modem со значением 9600 . Если пользователь
отметит другую кнопку, обработчику будет передана переменная modem
со значением 14400 или 28800 .</p><p><i>TYPE=checkbox
</i></p><p>Определяет квадрат, в котором можно сделать пометку. Может
содержать дополнительный атрибут checked (показывает, что
квадрат помечен). В отличие от радиокнопок, в группе квадратов с
одинаковыми именами может быть несколько помеченных квадратов.</p><h3>Пример:</h3>
<p><INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры<br>
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции<br>
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей<br>
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет</p><p>Определяет группу из четырех квадратов. Первоначально помечены второй и
четвертый квадраты. Если пользователь не произведет изменений, обработчику
будут переданы две переменные: comp=WS и comp=IS .</p><p><i>TYPE=hidden
</i></p><p>Определяет скрытый элемент данных, который не виден пользователю
при заполнении формы и передается обработчику без изменений. Такой элемент
иногда полезно иметь в форме, которая время от времени подвергается переработке,
чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие
возможные варианты использования Вы вполне можете придумать сами.</p><h3>Пример:</h3>
<p><INPUT TYPE=hidden NAME=version VALUE="1.1"></p><p>Определяет скрытую переменную version , которая передается обработчику
со значением 1.1 .</p><p><i>TYPE=reset
</i></p><p>Определяет кнопку, при нажатии на которую форма HTML возвращается
в исходное состояние. Поскольку при использовании этой кнопки данные обработчику
не передаются, кнопка типа reset может и не иметь атрибута name .</p><h3>Пример:</h3>
<p><INPUT TYPE=reset VALUE="Очистить поля формы"></p><p>Определяет кнопку Очистить поля формы, при нажатии на которую форма HTML
возвращается в исходное состояние.</p><p>Помимо элементов <INPUT> , формы HTML могут содержать меню
 <SELECT> и поля для ввода текста <TEXTAREA> .</p>
<p>Меню <SELECT> из n элементов выглядит примерно так:</p><p>
 <SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
</p><p>Как Вы видите, меню начинается с тега <SELECT> и
заканчивается тегом </SELECT> . Тег <SELECT>
содержит обязательный атрибут NAME , определяющий имя переменной,
которую генерирует меню.</p>
<p>Тег <SELECT> может также содержать атрибут
 MULTIPLE , присутствие которого показывает, что из меню можно
выбрать несколько элементов. Большинство браузеров показывают меню
 <SELECT MULTIPLE> в виде окна, в котором находятся
элементы меню (высоту окна в строках можно задать атрибутом
 SIZE=[число]). Меню <SELECT> в большинстве
случаев показывается в виде выпадающего меню.</p>
<p>Тег <OPTION> определяет элемент меню.
Обязательный атрибут VALUE устанавливает значение, которое
будет передано обработчику, если выбран этот элемент меню. Тег
 <OPTION> может включать атрибут checked ,
показывающий, что данный элемент отмечен по умолчанию.</p>
<h3>Разберем небольшой пример:</h3>
 <SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
<p>Такой фрагмент определяет меню из трех элементов: Вариант 1 ,
 Вариант 2 и Вариант 3 . По умолчанию выбран элемент
 Вариант 1 . Обработчику будет передана переменная
 selection значение которой может быть option1
(по умолчанию), option2 или option3 .</p>
<p>После всего, что мы уже узнали, элемент <TEXTAREA> может
показаться совсем простым. Например:</p><p>
 <TEXTAREA NAME=address ROWS=5 COLS=50>
А здесь - Ваш адрес...

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут ROWS устанавливает высоту окна в строках (в примере - 5). Атрибут COLS устанавливает ширину окна в символах (в примере - 50).

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

Важно знать, что русские буквы в окне при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.</p> <h3>Пример:</h3> <p>Для демонстрации использования форм HTML я написал небольшую программу на PHP, которая находится по адресу:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht </p><p>Исходные данные в эту программу передаст форма, описанная в примере 12 :</p><p> <HTML> <HEAD> <TITLE>Пример 12</TITLE> </HEAD> <H1>Несколько более сложная форма </H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Расскажите немного о себе...</H2> <P>Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные. </P> <P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR> Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR> Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской <INPUT TYPE=radio NAME=gender VALUE="female">женский<BR> Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR> <INPUT TYPE=submit VALUE="Запустить обработчик"></P> </FORM> </BODY> </HTML> </p><p>Заполняйте форму HTML, жмите на кнопку и смотрите, что будет...</p> <p><b>Маленькая хитрость, <br> или как отправить форму почтой </b></p><p>Все это прекрасно, скажут скептики, но на кой ляд нужны HTML формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти.</p> <p>HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике.</p> <p>Допустим, что мы слегка изменили Пример 12. Вместо строки</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>мы ввели строку</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Обратите внимание, что мы изменили алгоритм кодирования на text/plain , то есть фактически выключили кодирование вообще.</p> <p>Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик?</p> <p>Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:</p><p>Fn=Иван ln=Петров gender=male age=22 </p><p>К сожалению, не все пользователи смогут воспользоваться такой формой HTML. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке.</p> <p>Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.</p> <p>Сама форма создаётся с помощью тега <form> , внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:</p> <ol><li>адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;</li> <li>элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;</li> <li>кнопку отправки данных на сервер.</li> </ol><p>Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).</p> <p>Пример 1. Ошибочное использование форм</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="handler.php"> <p><input name="a"> <input type="submit"></p> <form action="handler.php"> <p><input name="b"> <input type="submit"></p> </form> </form> </body> </html> </p><p>Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form> . Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.</p> <p>Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form> не содержит никаких атрибутов и представлен в примере 2.</p> <p>Пример 2. Простая форма</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input type="submit"></p> </form> </body> </html> </p><p>В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto: . При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге <form> (пример 3).</p> <p>Пример 3. Отправка формы по почте</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="mailto:vlad@сайт" enctype="text/plain"> <p><input name="a"> <input type="submit"></p> </form> </body> </html> </p><p>Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).</p> <p>Рис. 1. Запуск приложения в Firefox</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/form/02.png' width="100%" loading=lazy></p> <p>Рис. 2. Предупреждение Internet Explorer</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/form/03.png' height="223" width="384" loading=lazy></p> <p>Рис. 3. Выбор программы в Opera</p> <p>HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода <input> и <textarea> , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> <p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <br> <br> <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> </div> </article> <div class="post-bottom"> <div class="post-share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir" data-counter=""></div> </div> </div> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Не нашли ответ на свой вопрос? Посмотрите здесь</div> <div class="items"> <div class="related-item"> <a class="related-item__title" href="/klyuchi-zapuska-1s-8-3-iz-komandnoi-stroki-razvitie-rezhima-agenta-konfiguratora-komandy-sushchestvuyushchi.html"><img src="/uploads/f8bc5a3182b366bd95dbbbdf071402e0.jpg" width="120" height="120" alt="Ключи запуска 1с 8.3 из командной строки. Развитие режима агента конфигуратора. Команды, существующие в пакетном режиме" class="related-item__image" / loading=lazy>Ключи запуска 1с 8.3 из командной строки. Развитие режима агента конфигуратора. Команды, существующие в пакетном режиме</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="/unikalnyi-indeks-1s-sql-oshibka-popytka-vstavki-neunikalnogo-znacheniya-v.html"><img src="/uploads/a2e3368b419b08493b630a43161a5789.jpg" width="120" height="120" alt="Ошибка: попытка вставки неуникального значения в уникальный индекс: microsoft sql server" class="related-item__image" / loading=lazy>Ошибка: попытка вставки неуникального значения в уникальный индекс: microsoft sql server</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="/ukazanie-parametra-pri-vyzove-vneshnei-pechatnoi-formy-vyvod-pechatnyh-form-s.html"><img src="/uploads/ab4abdcf32600c01813f10b153a96bce.jpg" width="120" height="120" alt="Вывод печатных форм с запросом данных в форму "Печать документов" из подсистемы БСП "Печать"" class="related-item__image" / loading=lazy>Вывод печатных форм с запросом данных в форму "Печать документов" из подсистемы БСП "Печать"</a> <div class="related-item__comments"><span></span></div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 15px; margin-bottom: 15px; " id="vanna-1965575812"><div class="adsense"><script type="text/javascript">ga_1();</script></div></div> </main> <aside class="sidebar"> <div class="advices" data-theme="vannapedia_v.3"> <div class="headline"></div> <div class="advices-content"> <img src="/uploads/48cc7f8ab50e8bcb6d241d708eb091d3.jpg" width="120" height="120" alt="Как отключить управление голосом на iPhone?" class="advices__image" / loading=lazy> <div class="advices__title" data-id="3334"><a href="/kak-polnostyu-otklyuchit-upravlenie-golosom-na-aifon-kak-otklyuchit.html">Как отключить управление голосом на iPhone?</a></div> </div> </div> <div class="vk-widget" id="text-3"> <div class="textwidget"><script type="text/javascript" src="//vk.com/js/api/openapi.js?130"></script> <div id="vk_groups"></div> </div> </div> <div class="sidebar-questions"> <div class="headline">Новое</div> <ul> <li><a href="/kak-obedinit-pdf-faily-v-odin-obedinyaem-dokumenty-pdf-obedinenie.html" >Объединяем документы PDF Объединение пдф</a></li> <li><a href="/truecrypt-ne-sozdaet-tom-ispolzovanie-truecrypt-c-klyuchevym-failom-na-rutoken.html" >Использование TrueCrypt c ключевым файлом на рутокен носителе</a></li> <li><a href="/obuchenie-onlain-zarabotku-dmitrii-koshelev-pohudenie-v-centre.html" >Обучение онлайн заработку</a></li> <li><a href="/pravilnoe-oformlenie-grupp-v-socialnyh-setyah-chto-takoe-avatar-v.html" >Что такое аватар в интернете и социальных сетях Пустая аватарка в одноклассниках</a></li> <li><a href="/elektronnye-dengi-chto-eto-takoe-i-kak-ih-zavesti-elektronnye.html" >Электронные деньги: ценность, виды, перспективы Электронные деньги или платежные системы</a></li> <li><a href="/mts-100-minut-mnr-rasshifrovka-abbreviatury-mobilnogo.html" >Расшифровка аббревиатуры мобильного оператора мтс</a></li> </ul> </div> <div class="section"> <div id="macire1" style="height:500px;width:240px;" align="center"></div> </div> <div class="section"> <div class="headline">Популярные статьи</div> <ul class="sidebar-posts"> <li><a href="/tehnicheskaya-podderzhka-tehnicheskaya-podderzhka-rill-soft.html"><img src="/uploads/aeb97cf2d6c93142085e55d574a8a41a.jpg" width="80" height="80" alt="Техническая поддержка Рилл софт" / loading=lazy>Техническая поддержка Рилл софт</a></li> <li><a href="/chto-za-rasshirenie-mod-chto-takoe-rasshirenie-faila-mod-kak-prosto.html"><img src="/uploads/ca4e30a35a573427a25b29600aa474cf.jpg" width="80" height="80" alt="Что такое расширение файла MOD?" / loading=lazy>Что такое расширение файла MOD?</a></li> <li><a href="/kak-postavit-obychnyi-vk-kak-vernut-staryi-dizain-vkontakte.html"><img src="/uploads/3ea7b6a107537277b28255e21b4b2124.jpg" width="80" height="80" alt="Как вернуть старый дизайн Вконтакте — отключаем новую версию" / loading=lazy>Как вернуть старый дизайн Вконтакте — отключаем новую версию</a></li> </ul> </div> <div class="section"> <div class="headline">Новое на сайте</div> <ul class="sidebar-posts sidebar-photo"> <li><a href="/vneshnyaya-obrabotka-v-1s-8-3-dobavlenie-vneshnei-obrabotki-v-bazu.html">Внешняя обработка в 1с 8</a></li> <li><a href="/telefon-s-2-radiomodulyami-aktivnymi-luchshie-smartfony-s-dvumya.html">Лучшие смартфоны с двумя активными сим картами</a></li> <li><a href="/keit-mobil-dlya-kompa-chto-takoe-kate-mobile-dlya-kompyutera-otlichie.html">Что такое kate mobile для компьютера</a></li> <li><a href="/skachat-universalnoe-rekaveri-na-android-ustanovka-proshivok-obnovlenii-yader.html">Установка прошивок, обновлений, ядер и прочего на Android устройство с помощью ClockworkMod</a></li> <li><a href="/programma-protiv-virusov-luchshie-antivirusnye-skanery-ne-trebuyushchie.html">Лучшие антивирусные сканеры, не требующие установки на компьютер</a></li> </ul> </div> </aside> </div> <footer class="footer"> <nav class="footer__nav"><ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1219"><a href="/">Новое</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27789"><a href="/klyuchi-zapuska-1s-8-3-iz-komandnoi-stroki-razvitie-rezhima-agenta-konfiguratora-komandy-sushchestvuyushchi.html">Ключи запуска 1с 8.3 из командной строки. Развитие режима агента конфигуратора. Команды, существующие в пакетном режиме</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27788"><a href="/unikalnyi-indeks-1s-sql-oshibka-popytka-vstavki-neunikalnogo-znacheniya-v.html">Ошибка: попытка вставки неуникального значения в уникальный индекс: microsoft sql server</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27787"><a href="/ukazanie-parametra-pri-vyzove-vneshnei-pechatnoi-formy-vyvod-pechatnyh-form-s.html">Вывод печатных форм с запросом данных в форму "Печать документов" из подсистемы БСП "Печать"</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27785"><a href="/standartnye-prirozheniya-windows-perechen-standartnyh-programm-windows-perechen.html">Перечень стандартных программ windows Перечень стандартных программ windows</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1230"><a href="/">Популярное</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27784"><a href="/kak-udalit-istoriyu-v-skaipe-kak-ochistit-istoriyu-soobshchenii-v-skaipe-kak.html">Как очистить историю сообщений в скайпе Как очистить историю разговоров в скайпе</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27783"><a href="/kak-polnostyu-otklyuchit-upravlenie-golosom-na-aifon-kak-otklyuchit.html">Как отключить управление голосом на iPhone?</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27782"><a href="/kak-obedinit-pdf-faily-v-odin-obedinyaem-dokumenty-pdf-obedinenie.html">Объединяем документы PDF Объединение пдф</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27781"><a href="/truecrypt-ne-sozdaet-tom-ispolzovanie-truecrypt-c-klyuchevym-failom-na-rutoken.html">Использование TrueCrypt c ключевым файлом на рутокен носителе</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27780"><a href="/obuchenie-onlain-zarabotku-dmitrii-koshelev-pohudenie-v-centre.html">Обучение онлайн заработку</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27777"><a href="/pravilnoe-oformlenie-grupp-v-socialnyh-setyah-chto-takoe-avatar-v.html">Что такое аватар в интернете и социальных сетях Пустая аватарка в одноклассниках</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27775"><a href="/elektronnye-dengi-chto-eto-takoe-i-kak-ih-zavesti-elektronnye.html">Электронные деньги: ценность, виды, перспективы Электронные деньги или платежные системы</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27774"><a href="/mts-100-minut-mnr-rasshifrovka-abbreviatury-mobilnogo.html">Расшифровка аббревиатуры мобильного оператора мтс</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1236"><a href="/">Рекомендуем</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27773"><a href="/tehnicheskaya-podderzhka-tehnicheskaya-podderzhka-rill-soft.html">Техническая поддержка Рилл софт</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27772"><a href="/chto-za-rasshirenie-mod-chto-takoe-rasshirenie-faila-mod-kak-prosto.html">Что такое расширение файла MOD?</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27771"><a href="/kak-postavit-obychnyi-vk-kak-vernut-staryi-dizain-vkontakte.html">Как вернуть старый дизайн Вконтакте — отключаем новую версию</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27770"><a href="/vneshnyaya-obrabotka-v-1s-8-3-dobavlenie-vneshnei-obrabotki-v-bazu.html">Внешняя обработка в 1с 8</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27769"><a href="/telefon-s-2-radiomodulyami-aktivnymi-luchshie-smartfony-s-dvumya.html">Лучшие смартфоны с двумя активными сим картами</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27767"><a href="/keit-mobil-dlya-kompa-chto-takoe-kate-mobile-dlya-kompyutera-otlichie.html">Что такое kate mobile для компьютера</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27765"><a href="/skachat-universalnoe-rekaveri-na-android-ustanovka-proshivok-obnovlenii-yader.html">Установка прошивок, обновлений, ядер и прочего на Android устройство с помощью ClockworkMod</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-27792"><a href="/programma-protiv-virusov-luchshie-antivirusnye-skanery-ne-trebuyushchie.html">Лучшие антивирусные сканеры, не требующие установки на компьютер</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6898"><a href="/">О сайте</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6900"><a href="">О сайте</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6901"><a href="">Реклама на сайте</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6902"><a href="/feedback.html">Контакты</a></li> </ul> </li> </ul></nav> <div class="footer-bottom"> <div class="footer-left"> <div class="foot__logo"> <div class="footer__logo-sitename">appcube.ru<span> ru</span></div> </div> <style> .foot__logo { min-height: 35px; margin: 0 0 11px -79px; padding: 9px 0 0 79px; text-decoration: none; } </style> <p>© 2024 Все права защищены</p> <p>Сайт о компьютерах</p> <ul class="footer-bottom__nav"> <li><a href="" >Реклама на проекте</a></li> </ul> </div> <div class="footer-buttons"> </div> <ul class="footer__soc"> <li><a href="http://vk.com/" target="_blank" class="vk">ВКонтакте</a></li> <li><a href="http://ok.ru/" target="_blank" class="ok">Одноклассники</a></li> <li><a href="http://www.facebook.com/" target="_blank" class="fb">Facebook</a></li> <li><a href="https://twitter.com/" target="_blank" class="twi">Twitter</a></li> </ul> <div class="footer-right"> <div class="footer__note"></div> <div class="footer__counters" id="text-2"> <div class="textwidget"></div> </div> </div> </div> </footer> </div> </div> <link rel='stylesheet' id='wp-lightbox-bank.css-css' href='/wp-content/plugins/wp-lightbox-bank/assets/css/wp-lightbox-bank.css?ver=4.8.3' type='text/css' media='all' /> <script type='text/javascript' src='https://appcube.ru/wp-content/themes/vannapedia_v.3/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-fixed", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "respond", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ; </script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/wp-lightbox-bank/assets/js/wp-lightbox-bank.js?ver=4.8.3'></script> <script type='text/javascript' src='https://appcube.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script> </body> </html>