Связь login form html. Создание формы в HTML

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

Заполнители полей (placeholder)

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

Атрибут «required»

Атрибут required не позволяет оставлять пустые поля до отправки формы. Если пользователь не заполнил поле, появляется следующая ошибка.

Новый селектор также включен в CSS3 (:required). Вот пример:

Input { border : 1px solid red ; }

Типы полей

Наше первое поле имеет тип email (типы инпутов — это еще одно нововведение HTML5). Если пользователь не заполнит поле с адресом электронной почты, появится следующее уведомление;

Использование такого инпута также удобно тем, что пользователям мобильных устройств (iPhone или Android) будет удобнее заполнять поле с выделенным «@» .

Новые возможности, предлагаемые для форм HTML5, являются мощными и простыми в реализации, но они не везде поддерживаются, например;

Атрибут placeholder поддерживают только современные браузеры - Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+ . Если вы хотите это исправить, используйте этот костыль в сочетании с Modernizr .

То же с атрибутом required . Уведомление об ошибке не могут быть персонифицированы, но ошибка будет оставаться: «Пожалуйста, заполните поля» вместо
«Пожалуйста, введите имя», этот атрибут также поддерживается только в нормальных браузерах.

Label { display : block ; color : #999 ; } .cf :before , .cf :after { content : "" ; display : table; } .cf :after { clear : both ; } .cf { *zoom: 1 ; } :focus { outline : 0 ; }

Все поля, кроме поля для «submit», будут иметь следующие стили:

Loginform input:not ([ type=submit] ) { padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 ) ; }

А вот стили для кнопки для отправки формы.

Loginform input[ type=submit] { border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; background : #64c8ef ; /* Old browsers */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientType=0 ) ; /* IE6-9 */ color : #fff ; padding : 5px 15px ; margin-right : 0 ; margin-top : 15px ; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 , 0 , 0 .3 ) ; }

Вот и все! Надеемся, этот урок вам пригодился.

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>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i0.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://i0.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. Внешний вид формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <br> Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы 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> позволяет нам иметь прозрачный фон, но только для браузеров 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> <p>Login forms can be found in websites with forums, shops, WordPress and mostly everything on the internet requires login form somewhere to get access to something. The whole web is incomplete without login forms and registration, signups forms.</p><p>HTML forms will be first which most of us come across and with proper CSS which gives style to the HTML structure . In latest HTML versions i guess HTML seems to have opted for CSS3 as their default structure styling option. Anyways what you find here is the pre designed HTML, CSS forms built by front end developers and shared to the public for free to use.</p><p>Try to use all these free login form templates as most of them also have pre built HTML validation features as well as some opt jQuery or HTML validation (like the Login/Register form with pass meter below).</p><p>This list is not over yet, i am interested in finding new login form designs so i will keep updating these list with new login form templates when they show up in 2017. Stay tuned.</p><h3>Red Login Form</h3><p>A simple and effective login form for your website which requires basic input fields and no extra programming.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2016/03/login-new.jpg' align="center" width="100%" loading=lazy></p><p>A flat login form design designed for your website which is already flat. Download and use this template for any purpose.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2016/03/simle-form.jpg' align="center" width="100%" loading=lazy></p><p>Require a quick signin for your clients ? No worries, this pretty looking login form will get you going without any hassles. Download the source code and check the demo as you can put a sample username and password in the fields and try to login. You will be taken to a profile page on the same which looks glorious with a logout button which shows the logging out animation.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/12/login-form-2015.jpg' align="center" width="100%" loading=lazy></p><p>With google material design getting popular over flat design we can see a deep and carefully shadowed login form and a register form in this css3 template.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/12/register-form.jpg' align="center" width="100%" loading=lazy></p><p>Here you get another brilliant login form for your busienss website with a option to hide/show login fields. Well coded css/html/js design will give you better loading without tampering your current site speed.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2016/03/material-design.jpg' align="center" width="100%" loading=lazy></p><h3>Minimal Login Form with fluid animation</h3><p>A smooth animation of login form which opens up the login section by clicking a picture or a button as you need.</p><h3>Minimalistic Login Form with css</h3><p>Here you will find a no-fancy login form ui which is placed on a full screen background. The download file will get you css and html for easy implementation of this login to your website.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/12/login-ui.jpg' align="center" width="100%" loading=lazy></p><h3>Animated Login Form</h3><p>The click animations displayed on text fields is brilliant which displays a small sliding animation of user and password icons. You can then login the form to watch a authenticating pre loader as well as a welcome back block. This download contains all the source files to implement a login form for your own website.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/12/Animated-login-form.jpg' align="center" width="100%" loading=lazy></p><h3>Elegant Login</h3><p>This is a simple version of login form you can display on your website as this also has less impact on site speed with its minimal code.</p><p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2015/09/elegant-login.jpg' align="center" width="100%" loading=lazy></p><h3>Calm Login Screen</h3><p>A clean login form with animated background giving a relaxing feel to the whole page. Download the whole template in zip format from codepen.</p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2015/05/calm-login-form.jpg' align="center" width="100%" loading=lazy></p><h3>Login and Signup Form</h3><p>Integrate this fluid login and signup form on to your website with ease. The zip file with this download will provide you with css, html and js templates. Social media signup is also available with password show/hide options for on screen easy password entry.</p><p><img src='https://i1.wp.com/designseer.com/wp-content/uploads/2015/05/css3-login-form-with-signup.jpg' align="center" width="100%" loading=lazy></p><h3>Login Form with Create Account</h3><p>A login form which displays with a fadein effect is just amusing to watch. This effect can be seen only in few modern login forms. Use the click me to change the form to signup or create form.</p><p>A minimal style login form with flat design can be download from the link below. HTML validation is available and set in this login template.</p> Download <h3>Minimal Form Template for Login</h3><p>A validation for email is in palce and this tempalte is pure css, html with no fancy jquery modules.</p> Download <h3>Signup/Login Form</h3><p>A single form to login to the website as well as a signup, register option which can be flipped with a click. Even though the signup area is missing some important fields this is nonetheless better form with all powerful features.</p> Download <p>This login form is hidden unles you click on login link. This is a very useful feature for modern day website which can avoid an extra page for login. Display login on any page you like with this powerful login form.</p> Download <p>It’s provided both as a PSD and as a fully-coded HTML/CSS version, so you can get started integrating it straight away.</p> <p><img src='https://i0.wp.com/designseer.com/wp-content/uploads/2014/01/Vibrant-Login-Interface-CSS-PSD.jpg' align="center" width="100%" loading=lazy></p><h3>Login Form (Coded)</h3><p>A professional login form. The download includes the PSD file, and I also felt like coding it so I included the xHTML, Js and CSS files as well.</p> Download <p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2014/01/Login-Form-Coded.jpg' align="center" width="100%" loading=lazy></p><h3>White Simple Login Form</h3><p>A clean and simple login form with a round submit button and elegant focus states.</p><h3>Simply Login Form</h3><p>Simply Login Form styled and designed purely using CSS3. The form is created using pretty simple markup and styled using very basic CSS3 properties.</p> Download <p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2014/01/login-page.jpg' align="center" width="100%" loading=lazy></p><p><img src='https://i2.wp.com/designseer.com/wp-content/uploads/2015/12/Pure-CSS-Login-Box.jpg' align="center" width="100%" loading=lazy></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="data"> <div class="data__top clearfix"> <div class="data__print"> <a href='javascript:window.print(); void 0;'> Печать</a> </div> </div> <div class="data__bottom clearfix"> <div class="data__share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,evernote,whatsapp,skype"></div> </div> </div> </div> <div class="navi"> <a href="/graphics/svyaz-login-form-html-sozdanie-formy-v-html-podklyuchenie-k-baze-dannyh/" class="navi__prev"></a> <!-- /next_post --> <a href="/office/kak-v-telefone-sdelat-russkii-yazyk-kak-izmenit-yazyk-telefona-na/" class="navi__next"></a> <!-- /next_post --> </div> </div> </div> <div class="news-blocks clearfix"> <div class="news-block"> <div class="papers"> <div class="papers__title">Также интересно:</div> <div class="papers__items"> <style> </style> <div class="papers__item"> <div class="papers__img"> <a href="/mobile/kak-mozhno-vosstanovit-google-akkaunt-esli-ne-pomnish-parol-vosstanovlenie/"><img src="/uploads/065576bb47f3790f712db175776dfbf2.jpg" style="width:70px; height:70px;" / loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="/mobile/kak-mozhno-vosstanovit-google-akkaunt-esli-ne-pomnish-parol-vosstanovlenie/">Восстановление аккаунта Google Как вернуть украденный аккаунт</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/mobile/ispolnitel-robot-prostye-komandy-tema-uroka-upravlenie-ispolnitelem/"><img src="/uploads/509e170c4c9a5f4f9dc3963ff01864b9.jpg" style="width:70px; height:70px;" / loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="/mobile/ispolnitel-robot-prostye-komandy-tema-uroka-upravlenie-ispolnitelem/">Исполнитель Робот. Простые команды. Тема урока: "Управление исполнителем "Робот". Работа в среде "Кумир"" Задания для кумира робот с решением</a> </div> <div class="papers__category"> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/video/kak-zapisyvat-tv-programmy-na-televizore-samsung-kak-sdelat-zapis-translyacii-s/"><img src="/uploads/91fa63675d195b6b1256eed1d6bce2a6.jpg" style="width:70px; height:70px;" / loading=lazy></a> </div> <div class="papers__ovh"> <div class="papers__name"> <a href="/video/kak-zapisyvat-tv-programmy-na-televizore-samsung-kak-sdelat-zapis-translyacii-s/">Как сделать запись трансляции с телевизора на флешку Запись тв передач из интернета</a> </div> <div class="papers__category"> </div> </div> </div> </div> </div> </div> <div class="news-block"> <div class="papers"> <div class="papers__title">Рекомендуем почитать:</div> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="/photoshop/redaktory-ikonok-besplatnaya-programma-dlya-sozdaniya-ikonok-programma-dlya/"> <img width="50" height="50" src="/uploads/7720df8de34974c68f122ce91fc60838.jpg" class="attachment-50 size-50 wp-post-image" alt="Бесплатная программа для создания иконок Программа для создания иконок ico" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-10 06:52:02</div> <div class="papers__name"> <a href="/photoshop/redaktory-ikonok-besplatnaya-programma-dlya-sozdaniya-ikonok-programma-dlya/">Бесплатная программа для создания иконок Программа для создания иконок ico</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/programs/zapolnenie-spravochnikov-v-1s-8-3-iz-excel-buhuchet-info-v-otryvshemsya-okne-nahodim/"> <img width="50" height="50" src="/uploads/89607da190b8d01037939fd0c58b02d7.jpg" class="attachment-50 size-50 wp-post-image" alt="Заполнение справочников в 1с 8" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-08 06:35:16</div> <div class="papers__name"> <a href="/programs/zapolnenie-spravochnikov-v-1s-8-3-iz-excel-buhuchet-info-v-otryvshemsya-okne-nahodim/">Заполнение справочников в 1с 8</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/office/konvertirovat-fail-v-pdf-onlain-kak-konvertirovat-word-v-pdf-podruchnym-softom/"> <img width="50" height="50" src="/uploads/86030698019f713335dd922809fe41be.jpg" class="attachment-50 size-50 wp-post-image" alt="Как конвертировать Word в PDF подручным софтом" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-07 06:42:42</div> <div class="papers__name"> <a href="/office/konvertirovat-fail-v-pdf-onlain-kak-konvertirovat-word-v-pdf-podruchnym-softom/">Как конвертировать Word в PDF подручным софтом</a> </div> </div> </div> </div> </div> </div> </div> <div class="rate clearfix"> <div class="papers__title">В продолжение темы:</div> </div> <div class="rate clearfix"> <div class="rate__img"> <a href="/photoshop/kak-sdelat-fon-belym-v-paint-kak-sdelat-prozrachnyi-fon-v-paint-prostoi-sposob/"> <img width="150" height="150" src="/uploads/68c2e486dac1158af504831969cbd27d.jpg" class="attachment-alm-thumbnail size-alm-thumbnail wp-post-image" alt="Как сделать прозрачный фон в Paint?" sizes="(max-width: 150px) 100vw, 150px" / loading=lazy> </a> </div> <div class="rate__ovh"> <div class="rate__label"> <span>Фотошоп</span> </div> <div class="rate__name"> <a href="/photoshop/kak-sdelat-fon-belym-v-paint-kak-sdelat-prozrachnyi-fon-v-paint-prostoi-sposob/">Как сделать прозрачный фон в Paint?</a> </div> <div class="rate__description"> <p>Чаще всего прозрачный фон требуется, чтобы наложить одну часть изображения на другую или на саму иллюстрацию. Бесцветный задний план активно применяется при конструировании... </p> </div> </div> </div> <!-- /next_post --> </div> <div class="button-menu"></div> <div class="page__right"> <div class="menu"> <div class="menu__exit">×</div> <ul> <li><a href="/category/windows/" class="link-catalog">Windows</a> </li> <li><a href="/category/computer/" class="link-catalog">Компьютер</a> </li> <li><a href="/category/programs/" class="link-catalog">Программы</a> </li> <li><a href="/category/photoshop/" class="link-catalog">Фотошоп</a> </li> <li><a href="/category/graphics/" class="link-catalog">Графика</a> </li> <li><a href="/category/internet/" class="link-catalog">Интернет</a> </li> <li><a href="/category/games/" class="link-catalog">Игры</a> </li> <li><a href="/category/components/" class="link-catalog">Компоненты</a> </li> </ul> </div> <div class="page__hidden-mobile"> <div class="papers"> <div class="papers__tabs"> <div class="active" data-eq="0">Новые статьи</div> <span>/</span> <div data-eq="1">Популярные</div> </div> <div class="papers__blocks"> <div class="papers__block active"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"> <a href="/games/samoe-bolshoe-oblako-dlya-hraneniya-failov-kakoe-oblachnoe-hranilishche/"> <img width="50" height="50" src="/uploads/e28eb22ecb1668a73a4404ba7468fa84.jpg" class="attachment-50 size-50 wp-post-image" alt="Какое облачное хранилище выбрать?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-05 06:27:11</div> <div class="papers__name"> <a href="/games/samoe-bolshoe-oblako-dlya-hraneniya-failov-kakoe-oblachnoe-hranilishche/">Какое облачное хранилище выбрать?</a> </div> <div class="papers__category"> <a href="/category/games/">Игры</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/photoshop/kak-samostoyatelno-sobrat-kompyuter-iz-komplektuyushchih-kak-samomu-sobrat/"> <img width="50" height="50" src="/uploads/e7cca407fefef6de8805315305b75b2e.jpg" class="attachment-50 size-50 wp-post-image" alt="Как самому собрать компьютер своей мечты из комплектующих Из чего собрать системный блок" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-03 06:34:59</div> <div class="papers__name"> <a href="/photoshop/kak-samostoyatelno-sobrat-kompyuter-iz-komplektuyushchih-kak-samomu-sobrat/">Как самому собрать компьютер своей мечты из комплектующих Из чего собрать системный блок</a> </div> <div class="papers__category"> <a href="/category/photoshop/">Фотошоп</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/components/gtx-560-ti-razmery-ohotnik-v-titanovyh-dospehah-obzor-geforce-gtx560-ti/"> <img width="50" height="50" src="/uploads/58cd2614fc2a364db1915a03b07094d3.jpg" class="attachment-50 size-50 wp-post-image" alt="Охотник в титановых доспехах" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-02 06:26:56</div> <div class="papers__name"> <a href="/components/gtx-560-ti-razmery-ohotnik-v-titanovyh-dospehah-obzor-geforce-gtx560-ti/">Охотник в титановых доспехах</a> </div> <div class="papers__category"> <a href="/category/components/">Компоненты</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/mobile/karta-pokrytiya-3g-vodafone-sravnenie-vodafone-red-ukraina-i-vodafone-smart/"> <img width="50" height="50" src="/uploads/2ac6e459bf1f972f2add119e6a7b3afe.jpg" class="attachment-50 size-50 wp-post-image" alt="Сравнение Vodafone «Red» Украина и Vodafone «Smart Passport» Италия" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-09-01 06:27:01</div> <div class="papers__name"> <a href="/mobile/karta-pokrytiya-3g-vodafone-sravnenie-vodafone-red-ukraina-i-vodafone-smart/">Сравнение Vodafone «Red» Украина и Vodafone «Smart Passport» Италия</a> </div> <div class="papers__category"> <a href="/category/mobile/">Мобильное</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/components/ne-rabotaet-kamera-na-androide-ne-rabotaet-kamera-na/"> <img width="50" height="50" src="/uploads/1d5c53bb305c7a48a5a55e306aeb3120.jpg" class="attachment-50 size-50 wp-post-image" alt="Не работает камера на телефоне: что делать?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-08-30 06:35:14</div> <div class="papers__name"> <a href="/components/ne-rabotaet-kamera-na-androide-ne-rabotaet-kamera-na/">Не работает камера на телефоне: что делать?</a> </div> <div class="papers__category"> <a href="/category/components/">Компоненты</a> </div> </div> </div> <div class="papers__item"> <div class="papers__img"> <a href="/components/programma-dlya-testirovaniya-hdd-na-bitye-sektora-chem-proverit-zhestkii/"> <img width="50" height="50" src="/uploads/dbccffe996ea88caf2d5728ffd12f088.jpg" class="attachment-50 size-50 wp-post-image" alt="Чем проверить жесткий диск на битые сектора" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a> </div> <div class="papers__ovh"> <div class="papers__date">2024-08-29 06:41:10</div> <div class="papers__name"> <a href="/components/programma-dlya-testirovaniya-hdd-na-bitye-sektora-chem-proverit-zhestkii/">Чем проверить жесткий диск на битые сектора</a> </div> <div class="papers__category"> <a href="/category/components/">Компоненты</a> </div> </div> </div> </div> </div> <div class="papers__block"> <div class="papers__items"> <div class="papers__item"> <div class="papers__img"><a href="/mobile/chto-takoe-mp3-chto-takoe-format-mp3-mp3---chto-takoe-i-kak-rabotaet/"> <img width="50" height="50" src="/uploads/e1ebc0081446965349a2edef6d822360.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Что такое мп3. Что такое формат MP3? MP3 - что такое и как работает" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="/mobile/chto-takoe-mp3-chto-takoe-format-mp3-mp3---chto-takoe-i-kak-rabotaet/">Что такое мп3. Что такое формат MP3? MP3 - что такое и как работает</a> </div> <div class="papers__category"><a href="/category/mobile/" rel="tag">Мобильное</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="/graphics/apgreid-noutbuka-chto-modernizaciya-noutbuka-dorabatyvaem-mobilnyi/"> <img width="50" height="50" src="/uploads/fccf5c5c993815f8bbfdcb981708cb0a.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Модернизация ноутбука: дорабатываем мобильный компьютер под свои нужды" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="/graphics/apgreid-noutbuka-chto-modernizaciya-noutbuka-dorabatyvaem-mobilnyi/">Модернизация ноутбука: дорабатываем мобильный компьютер под свои нужды</a> </div> <div class="papers__category"><a href="/category/graphics/" rel="tag">Графика</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="/history/na-kakoi-klaviature-bystree-pechatat-slepaya-pechat-besplatnye/"> <img width="50" height="50" src="/uploads/c91bd7ed878ebcdf8136715a1936f227.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Слепая печать: бесплатные клавиатурные тренажеры онлайн" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="/history/na-kakoi-klaviature-bystree-pechatat-slepaya-pechat-besplatnye/">Слепая печать: бесплатные клавиатурные тренажеры онлайн</a> </div> <div class="papers__category"><a href="/category/history/" rel="tag">История</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="/office/megafon-login-ne-vklyuchaetsya-chto-delat-esli-ne-vklyuchaetsya-telefon/"> <img width="50" height="50" src="/uploads/3849f69ddf13812b6460b4832584c504.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Что делать если не включается телефон, смартфон или планшет?" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="/office/megafon-login-ne-vklyuchaetsya-chto-delat-esli-ne-vklyuchaetsya-telefon/">Что делать если не включается телефон, смартфон или планшет?</a> </div> <div class="papers__category"><a href="/category/office/" rel="tag">Office</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="/office/cikly-s-usloviem-v-kumire-ispolnitel-robot-cikly-cikl-s-postusloviem-kumir/"> <img width="50" height="50" src="/uploads/9afb9602096107647df740e4da225040.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Циклы с условием в кумире" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="/office/cikly-s-usloviem-v-kumire-ispolnitel-robot-cikly-cikl-s-postusloviem-kumir/">Циклы с условием в кумире</a> </div> <div class="papers__category"><a href="/category/office/" rel="tag">Office</a></div> </div> </div> <div class="papers__item"> <div class="papers__img"><a href="/graphics/svyaz-login-form-html-sozdanie-formy-v-html-podklyuchenie-k-baze-dannyh/"> <img width="50" height="50" src="/uploads/a1bb4e90dd1a1c986d601a564e2ed141.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Связь login form html. Создание формы в HTML. Подключение к Базе Данных" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy> </a></div> <div class="papers__ovh"> <div class="papers__name"> <a href="/graphics/svyaz-login-form-html-sozdanie-formy-v-html-podklyuchenie-k-baze-dannyh/">Связь login form html. Создание формы в HTML. Подключение к Базе Данных</a> </div> <div class="papers__category"><a href="/category/graphics/" rel="tag">Графика</a></div> </div> </div> </div> </div> </div> </div> <div class="comments"> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="footer__top"> <div class="cnt"> <div class="footer__nav"> <ul> <li><a href="/feedback/">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> <div class="footer__counter"> </div> <div class="footer__logo1" align="right"> <img style="max-height:60px;" src="/public/logo.svg?1" alt="" loading=lazy> </div> </div> </div> <div class="footer__bottom"> <div class="cnt"> <div class="footer__copyright"> © bonabuy.ru 2024 г. Компьютер. Игры. Программы. Интернет. История </div> </div> </div> </div> <a href="#top" class="up"></a> </div> <script src="https://bonabuy.ru/wp-content/themes/tehnika-expert/js/jquery-1.12.0.js"></script> <script src="https://bonabuy.ru/wp-content/themes/tehnika-expert/js/owl.carousel.min.js"></script> <script src="https://bonabuy.ru/wp-content/themes/tehnika-expert/js/mousewheel.js"></script> <script src="https://bonabuy.ru/wp-content/themes/tehnika-expert/js/jscrollpane.min.js"></script> <script src="https://bonabuy.ru/wp-content/themes/tehnika-expert/js/scripts.js?v=8"></script> <!--[if lt IE 10]> <script src="https://bonabuy.ru/wp-content/themes/tehnika-expert/js/placeholder.js"></script> <![endif]--> <script type='text/javascript' src='https://bonabuy.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://bonabuy.ru/wp-content/plugins/wp-ajaxify-comments/js/wp-ajaxify-comments.min.js?ver=1.5.0'></script> <script type='text/javascript' src='https://bonabuy.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.8'></script> <script type='text/javascript' src='https://bonabuy.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='https://bonabuy.ru/wp-content/plugins/wp_testme/js/testme.js?ver=1.1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 112, "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" : ['cb_widget-2'] } ; </script> <script type='text/javascript' src='https://bonabuy.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> </body> </html>