HTML формы. Создание форм в HTML Ввод данных. Поля формы - тег

Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.

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

Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.

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

Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.

Атрибуты формы - тег

Форм на веб-странице может несколько (столько, сколько нужно разработчику ). Каждая из них начинается тегом и завершается закрывающим тегом .

Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).

Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.

Атрибут name тега

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

Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи атрибута target , определить окно, в котором будет отображаться результат обработки отправленной формы (в новом или в текущем окне ).

Но сам по себе тег не имеет смысла, ведь форма передает данные, которые сначала нужно куда-то внести!

Ввод данных. Поля формы - тег

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

type - это основной атрибут тега . Он устанавливает тип поля (элемента ) формы:

Значение атрибута type= "..."	Результат	Описание
		Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.
		Текстовое поле для ввода пароля. Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести
		Переключатель. Возможен выбор лишь одного варианта из предложенных. Атрибут checked определяет заранее помеченное поле.
		Флажок. Возможен выбор нескольких вариантов. Атрибут checked определяет заранее помеченное поле.
		Кнопка. Атрибут value устанавливает надпись на кнопке.
		Кнопка сброса. Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.
		Кнопка для отправки внесенных данных.
		Поле для ввода имени пересылаемого файла.
		Кнопка-изображение. Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.
		Скрытое поле - невидимое для пользователя.

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

Вид создаваемого списка зависит от значения атрибута size : при size= "1" (значение по умолчанию ) список будет раскрывающимся.

Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть ) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.

По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу и создает каждый пункт списка.

При помощи атрибута name тега

7 Чудес света!

Многострочное текстовое поле - тег </h3> <p>Тег <textarea> создает многострочное текстовое поле. В нем допустимо делать переносы строк, которые сохраняются при передаче данных обработчику.</p> <p>Атрибут name тега <textarea> является обязательным - при помощи его текстовому полю присваивают имя.</p> <p>Атрибут disabled блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.</p> <p>Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols и rows соответственно.</p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Если содержимое поля превысит его размеры - появится бегунок. </span>

Если содержимое поля превысит его размеры - появится бегунок.

Пример использования формы

Теперь давайте посмотрим: как работает форма.

Форма заказа обучающего видеоматериала:

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://i2.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://i1.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://i1.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://i0.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>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://i1.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>
<p>Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие <b>HTML формы
</b>.</p><p>Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.</p><p>И в этой статье Вы научитесь создавать абсолютно любые .</p><p>Сначала создайте простейшую <b>HTML-страницу
</b>, в которую добавьте контейнер (тег <b><div>
</b>), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.</p><p>А теперь займёмся формой. Форма начинается с тега <b><form>
</b>, соответственно, заканчивается закрывающим тегом <b></form>
</b>. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега <b><form>
</b>, чтобы Вам было понятнее назначение каждого из них:</p><p> <form name = "form1" action = "script/request.php" method = "post"><br></form> </p><p>Здесь у нас начинается описание формы, у которой есть следующие атрибуты:</p><p>1) Атрибут "<b>name
</b>". Значение этого атрибута означает имя <b>HTML формы
</b>. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через <b>JavaScript
</b>. Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я <b>НАСТОЯТЕЛЬНО
</b> рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает.</p><p>2) Атрибут "<b>action
</b>". Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому <i>файлу-обработчику
</i> и находится в значении атрибута "<b>action
</b>".</p><p>3) Атрибут "<b>method
</b>". У него может быть одно из двух очень популярных значения: "<b>post
</b>" и "<b>get
</b>". Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:</p><p>а) <b>http://mysite.ru/scipt/request.php
</b></p><p>б) <b>http://mysite.ru/script/request.php?a=7&b=Michael
</b></p><p>В первом случае, пользователь не видит, что отправляет (метод "<b>post
</b>"), а во втором он реально видит имена переменных и их значения (метод "<b>get
</b>"). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что <b>ГОРАЗДО
</b> чаще используют метод "<b>post
</b>", то есть скрытую отправку.</p><p>Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму.</p><p>Первое, что мы добавим - это текстовое поле. Добавляется текстовое поле с помощью тега <b><input>
</b>, а точнее с помощью атрибута этого тега "<b>type
</b>" со значением "<b>text
</b>". Также перед созданием текстового поля рекомендуется написать, что это за поле, например, "<i>Ваше имя
</i>". Внутри тега <b><form>
</b> напишите такую строчку:</p><p>Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя"> </p><p>Опять же, давайте разберём атрибуты:</p><p>1) Атрибут "<b>type
</b>" отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.</p><p>2) Атрибут "<b>name
</b>" отвечает за имя элемента. Здесь мы указали, что имя данного поля <b>firstname
</b>.</p><p>3) Атрибут "<b>value
</b>" отвечает за значение этого поля по умолчанию.</p><p>Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (<b>причём, именно наберите, а не скопируйте!
</b>) этот текст в редакторе, а потом посмотрите результат в браузере.</p><p>Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за <i>звёздочками
</i>. Поэтому, перейдя на следующую строку (тег <b><br>
</b>), напишем такой код:</p><p>Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль"> </p><p>Как видите, теперь значением атрибута "<b>type"
</b> является "<b>password
</b>". Остальные атрибуты те же, что и для обычного текстового поля.</p><p>Следующий элемент - это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий <b>HTML-код
</b>.</p><p>Выберите вариант: <br><select name = "choice"><br> <option value = "1">Вариант 1<br> <option value = "2">Вариант 2<br> <option value = "3">Вариант 3<br></select> </p><p>Тег <b><select>
</b> означает начало выпадающего списка. Заканчивается список тегом <b></select>
</b>. Атрибут "<b>name
</b>" ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега <b><option>
</b>. Значение атрибута "<b>value
</b>" означает, какой значение будет у переменной <b>choice
</b> (например, в <b>JavaScript
</b>), то есть либо <b>choice = 1
</b>, либо <b>choice = 2
</b>, либо <b>choice = 3
</b>. Сразу после окончания описания тега <b><option>
</b> ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.</p><p>Теперь добавим текстовую область, используя тег <b><textarea>
</b>:</p><p>Напишите что-нибудь:<br><br><br><textarea name = "message" rows = "10" cols = "15">Сообщение

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута "rows ") и шириной в 15 символов (значение атрибута "cols ").

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

Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков ", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега , а, точнее, с помощью значения "radio " атрибута "type ". Напишем такой HTML-код :

Выберите что-нибудь одно:
Вариант 1
Вариант 2
Вариант 3

Тут я остановлюсь на атрибуте "name ", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name ". Атрибут "value " означает значение переменной "choiceradio " (опять же, например, в JavaScript ). Сразу после описания тега идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

Ещё одним элементом формы являются переключатели (checkbox ). Создаются они опять же с помощью тега . Напишем следующие строчки:

Вы согласны с нашими правилами:

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms " будет "yes ", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.

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

Выберите файл для загрузки:

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

Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина очень простая: создать форму HTML гораздо проще, чем ту "точку внешнего мира", в которую HTML форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Перл или Си.

Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.

В настоящее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

HTML формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной] . Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Как устроена HTML форма

Форма открывается тегом и заканчивается тегом

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

Тег

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

Обязательный атрибут. Определяет, где находится обработчик формы.

Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET . Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET .

Определяет, каким образом данные из формы HTML будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded .

Простейшая HTML форма

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

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

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:

Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму (пример 11). Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.

Пример 11

Простейшая форма

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали! .

В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.

Как HTML форма собирает данные

Существуют и другие типы элементов . Каждый элемент должен включать атрибут NAME=[имя] , определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами . Большинство элементов должны включать атрибут VALUE="[значение]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов и , однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов :

TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).

Пример:

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user .

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*). Пример:

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля - 10 символов. Введенный пароль передается обработчику в переменной pw .

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример:

9600 бит/с
14400 бит/с
28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 . Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800 .

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:

Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS .

TYPE=hidden

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

Пример:

Определяет скрытую переменную version , которая передается обработчику со значением 1.1 .

TYPE=reset

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

Пример:

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

Помимо элементов , формы HTML могут содержать меню .</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> <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> <footer class="entry-footer"> </footer> </article> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 side-bar main-sidebar"> <div class="side-bar-inner"> <section id="custom_html-2" class="widget_text widget widget_custom_html"> <h3 class="widget-title">Популярное</h3> <div class="textwidget custom-html-widget"> <div class="popular_post_link"> <a href="/wise-registry-cleaner-skachat-besplatno-russkaya-versiya-wise-registry-cleaner-umnyi-kliner/">Wise Registry Cleaner — умный клинер Registry cleaner на русском языке</a> <a href="/css3-krasivyi-select-s-dvoinym-vypadayushchim-spiskom-vybor-iz-vypadayushchego/">Выбор из выпадающего списка в HTML</a> <a href="/yazyk-xhtml-chto-takoe-xhtml-oshibki-v-xhtml-i-otlichiya-xhtml-ot-html-vse-tegi-i/">Язык xhtml. Что такое XHTML? Ошибки в XHTML и отличия XHTML от HTML. Все теги и атрибуты должны писаться в нижнем регистре</a> <a href="/zakrytyi-klub-ot-freedom-technology-i-evgeniya-vanina-obzor-kompanii-freedom/">Oбзор компании Freedom Technology Management LTD Freedom technology management ltd вход</a> <a href="/taksi-kupony-na-skidku-i-promokody-yandeks-taksi-yandeks-taksi-na-pervuyu/">Купоны на скидку и промокоды «Яндекс</a> </div> <div class="popular_post_form"> </div> <script> (function() { var a = document.querySelector('.side-bar-inner'), b = null, P = 90; window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) { s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; ' } } b = document.createElement('div'); b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;'; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes[1]); } a.style.height = b.getBoundingClientRect().height + 'px'; a.style.padding = '0'; a.style.border = '0'; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('.site-content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент if ((Ra.top - P) <= 0) { if ((Ra.top - P) <= R) { b.className = 'stop'; b.style.top = -R + 'px'; b.style.padding = '0 0 50px'; } else { b.className = 'sticky2'; b.style.top = P + 'px'; } } else { b.className = ''; b.style.top = ''; } window.addEventListener('resize', function() { a.children[0].style.width = getComputedStyle(a, '').width }, false); } })() </script> </div> </section> </div> </div> </div> </div> </div> </div> </div> </div> <div id="footer" class="site-footer"> <footer id="footer-copyright" class="footer-copy"> <div class="container"> <div class="row"> <div class="col-md-4 footer-left">© 2024 mzpe.ru - Windows для всех</div> <div class="col-md-4 footer-center"> <a href="">О сайте</a> <a href="/feedback/">Контакты</a> </div> <div class="col-md-4 footer-right"> <ul id="main-nav-socials"> <li><a class="vimeo" title="ВКонтакте" href="https://vk.com/share.php?url=https://mzpe.ru/html-formy-sozdanie-form-v-html-vvod-dannyh-polya-formy--/" target="_blank"><i class="fa fa-vk"></i></a></li> <li><a class="facebook" title="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://mzpe.ru/html-formy-sozdanie-form-v-html-vvod-dannyh-polya-formy--/" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a class="youtube" title="Youtube" href="https://youtube.com/" target="_blank"><i class="fa fa-youtube-play"></i></a></li> <li><a class="twitter" title="Twitter" href="https://www.twitter.com/share?url=https://mzpe.ru/html-formy-sozdanie-form-v-html-vvod-dannyh-polya-formy--/" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a class="googleplus" title="Google Plus" href="" target="_blank"><i class="fa fa-google-plus"></i></a></li> </ul> </div> </div> </div> </footer> </div> </div> </div> <div class="popup-wrap-newletter mfp-hide mfp-with-anim" data-timeshow="0"> <div class="container-fluid"> <div class="wrapper-newletter-content"> <div class="row no-gutters"> <div class="col-md-12 col-sm-12 wrapper-newletter-popup"> <div class="newletter-popup-content"> </div> </div> </div> </div> </div> </div> <div id="back-to-top"><i class="fa fa-angle-up"></i></div> <script type='text/javascript' src='https://mzpe.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://mzpe.ru/wp-content/plugins/delphinus_core/assets/js/functions.min.js'></script> <script type='text/javascript' src='https://mzpe.ru/wp-content/plugins/easy-utm-tracking-with-contact-form-7/js/ucf7_scripts.js?ver=version'></script> <script type='text/javascript' src='https://mzpe.ru/wp-content/themes/delphinus/assets/js/plugins.js'></script> <script type='text/javascript' src='/wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=df5cbb97a194801225e379c7772c477f'></script> <script type='text/javascript' src='/assets/functions1.min1.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=df5cbb97a194801225e379c7772c477f'></script> <script type='text/javascript' src='https://mzpe.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://mzpe.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://mzpe.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div class="footer-advanced-js"> <script type="text/javascript"> jQuery(document).ready(function() { }); </script> </div> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <script> jQuery(function($) { var owl = $(".inner_page .vc_row_kt"); owl.owlCarousel({ items: 3, autoPlay: false, slideSpeed: 300, loop: true, paginationSpeed: 400, transitionStyle: "fade", responsive: { 0: { items: 1 }, 600: { items: 2 }, 1000: { items: 3 } } }); var owl = $(".popular_post_link"); owl.owlCarousel({ items: 1, autoPlay: false, slideSpeed: 300, loop: true, paginationSpeed: 400, transitionStyle: "fade", }); $('label span.agree').click(function() { $(this).toggleClass('click'); }); /*if(document.documentElement.clientWidth < 1024) { var owl = $(".home .popular_service .vc_row_kt"); owl.owlCarousel({ items: 1, autoPlay : false, slideSpeed : 300, loop: true, paginationSpeed : 400, transitionStyle : "fade", } ); } ;*/ }); </script> </body> </html>