Создание HTML форм. HTML Формы Невыгодный login form html

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

Синтаксис создания следующий.

Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.

Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить свои полномочия. В примере 1 показано, как создавать подобные поля.

Пример 1. Поле с паролем

В результате получим следующее (рис. 1).

Рис. 1. Вид поля с паролем

К полю с паролем применимы стилевые свойства задающие параметры цвета, фона, рамки и др. В примере 2 показано добавление фоновых картинок к полям формы. За основу возьмём стиль как для текстовых полей.

Пример 2. Добавление изображения в текстовое поле

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

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <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><a href="/getting-started-with-tablet/1s-8-2-kontaktnaya-informaciya-kak-primenyat-spravochnik-vidy-kontaktnoi/">Контактная информация</a></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://i1.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://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. <a href="/reviews/globo-hd-ts-9600-proshivka-dlya-sharinga-vneshnii-vid-i-tehnicheskie-harakteristiki/">Внешний вид</a> формы по умолчанию <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 замените на ваш адрес <a href="/connecting-other-devices/kak-zaiti-v-oblako-icloud-s-kompyutera-na-svoyu-stranicu-kak-voiti/">электронной почты</a>;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/operation-and-maintenance/kopiya-i-skrytaya-kopiya-v-elektronnoi-pochte-operatory-zablokiruyut-simkarty-i/">скрытую копию</a> на ваш адрес электронной почты.</p> <p>Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега <form> , как показано в примере 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="/example/handler.php"> <p><input name="login"> <input type="password" name="pass"></p> <p><input type="submit"></p> </form> </body> </html> </p><p>В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.</p><p>Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге <form> используется атрибут method , а его значениями выступают <a href="/setting-up-internet-on-your-tablet/podborka-klyuchevyh-slov-youtube-instrument-podskazki-klyuchevyh-slov-na-youtube-programmy/">ключевые слова</a> get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.</p><p>Какой метод используется легко определить по <a href="/bluetooth/chto-znachit-plagin-shockwave-flash-ne-otvechaet-plagin-shockwave-flash/">адресной строке</a> браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.</p><p>http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8</p><p>Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.</p><p>Ниже перечислены типовые области применения этих методов на сайтах.</p><h4>GET</h4> <p>Передача небольших текстовых данных на сервер; поиск по сайту.</p><p>Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.</p><h4>POST</h4> <p>Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.</p><p>Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега <form> . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега <iframe> (пример 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> <p><iframe name="area" width="500" height="200"></iframe></p> <form action="handler.php" target="area"> <p><input placeholder="Введите текст" name="text"> <p><input type="submit" value="Отправить"></p> </form> </body> </html> </p><p>В <a href="/how-to-work-with-your-tablet/chto-takoe-mikrorazmetka-i-kakie-tipy-mikrorazmetki-podderzhivayut-yandeks-i/">данном примере</a> при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .</p><p>Элементы формы традиционно располагаются внутри тега <form> , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут 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 id="auth" action="handler.php" method="post"></form> <p><input name="login" form="auth"> <input type="password" name="pass" form="auth"></p> <p><input type="submit" form="auth"></p> </body> </html> </p><p>В этом примере тег <form> однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.</p><p>Хотя параметры передачи формы традиционно указываются в теге <form> , их можно перенести и в кнопки отправки формы (<button> и <input type="submit"> ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.</p><p>Пример 4. Отправка формы</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 placeholder="Ваше имя" name="user"></p> <p><input type="submit" value="Отправить" formaction="handler.php" formmethod="post"></p> </form> </body> </html> </p><p>Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, <a href="/connecting-other-devices/sdelat-startovoi-strokoi-kak-besplatno-sdelat-yandeks/">Internet Explorer</a> и Safari.</p> <p>Как вы уже знаете, веб-клиент имеет возможность передавать веб-серверу различную информацию при помощи GET и POST-запросов. <i>HTML-формы </i> - это основной инструмент для создания таких запросов. По сути, HTML-форма представляет собой поле или поля для ввода информации на веб-странице. Наглядным примером HTML-формы служит форма ввода логина и пароля для авторизации на сайте.</p> <p>HTML-форма описывается с помощью парного тега <i>form </i>. Этот тег имеет два важнейших атрибута: <i>method </i> и <i>action </i>. В атрибуте method задается тип HTTP-запроса (get или post), в action - запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:</p> <<span>form method = "get" action = "/login.php" > </span> ... <<span>/ form > </span> <p>Существует несколько различных видов элементов для ввода данных, которые помещаются внутри формы. Элемент, с которого я хотел бы начать, называется <i>submit </i>:</p> <<span>input type = "submit" value = "Войти" / > </span> <p>Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут <i>value </i> задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты <i>name </i>. Например:</p> <<span>form method = "get" action = "/control.php" > </span> <<span>input type = "submit" name = "submit" value = "Add" / > </span> <<span>input type = "submit" name = "submit" value = "Edit" / > </span> <<span>/ form > </span> <p>При формировании запроса веб-браузер включит HTTP-параметр, характеризующий нажатый элемент submit. В качестве имени параметра будет взято значение атрибута name нажатой кнопки, в качестве значения - значение атрибута value. Таким образом, при нажатии кнопки Add будет сформирован запрос:</p><p> /control.php?submit=Add </p><p>а при нажатии кнопки Edit:</p><p> /control.php?submit=Edit </p><p>Следующий элемент представляет собой простейший элемент для ввода однострокового текста. Его HTML-код:</p> <<span>input type = "text" name = "name" / > </span> <p><input type="text"></p> <p>name - обязательный атрибут для участия в HTTP-запросе. Значение этого атрибута будет использовано в качестве имени HTTP-параметра. Этот атрибут имеется у всех типов элементов форм.</p> <p>Элементу можно также задать атрибут value, указав в нем текст, который по-умолчанию будет введен в элементе. Например:</p> <<span>input type = "text" name = "login" value = <span>"Имя пользователя" </span> / > </span> <p>Элемент <i>password </i> служит для ввода паролей. Внешне он такой же, но введенный текст отображается в виде звездочек или точек:</p> <<span>input type = "password" / > </span> <p><input type="password"></p> <p>Этого, в принципе, достаточно для создания простейшей формы авторизации. Давайте попробуем ее реализовать, а затем вернемся к рассмотрению остальных типов элементов.</p> <p>Создадим файл auth.php в корневом каталоге со следующим содержимым:</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= <span>"http://www.w3.org/1999/xhtml" </span>> </span> <<span>head > </span> <<span>title > </span>Авторизация<<span>/ title > </span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </span> <<span>/ head > </span> <<span>body > </span> <<span>form method = "get" action = "/auth.php" > </span> <<span>table > </span> <<span>tr > </span> <<span>td > </span>Имя пользователя:<<span>/ td > </span> <<span>td > </span> <<span>input type = "text" name = "login" value = "" / > </span> <<span>/ td > </span> <<span>/ tr > </span> <<span>tr > </span> <<span>td > </span>Пароль:<<span>/ td > </span> <<span>td > </span> <<span>input type = "password" name = "pass" value = "" / > </span> <<span>/ td > </span> <<span>/ tr > </span> <<span>/ table > </span> <<span>input type = "submit" value = "Войти" / > </span> <<span>/ form > </span> <<span>/ body > </span> <<span>/ html > </span> <p>Как видите, внутри тега form можно размещать теги, помогающие красиво разметить форму (я внутрь поместил таблицу). Форма содержит поля для ввода имени пользователя и пароля с именами login и pass соответственно. При нажатии "Войти" формируется GET-запрос документа /auth.php (то есть, страница запрашивает саму себя). В моем случае полный URL страницы имел вид <i>http://test-domain3/auth.php </i>.</p> <p>Введите данные и нажмите "Войти". Страница должна перезагрузиться. Должен также измениться и адрес страницы. В моем случае он принял вид:</p><p>Http://test-domain3/auth.php?login=Joker-jar&pass=12345 </p><p>Это означает, что документ auth.php был запрошен с GET-параметрами, которые были введены с помощью HTML-формы. Поместите в начало файла auth.php PHP-обработчик, который будет принимать данные для авторизации:</p> <?php <span>//--Проверяем, были ли переданы данные </span> if ( isset ($_GET [ "login" ] ) && isset ($_GET [ "pass" ] ) ) { echo <span>"Ваше имя пользователя: " </span> . $_GET [ "login" ] . ", ваш пароль: " . $_GET [ "pass" ] ; exit ; } ?> <p>Если странице были переданы логин и пароль, условие сработает и сообщение будет выведено. Также будет вызван <i>exit </i>, который прекратит дальнейшее выполнение скрипта, следовательно форма выведена не будет.</p> <p>Передавать пароль с помощью GET-запроса небезопасно, так как он виден в адресной строке. Сменим тип запроса на POST. Для этого изменим значение атрибута method, а в PHP-обработчике обращения к массиву $_GET изменим на $_POST. Проверьте работоспособность скрипта.</p> <p>Следующий элемент - <i>флажок </i>. Его применяют, когда от пользователя необходим ответ вида "да/нет":</p> <<span>input type = "checkbox" / > </span> <p>Если флажок не отмечен, в параметрах ничего не передается. Иначе передается параметр name со значением <i>on </i>. Есть еще один момент. Как правило, рядом с флажком присутствует поясняющая надпись. Хорошим тоном является реализация веб-мастером реакции флажка на клики по этой надписи. Делается это просто. Флажку присваивается определенный id, а сама надпись оформляется тегом <i>label </i> с атрибутом <i>for </i>, значение которого равно идентификатору флажка:</p> <<span>input type = "checkbox" id = "remember" name = "remember" / > </span> <<span>label for = "remember" > </span>Запомнить меня<<span>/ label > </span> <p><input id="remember" name="remember" type="checkbox"></p> <p>Похожий элемент используется для выбора ответа из набора значений. Допустим, пользователю необходимо выбрать один из трех цветов:</p> <<span>input type = "radio" id = "red" name = "color" value = "red" / > </span> <<span>label for = "red" > </span>Красный<<span>/ label > </span> <<span>br / > </span> <<span>input type = "radio" id = "green" name = "color" value = "green" / > </span> <<span>label for = "green" > </span>Зеленый<<span>/ label > </span> <<span>br / > </span> <<span>input type = "radio" id = "blue" name = "color" value = "blue" / > </span> <<span>label for = "blue" > </span>Синий<<span>/ label > </span> <<span>br / > </span> <p><input id="red" name="color" type="radio" value="red"><br><input id="green" name="color" type="radio" value="green"><br><input id="blue" name="color" type="radio" value="blue"></p> <p>Обратите внимание, что у всех элементов одинаковое значение name. Можно выбрать только одно значение. В HTTP-параметра передастся value выбранного элемента, например <i>color=blue </i>.</p> <p>Чтобы изначально был выбран какой-то из элементов, например, первый, ему нужно задать атрибут <i>checked </i> со значением <i>checked </i> (стандарт XHTML):</p> <<span>input type = "radio" id = "red" name = "color" value = "red" checked = "checked" / > </span> <p>Для ввода большого многострочного текста существует специальный элемент <i>textarea </i>:</p> <<span>textarea rows = "6" cols = "20" name = "text" > </span>Текст внутри элемента<<span>/ textarea > </span> <p>Текст внутри элемента</p> <p>Этот элемент, как видите, отличается от предыдущих. Он представляет собой парный тег, а текст помещается не в атрибут, а в тело тега. У элемента также есть атрибут name. При помощи атрибута <i>rows </i> можно задать количество строк в элементе, <i>cols </i> - количество символов в строке. Элемент textarea используется, как правило, в POST-формах, т.к. предполагает ввод длинного текста (например, форма сообщения на форуме).</p> <p>Выпадающий список. Наверняка сталкивались с таким элементом в программах. Позволяет выбрать одно значение из набора. Код элемента также не совсем обычен. Сначала создается элемент-контейнер <i>select </i>, ему задается атрибут name:</p> <<span>select name = "towns" > </span> <<span>/ select > </span> <p>Внутрь контейнера помещаются элементы списка. Элемент списка представляет собой парный тег <i>option </i>, каждому элементу задается атрибут value. В тело элемента прописывается надпись элемента:</p> <<span>select name = "town" > </span> <<span>option value = "msk" > </span>Москва<<span>/ option > </span> <<span>option value = "vlad" > </span>Владивосток<<span>/ option > </span> <<span>option value = "nsk" > </span>Новосибирск<<span>/ option > </span> <<span>/ select > </span> <p>В HTTP-запросе передается параметр с именем name и значением value выбранного элемента, например <i>town=vlad </i>. По умолчанию выбран первый элемент списка, если хотите, чтобы был выбран другой элемент, задайте ему атрибут <i>selected </i> со значением <i>selected </i>:</p> <<span>option value = "vlad" selected = "selected" > </span>Владивосток<<span>/ option > </span> <p>Список значений. Если элементу select задать атрибут <i>size </i> с числовым значением, выпадающий список превратится в список значений. При этом значение атрибута size будет определять вертикальный размер элемента:</p> <<span>select name = "town" size = "3" > </span> <<span>option value = "msk" > </span>Москва<<span>/ option > </span> <<span>option value = "vlad" > </span>Владивосток<<span>/ option > </span> <<span>option value = "nsk" > </span>Новосибирск<<span>/ option > </span> <<span>/ select > </span> <p>Москва Владивосток Новосибирск</p> <p>Если элементу select задать атрибут <i>multiple </i> со значением <i>multiple </i> (стандарт XHTML), то появится возможность выбирать более одного элемента одновременно (например, с зажатой клавишей Ctrl). В этом случае в HTTP-запросе будут переданы все выбранные элементы с одинаковыми именами, например: <i>town=msk&town=vlad&town=nsk </i>.</p> <p>Иногда необходимо в HTTP-запросе передать параметр, который пользователь не должен редактировать, а порой даже и видеть. Допустим, вы реализуете форму редактирования новости. В HTTP-запросе необходимо передавать идентификатор этой новости. Для подобных случаев есть <a href="/program-overview/pokazat-skrytye-faily-windows-8-tri-sposoba-skryt-papki-v-windows-prostoi/">скрытый элемент</a> HTML-форм:</p> <<span>input type = "hidden" name = "param" value = "" / > </span> <p>Этот элемент не будет виден на форме, но при выполнении запроса будет передан HTTP-параметр name=value.</p> <p>Иногда может пригодиться элемент, очищающий форму. Кнопка, при нажатии на которую все введенные пользователем данные на форме стираются:</p> <<span>input type = "reset" value = "Очистить" / > </span> <p>Перечисленные элементы имеют два специальных атрибута:</p> <p>readonly="readonly" - запрещает изменение информации в элементе (режим "только для чтения);<br> disabled="disabled" - делает элемент неактивным.</p> <p>Существует также элемент для выбора файла, который при сабмите формы будет загружен на веб-сервер, но об этом, пожалуй, в отдельной статье.</p> <br> Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации. <br> В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .<h3> HTML </h3> <div id="container_demo" > <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --> <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Log in</h1> <p> <label for="username" class="uname" data-icon="u" > Your email or username </label> <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p"> Your password </label> <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Keep me logged in</label> </p> <p class="login button"> <input type="submit" value="Login" /> </p> <p class="change_link">Not a member yet ? Join us </p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Sign up"/> </p> <p class="change_link">Already a member ? Go and log in </p> </form> </div> </div> </div> <br> Здесь мы использовали несколько приемов HTML5. Например, элемент <i>type=password </i> автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент <i>type=email </i> позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр <i>require=required </i>; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр <i>autocomplete=on </i> будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.<p>Теперь о двух хитрых моментах. Вы наверное заметили две ссылки <a href> в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).</p><p>Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр <i>data-icon=”icon_character” </i> с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes . </p><h2> CSS </h2> Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!<h4>Стилизуем формы, используя CSS3</h4> Во-первых, давайте назначим нашим формам базовый стиль.<p> #subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; } </p><p>Здесь мы назначим свойства для шапки:</p><p> /**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); } </p><p>Замечу, что сегодня только браузеры с webkit поддерживают <i>background-clip: text </i>, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр <i>background-clip: text </i> работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр <i>-webkit-text-fill-color: transparent </i> позволяет нам иметь <a href="/operation-and-maintenance/kak-v-paint-sdelat-cvet-nasyshchennee-kak-sdelat-prozrachnyi-fon-v-paint-kak-ubrat/">прозрачный фон</a>, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.</p><p>Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.</p><p>Теперь давайте позаботимся о полях ввода и придадим им приятный вид.</p><p> /**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; } </p><p>Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.</p><p> /* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } </p><p>Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.</p><p>Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут <i>data-icon </i>? Именно в него нужно вставить букву. Я использовал <i>data-icon=’u’ </i> для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face. </p><p> @font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; } </p><p>Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр <i>content: attr(data-icon) </i>, чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.</p><p>Теперь назначим правила для кнопки отправки формы.</p><p> /*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; } </p><p>Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.</p><p>Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:</p><p> /* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; } </p><p>Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.</p><p>P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; } </p><p>Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!</p><h4>Создаем анимацию</h4> Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:<p> #register{ z-index: 21; opacity: 0; } </p><p>Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.</p><p>Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр <i>display: none </i>. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).</p><p> #toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; } </p><p>Вот, что происходит: когда мы кликаем на кнопку <i>Присоединиться </i>, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием <i>fadeInLeft </i>. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.<br> Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.</p><p>Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } </p><p>Форма, которая “исчезает”, будет иметь анимацию затемнения влево:</p><p> #toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } </p><p>Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.</p><p>Вот и все, друзья. Надеюсь вам понравился этот туториал!</p><p><b>Заметим, что в некоторых браузерах параметр <i>background-clip: text </i> не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет. </b></p><p><b>P.S. </b> Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!</p><p>Теги: Добавить метки</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><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> </article> <div class="post-meta"> <div class="post-rating"> <div class="post-rating__title">Оценка статьи:</div> <div id="post-ratings-5362" class="post-ratings" itemscope itemtype="http://schema.org/Article" data-nonce="024911c8fe"><img id="rating_5362_1" src="https://nvs-mvv.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="1 звезда" title="1 звезда" onmouseover="current_rating(5362, 1, '1 звезда');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_5362_2" src="https://nvs-mvv.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="2 звезды" title="2 звезды" onmouseover="current_rating(5362, 2, '2 звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_5362_3" src="https://nvs-mvv.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="3 звезды" title="3 звезды" onmouseover="current_rating(5362, 3, '3 звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_5362_4" src="https://nvs-mvv.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="4 звезды" title="4 звезды" onmouseover="current_rating(38338, 4, '4 звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_5362_5" src="https://nvs-mvv.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="5 звезд" title="5 звезд" onmouseover="current_rating(5362, 5, '5 звезд');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy> (Пока оценок нет)<br /><span class="post-ratings-text" id="ratings_5362_text"></span> </div> <div id="post-ratings-38338-loading" class="post-ratings-loading"> <img src="https://nvs-mvv.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy> Загрузка...</div> </div> <div class="post-share"> <div class="post-share__title">Поделиться с друзьями:</div> <script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8" async="async"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter" data-counter=""></div> </div> </div> <div class='yarpp-related'> <div class="related-title"><span>Похожие публикации</span></div> <ul class="related-items"> <li> <img src="/uploads/4429da51d64f5a2695eb5eac0d86b46a.jpg" width="154" height="154" alt="Программы для записи голоса и звука Программа для записи мелодии на компьютере" / loading=lazy> <a href="/reviews/programmy-diktofon-dlya-kompyutera-programmy-dlya-zapisi/">Программы для записи голоса и звука Программа для записи мелодии на компьютере</a> </li> <li> <img src="/uploads/249b8a0455ce7ef663bf4480e695d3e9.jpg" width="154" height="154" alt="Что такое браузер Тор и для чего он нужен?" / loading=lazy> <a href="/setting-up-internet-on-your-tablet/kak-rabotat-s-brauzerom-tor-blokiruem-opredelenie-svoego/">Что такое браузер Тор и для чего он нужен?</a> </li> <li> <img src="/uploads/8c57aa09b2e1c9be2240a53d4a7df320.jpg" width="154" height="154" alt="Автоматическое определение движка форума" / loading=lazy> <a href="/an-overview-of-the-technologies/proidet-index-php-topic-powered-by-smf-avtomaticheskoe-opredelenie-dvizhka-foruma-reshenie/">Автоматическое определение движка форума</a> </li> <li> <img src="/uploads/e1886ca29a99fe9da2b9090c366fe03f.jpg" width="154" height="154" alt="Лучший Android флагман для девушек" / loading=lazy> <a href="/connecting-other-devices/obzor-xiaomi-mi6-luchshii-android-flagman-dlya-devushek-xiaomi-mi6-levaya-gran/">Лучший Android флагман для девушек</a> </li> </ul> </div> <div id="ads_txt2"></div> <div style="text-align: center; margin:20px 0 10px 0;float:none;"> </div> <div style="text-align: center; margin:10px 0 10px 0;float:none;"> </div> </main> <aside class="sidebar"> <div class="section section_widget widget_text" id="text-10"> <div class="textwidget"> </div> </div> <div class="popular-box section"> <div class="title title_green">Популярные статьи</div> <div class="popular"> <div class="popular__item"> <img src="/uploads/7f2f019b1308c2667cef345e5850f6ef.jpg" width="90" height="90" alt="Как загрузить новый Android с помощью Xperia Companion" / loading=lazy> <div class="popular__item-title"> <a href="/an-overview-of-the-technologies/kogda-android-7-na-samsung-kak-zagruzit-novyi-android-s-pomoshchyu-xperia/">Как загрузить новый Android с помощью Xperia Companion</a> </div> </div> <div class="popular__item"> <img src="/uploads/9b716619da06f281f40d162d697a34dc.jpg" width="90" height="90" alt="Топ плагинов для WordPress от Yoast: Vol" / loading=lazy> <div class="popular__item-title"> <a href="/an-overview-of-the-technologies/plaginy-wordpress-tolko-luchshee-top-plaginov-dlya-wordpress-ot-yoast-vol/">Топ плагинов для WordPress от Yoast: Vol</a> </div> </div> <div class="popular__item"> <img src="/uploads/658b72559d07606d844bc82a69e0a1bc.jpg" width="90" height="90" alt="Создание сервера в майнкрафт" / loading=lazy> <div class="popular__item-title"> <a href="/getting-started-with-tablet/ne-poluchaetsya-sozdat-server-minecraft-sozdanie-servera-v-mainkraft-nastroika-po/">Создание сервера в майнкрафт</a> </div> </div> </div> </div> <div class="section section-video"> <div class="title title_green">Новые статьи</div> <div class="section-video__posts"> <div class="section-video__posts-item"> <div class="section-video__posts-item-img"> <img src="/uploads/8efcd936bac42ebc1f77dd395bcfb74d.jpg" width="231" height="137" alt="Что делать, если при установке Windows возникла ошибка «Не найден необходимый драйвер носителя»?" / loading=lazy> </div> <div class="section-video__posts-item-title"> <a href="/internet-choice/ustanovka-windows-10-naiden-draiver-nositelya-chto-delat-esli-pri-ustanovke/">Что делать, если при установке Windows возникла ошибка «Не найден необходимый драйвер носителя»?</a> </div> </div> <div class="section-video__posts-item"> <div class="section-video__posts-item-img"> <img src="/uploads/e1632af677fe0275ec6fc2de178084d7.jpg" width="231" height="137" alt="П а к т личный. Личный кабинет пакт. Вход в личный кабинет П.А.К.Т" / loading=lazy> </div> <div class="section-video__posts-item-title"> <a href="/internet-choice/p-a-k-t-lichnyi-lichnyi-kabinet-pakt-vhod-v-lichnyi-kabinet-p-a-k/">П а к т личный. Личный кабинет пакт. Вход в личный кабинет П.А.К.Т</a> </div> </div> <div class="section-video__posts-item"> <div class="section-video__posts-item-img"> <img src="/uploads/a43009a9f3c202eaacd062f1c3409425.jpg" width="231" height="137" alt="Как убрать звук с клавиатуры телефона Как убрать звук клавиатуры на хуавей" / loading=lazy> </div> <div class="section-video__posts-item-title"> <a href="/bluetooth/shest-poleznyh-nastroek-zvuka-v-android-i-ios-kak-ubrat-zvuk-s/">Как убрать звук с клавиатуры телефона Как убрать звук клавиатуры на хуавей</a> </div> </div> </div> </div> <div class="section section_widget widget_text" id="text-14"> <div class="textwidget"> <div class="form-outer sp-force-hide"> <style id="subscribe-form-style" class="">.sp-force-hide { display: none; } .sp-form[sp-id="44130"] { display: block; background: #ffffff; padding: 15px; width: 300px; max-width: 100%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-color: #72a74f; border-style: solid; border-width: 1px; font-family: inherit; } .sp-form[sp-id="44130"] .sp-form-control { background: #ffffff; border-color: #cccccc; border-style: solid; border-width: 1px; font-size: 15px; padding-left: 8.75px; padding-right: 8.75px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; height: 35px; width: 100%; } .sp-form[sp-id="44130"] .sp-field label { color: #444444; font-size: 13px; font-style: normal; font-weight: bold; } .sp-form[sp-id="44130"] .sp-button { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #72a74f; color: #ffffff; width: 100%; font-weight: bold; font-style: normal; font-family: Arial, sans-serif; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .sp-form[sp-id="44130"] .sp-button-container { text-align: center; } .sp-form[sp-id="44130"] .sp-e3ddc4a4-0acb-482c-82ce-b7fd6f9876c8-container { text-align: left; } </style> <div id="sp-form-44130" sp-id="44130" sp-hash="21ae3ecde06efb6791b9fc63f473d4a032a43a575f2647b4025a55de6c8fffb6" sp-lang="ru" class="sp-form sp-form-regular sp-form-embed" sp-show-options="{ }"> <div class="sp-message"> <div></div> </div> <div id="droppableArea" class="sp-element-container ui-sortable ui-droppable" ><div class="sp-field full-width sp-e3ddc4a4-0acb-482c-82ce-b7fd6f9876c8-container" sp-id="sp-e3ddc4a4-0acb-482c-82ce-b7fd6f9876c8" > <img class="sp-image " src="//login.sendpulse.com/files/emailservice/userfiles/a02b554b7a2a21811ee922491b9faf996658686/123820.jpg" style="" loading=lazy> </div><div class="sp-field " sp-id="sp-c331da81-862c-4e37-8121-2d6784e1df76" > <div class=" " style="font-family: inherit; line-height: 1.2;"><p style="text-align: center;"><strong>Получайте все самое важное, что было пропущено, на почту!</strong></p></div> </div><div class="sp-field " sp-id="sp-c6dec073-554e-43df-ac51-bef5e2ce085e" style=""> <label class="sp-control-label "> <span class="">Ваше Имя</span> <strong class="">*</strong> </label> <input type="text" sp-type="name" name="sform[0LjQvNGP]" class="sp-form-control " placeholder="Имя" sp-tips="%7B%22required%22%3A%22%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%B5%22%7D" required="required" style=""> </div><div class="sp-field " sp-id="sp-2f69f348-864a-47c0-a464-f6adb7602fc5" > <label class="sp-control-label "> <span class="">Укажите свой E-mail</span> <strong class="">*</strong> </label> <input type="email" sp-type="email" name="sform[email]" class="sp-form-control " placeholder="username@gmail.com" sp-tips="%7B%22required%22%3A%22%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%B5%22%2C%22wrong%22%3A%22%D0%9D%D0%B5%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20email-%D0%B0%D0%B4%D1%80%D0%B5%D1%81%22%7D" required="required" style=""> </div><div class="sp-field " sp-id="sp-c7d0fdd7-607c-4930-a945-5adb2bae8283" > <div class=" " style="font-family: inherit; line-height: 1.2;"><p><span style="font-size: 12px;">Все рассылки абсолютно бесплатны.</span></p></div> </div></div> </div> </div> </div> </div><div class="section section_widget widget_text" id="text-8"> <div class="textwidget"> <div id="venus-99967"></div> </div> </div><div class="section section_widget widget_text" id="text-9"> <div class="textwidget"> <div id="ok_group_widget"></div> </div> </div><div class="section section_widget widget_text" id="text-4"> <div class="textwidget"> <div id="yandex_rtb_R-A-111272-5"></div> </div> </div></aside> </div> <footer class="footer"> <div class="logo logo_footer" style="background:none;"> <div class="logo__domain">nvs-mvv.ru</div> <div class="logo__copy">Все права защищены, 2024</div> </div> <nav class="footer-nav"><ul><li id="menu-item-5008" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5008"><a href="/sitemap.xml" class="menu-image-title-after">Карта сайта</a></li> </ul></nav> </footer> </div> <script type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/lightbox/js/frontend/mousewheel.min.js?ver=1.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var hugeit_resp_lightbox_obj = { "hugeit_lightbox_lightboxView":"view4","hugeit_lightbox_speed_new":"600","hugeit_lightbox_overlayClose_new":"true","hugeit_lightbox_loop_new":"true","hugeit_lightbox_fullwidth_effect":"false","hugeit_lightbox_thumbs":"false","hugeit_lightbox_showTitle":"true","hugeit_lightbox_showDesc":"false","hugeit_lightbox_showBorder":"false","hugeit_lightbox_imageframe":"frame_0"} ; var hugeit_gen_resp_lightbox_obj = { "hugeit_lightbox_slideAnimationType":"effect_1","hugeit_lightbox_overlayDuration":"150","hugeit_lightbox_escKey_new":"false","hugeit_lightbox_keyPress_new":"false","hugeit_lightbox_arrows":"true","hugeit_lightbox_mouseWheel":"false","hugeit_lightbox_download":"false","hugeit_lightbox_showCounter":"false","hugeit_lightbox_nextHtml":"","hugeit_lightbox_prevHtml":"","hugeit_lightbox_sequence_info":"image","hugeit_lightbox_sequenceInfo":"of","hugeit_lightbox_width_new":"100","hugeit_lightbox_height_new":"100","hugeit_lightbox_videoMaxWidth":"790","hugeit_lightbox_slideshow_new":"false","hugeit_lightbox_slideshow_auto_new":"false","hugeit_lightbox_slideshow_speed_new":"2500","hugeit_lightbox_slideshow_start_new":"","hugeit_lightbox_slideshow_stop_new":"","hugeit_lightbox_watermark":"false","hugeit_lightbox_socialSharing":"false","hugeit_lightbox_facebookButton":"false","hugeit_lightbox_twitterButton":"false","hugeit_lightbox_googleplusButton":"false","hugeit_lightbox_pinterestButton":"false","hugeit_lightbox_linkedinButton":"false","hugeit_lightbox_tumblrButton":"false","hugeit_lightbox_redditButton":"false","hugeit_lightbox_bufferButton":"false","hugeit_lightbox_diggButton":"false","hugeit_lightbox_vkButton":"false","hugeit_lightbox_yummlyButton":"false","hugeit_lightbox_watermark_text":"WaterMark","hugeit_lightbox_watermark_textColor":"ffffff","hugeit_lightbox_watermark_textFontSize":"30","hugeit_lightbox_watermark_containerBackground":"000000","hugeit_lightbox_watermark_containerOpacity":"90","hugeit_lightbox_watermark_containerWidth":"300","hugeit_lightbox_watermark_position_new":"9","hugeit_lightbox_watermark_opacity":"70","hugeit_lightbox_watermark_margin":"10","hugeit_lightbox_watermark_img_src_new":"http:\/\/nvs-mvv.ru\/wp-content\/plugins\/lightbox\/images\/No-image-found.jpg","hugeit_lightbox_watermark_container_bg_color":"rgba(0,0,0,0.9)"} ; var hugeit_resp_lightbox_plugins_url = "http:\/\/nvs-mvv.ru\/wp-content\/plugins\/lightbox\/images\/image_frames\/"; /* ]]> */ </script> <script type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/lightbox/js/frontend/lightbox.js?ver=1.0'></script> <script type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/lightbox/js/frontend/custom.js?ver=1.0'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.7.8'></script> <script type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://nvs-mvv.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-2", "margin_top" : 5, "margin_bottom" : 350, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ; </script> <script type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script async="async" type='text/javascript' src='https://nvs-mvv.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </div> <script>$('.hidden-link').click(function(){ window.open($(this).data('link'));return false;} );</script> <script type="text/javascript" src='ajax.js'></script> </body> </html>