HTML-формы. HTML Формы

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> <p><b>HTML разметка </b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> </p><p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <p>Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.</p> <h2>WordPress Login Customizer </h2> <p>Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress. </p><h2>Creative Login Form </h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-381859-740x576.jpg' width="100%" loading=lazy></p> <p>Простая, но креативная форма входа, созданная с помощью HTML и CSS3. Ее также можно использовать и как форму регистрации. Это наш любимый шаблон из представленных в этом списке.</p> <p>Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.</p> <h2>Форма авторизации №1</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-381954-740x576.jpg' width="100%" loading=lazy></p><p>Простая, креативная и яркая форма входа с градиентным фоном. Вы можете использовать ее для любых целей, таких как авторизация в веб-сервисе, мобильном или десктопном приложении. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №2</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382310-740x576.jpg' width="100%" loading=lazy></p><p>Минималистичная и изысканная форма входа с кнопкой, градиентной заливкой, а также с анимацией и логотипом. Используйте ее, изменив необходимые элементы. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №3</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382397-740x576.jpg' width="100%" loading=lazy></p><p>Страница входа с фоновым изображением, тенью и эффектом наведения для кнопки входа в систему. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №4</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382542-740x576.jpg' width="100%" loading=lazy></p><p>Вы можете скачать эту веб-форму и использовать по своему усмотрению. Она является полностью адаптивной. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №5</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382632-740x576.jpg' width="100%" loading=lazy></p><p>Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №6</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382732-740x576.jpg' width="100%" loading=lazy></p> <p>Если веб-страница аккуратная и красивая, форма входа не должна отличаться от ее дизайна. Вот форма, которая точно оправдает ваши ожидания.</p> <p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №7</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382814-740x576.jpg' width="100%" loading=lazy></p><p>Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №8</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382889-740x576.jpg' width="100%" loading=lazy></p><p>Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №9</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-382967-740x576.jpg' width="100%" loading=lazy></p><p>Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №10</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383042-740x576.jpg' width="100%" loading=lazy></p><p>Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №11</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383129-740x576.jpg' width="100%" loading=lazy></p><p>Вместо того чтобы создавать форму с нуля, вы можете использовать готовый к использованию великолепный шаблон — такой как этот. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №12</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383241-740x576.jpg' width="100%" loading=lazy></p><p>Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №13</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383321-740x576.jpg' width="100%" loading=lazy></p><p>Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №14</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383394-740x576.jpg' width="100%" loading=lazy></p><p>В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №15</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383506-740x576.jpg' width="100%" loading=lazy></p><p>Довольно минималистичная форма, но в ее верхней части можно добавить баннер. Благодаря этой небольшой опции можно сделать форму более привлекательной. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №16</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383583-740x576.jpg' width="100%" loading=lazy></p><p>Это форма входа с полноэкранным изображением, поверх которого размещаются поля для ввода логина и пароля, а также кнопка с эффектом наведения. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №17</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383660-740x576.jpg' width="100%" loading=lazy></p><p>Чтобы сделать форму более персонализированной, можно использовать этот шаблон. Он включает в себя изображение, расположенное сбоку. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №18</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383727-740x576.jpg' width="100%" loading=lazy></p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №19</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383796-740x576.jpg' width="100%" loading=lazy></p><p>Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №20</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383865-740x576.jpg' width="100%" loading=lazy></p><p>Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Выпадающая форма авторизации</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383985-740x576.jpg' width="100%" loading=lazy></p><p>Скачать </p> <h2>Floating Sign Up Form</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384046-740x576.jpg' width="100%" loading=lazy></p><p>Разработано для форм подписки с использованием вкладок и меток. </p><p>Скачать </p> <h2>Простая форма авторизации</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384103-740x576.jpg' width="100%" loading=lazy></p><p>Что раньше останавливало людей, когда они хотели авторизоваться на WordPress -сайте так это слишком простой внешний вид. В этой форме сохранен популярный дизайн, но к нему добавлено цветовое оформление. </p><p>Скачать </p> <h2>Flat Login – Sign Up Form</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384165-740x576.jpg' width="100%" loading=lazy></p><p>Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации. </p><p>Скачать </p> <h2>Login With Self-Contained SCSS Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384224-740x576.jpg' width="100%" loading=lazy></p><p>Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое. </p><p>Скачать </p> <h2>Animated Login Form</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384300-740x576.jpg' width="100%" loading=lazy></p><p>Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки. </p><p>Скачать </p> <h2>Login Form Using CSS3 And HTML5</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384367-740x576.jpg' width="100%" loading=lazy></p><p>Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и:before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных. </p><p>Скачать </p> <h2>Login With Shake Effect</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384437-740x576.jpg' width="100%" loading=lazy></p><p>Если вы ввели неправильный пароль, то будете уведомлены об этом с помощью красивого эффекта дрожания. Простое и эффективное решение. </p><p>Скачать </p> <h2>Boxy Login Form</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384496-740x576.jpg' width="100%" loading=lazy></p><p>Скачать </p> <h2>Animated Login Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384564-740x576.jpg' width="100%" loading=lazy></p><p>Аккуратная небольшая форма входа.Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации. </p><p>Скачать </p> <h2>Material Design Form</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384627-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Bootstrap Snippet Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384681-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Login With Flat UI</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384736-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Trendy UI Kits Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384807-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Dashboard CSS3 HTML5 Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384870-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Login With Recovery Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384926-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Flat Login Form</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384990-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Transparent Login</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-385053-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Login With Google Chrome Extension</h2> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-385108-740x576.jpg' width="100%" loading=lazy></p>Скачать <h2>Elegant Flat Form</h2> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-385166-740x576.jpg' width="100%" loading=lazy></p> <p>Скачать </p> <h2>Stylized Login Form</h2> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-385226-740x576.jpg' width="100%" loading=lazy></p>Скачать <p>Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.</p> <p>Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.</p> <p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Логин</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Пароль</label></td> <td><input id="passwordField" type="text" name="password"></td> </tr> </table> </form> </p><p>Результат в браузере:<br></p> <p>Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута <b>type </b> на <b>password </b>:</p><p> <input id="passwordField" type="password" name="password"> </p><p>Результат:<br><img src='https://i1.wp.com/webshake.ru/uploads/img/fcc1b0948d956a9c687641df8bd80f2c2d6612c088edb674e53bf2b22b502684.png' height="57" width="240" loading=lazy></p> <h2>Кнопка отправки формы</h2> <p>Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега <b><input> </b> с типом <b>submit </b>.</p> <p>Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут <b>value </b>. Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.</p> <p> <input type="submit" value="Войти"> </p><p>Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.</p> <p>В итоге код нашей формы получится следующим:</p><p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Логин</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Пароль</label></td> <td><input id="passwordField" type="password" name="password"></td> </tr> <tr> <td colspan="2" style="text-align: center"><input type="submit" value="Войти"></td> </tr> </table> </form> </p><p>Результат в браузере:<br><img src='https://i1.wp.com/webshake.ru/uploads/img/eb03f584a26e6ec91e1be78ab7c996db8d84a9c6d56e52926ca73271189646dd.png' height="82" width="241" loading=lazy></p> <p>Online Signup and registration forms, are important aspects of almost every web design. If your website needs active contribution from the visitors, then you should have provisions so that they can register or signup to open an account with your site. Users register with a site to download files or post articles, to purchase something & son depending on the theme of a site. The registration forms, are pretty elaborate, asking for a wide range of personal and contact details from the users- like age, name, gender, job, brief biography and so on. But the most important aspect of all HTML5 Signup & Registration Forms are name, username, password, gender and account creation button.</p><h2>XtraForm – Bootstrap 3 Xtra Animated Form HTML5 Format</h2> <p>This bootstrap registration form template is coded based on jQuery mobile JavaScript which makes it compatible across many platforms and also make it very customizable. The html5 form template is available for free download here.</p> <h2>Multi-Step Signup Form With CSS3 and jQuery</h2> <p><img src='https://i1.wp.com/images.template.net/wp-content/uploads/2016/03/13080636/Multi-Step-Signup-Form-With-CSS3-and-jQuery11.jpg' width="100%" loading=lazy></p> <p>This kind of registration form in html with CSS3 helps in sectioning of various parts of a long sign up form, thus making it easy to maintain records whereas jQuery ensures that these forms can work on a wide number of platforms. Download the sign up page template from here to build a form for your own site today.</p> <h2>Authentix – Ready to Integrate User System HTML Format</h2> <p><img src='https://i0.wp.com/images.template.net/wp-content/uploads/2016/03/29091712/Authentix-Ready-to-Integrate-User-System-HTML-Format1.jpg' width="100%" loading=lazy></p> <p>This kind of html5 form template is created by simple PHP script for signing up, logging in or authenticating users. This kind of login and registration form templates can also provide the feature of secure sessions. Download one from here to implement one of these in your own site.</p> <p><img src='https://i2.wp.com/images.template.net/wp-content/uploads/2016/03/13080916/Login-and-Signup-Kit-For-Android-in-HTML-File-Down.jpg' width="100%" loading=lazy></p> <p>This kind of registration form template uses CSS for registration form and is very helpful in creating sign up forms meant for the android platform. This kind of html registration form template is available for download below.</p> <h2>Codepen Sign Up Form in HTML Format Download</h2> <p><img src='https://i0.wp.com/images.template.net/wp-content/uploads/2016/03/13081007/Codepen-Sign-Up-Form-in-HTML-Format-Download11.jpg' width="100%" loading=lazy></p> <p>With its revamped fresh design and very simple interface, this kind of html5 form templates have been carefully optimized for creating new user registration forms. With its utility in various fields, these signup form templates are really handy and can be downloaded right from the link below.</p> <h2>Formplexy – CSS Forms with Validation & WP Support HTML Format</h2> <p><img src='https://i2.wp.com/images.template.net/wp-content/uploads/2016/03/13081110/Formplexy-CSS-Forms-with-Validation-WP-Support-HTM.jpg' height="597" width="585" loading=lazy></p> <p>This kind of html registration form is very neat and customizable for any developer. It is extremely fast due to CSS form with jQuery. It also has WordPress support, social buttons and an option of forgotten password handling. Download the form from here to use it in your own site.</p> <h2>Download Login & Registration Form with HTML5</h2> <p><img src='https://i2.wp.com/images.template.net/wp-content/uploads/2016/03/13081155/Download-Login-Registration-Form-with-HTML51111.jpg' height="687" width="585" loading=lazy></p> <p>This kind of registration form template is used for login and signup due to the fact that it is very simple and uses very simple coding. This kind of html5 form templates find a wide number of uses due to their light structure and can be downloaded right from here.</p> <h2>Tab Login & Sign Up Forms HTML Download</h2> <p><img src='https://i1.wp.com/images.template.net/wp-content/uploads/2016/03/13081251/Tab-Login-Sign-Up-Forms-HTML-Download21.jpg' width="100%" loading=lazy></p> <p>This kind of signup form templates are widely used due to their tab oriented look which is very helpful in categorizing thing. This type of html5 form templates can be downloaded here to be used for long sign up forms with many fields for taking information.</p> <h2>Signup Form Flat Template Download</h2> <p><img src='https://i1.wp.com/images.template.net/wp-content/uploads/2016/03/13081344/Signup-Form-Flat-Template11.jpg' width="100%" loading=lazy></p> <p>With its minimalistic look , this kind of registration form template is widely used due to their simple and clean look and due to the fact that this kind of html5 signup template can work on many platforms. You can get one of these forms here for download.</p> <h2>Flat Look HTML5 & CSS3 Signup Form Template Free Download</h2> <p><img src='https://i1.wp.com/images.template.net/wp-content/uploads/2015/07/13081438/Flat-Look-HTML5-CSS3-Signup-Form-Template-Free-Dow.jpg' width="100%" loading=lazy></p> <p>Equipped with the simplicity and cleanliness of an html5 coding coupled up with the security of a CSS3 signup security with jQuery, this kind of signup form template is one of the best options you can find for your site. Want to know how will it look for your site? Just quickly download it from the link below to check it out.</p> <h3>How to Create Registration Page?</h3> <p>A registration page on a website consists of registration form that lets website users to get registered with the website and get access to applicable facilities, services or products. A registration page is considered to be the most important aspect of a website as it gives you a way to be more interactive with your users. For creating a registration page, first you just need to add a new page through your CMS and then add the and registration form to it. You can find a large number of registration form templates online for easy and quick installation on to your page.</p><h2>Awesome Design HTML5 and CSS3 Login & Sign Up Forms</h2> <p><img src='https://i1.wp.com/images.template.net/wp-content/uploads/2015/07/13081528/Awesome-Design-HTML5-and-CSS3-Login-Sign-Up-Forms1.jpg' width="100%" loading=lazy></p> <p>This HTML5 and CSS3 login and signup form comes with an awesome design with perfectly sectioned fields. The form is handy and easy to install. Just download the form and you can customize it as per your preferences.</p> <h2>Simple, Highly Functional and Effective HTML5 Register Form</h2> <p><img src='https://i1.wp.com/images.template.net/wp-content/uploads/2015/07/13081658/Simple-Highly-Functional-and-Effective-HTML5-Regis.jpg' width="100%" loading=lazy></p> <p>HTML5 based registration form ideal for all kinds of website like college, medical, shopping, school and even more. Comes with an optimized design to provide best call to action to a website user.Registration and Login form templates online that you can hardly create yourself. The best part with these templates is that along with their standard use, you can customize the fields, size as well as color of the form elements quite easily in minutes. Whether you need a student registration form, ecommerce registration form, event registration form or more, you can find template forms for all kinds of your sign-up form needs. There are numerous such registration and login templates that offer you a secure, effortless and elegant forms to be added to your websites. You just need to get these downloaded in a few clicks and do minor customizations is necessary.</p> <p>Login forms are everywhere on the web. Are you using the social networks? You must go through login form of some sort. Do you have an email? Did you join any forums? Did you try to leave a comment on a WordPress site? To gain access to anything on the internet, the chances are you will have to go through some sort of login process. You will probably have to register first, sign up or leave some information behind. You will have to use some sort of login form to do anything on the internet.</p><p>So what do Login Forms have to do with HTML and CSS? They are both the essential parts of the Login Forms.</p><p>HTML (HyperText Markup Language) is a standard markup language used to create web pages. HTML elements are building blocks of all websites.</p><p>CSS (Cascading Style Sheet) is a language used for describing the look and formatting of a document written in a markup language. Such as HTML!</p><p>We use HTML to build a website and CSS to make it look nice. That is what most of the users encounter while browsing the web.</p><p>We’ve made a list of 50 free login forms that you can use on your WordPress site, blog, forum or anywhere else. This is a hand-picked list by Colorlib to ensure the highest quality of the forms. Each and every form has been thoroughly tested to ensure no components are missing and source code is available with every download. Of course, you are free to use these forms for personal and commercial purposes, with no need for attribution.</p><p>Explore 2.5 Million Digital Assets including 2019’s Best WordPress Templates</p><p>2M+ items from the world’s largest marketplace for HTML5 Templates, Themes & Design Assets. Whether that’s what you need, or you’re just after a few Stock Photos – all of it can be found here at Envato Market.<br><br> DOWNLOAD NOW </p><h2>WordPress Login Customizer</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/colorlib-logo-customizer.jpg' align="center" width="100%" loading=lazy> The rest of the list and HTML/CSS powered login forms but here you can see the best login customizer plugin for WordPress. It comes with several defined templates that you can further tweak to match the design of your website. Thats to this plugin you can finally get rid of boring WordPress wp-admin page and create a truly unique experience for yourself and your users.</p> Download <h2>Creative Login Form</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/creative-html5-and-css3-login-form.jpg' width="100%" loading=lazy></p><p>Simple yet creative login form created using HTML5 and CSS3. This form can be used as registration form as well. This is our favorite template on this list thanks to its flexibility and similarity that allows you to create</p> <p>We did search the internet for cool login forms but it was very difficult to find good looking ones therefore we decided to have our take on them. We would like to present 20 login forms designed and developer by Colorlib team.</p><h2>Login Form 1 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v1.jpg' width="100%" loading=lazy><br> Simple, creative and vibrant login form with a gradient background. You can use this one for all sorts of intentions, like web, mobile or desktop applications. But do get creative with it if you like.</p> <h2>Login Form 2 by Colorlib</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v2.jpg' width="100%" loading=lazy><br> Minimal and sophisticated login form by Colorlib with a gradient button with animation and a logo. Use it, alter it and have it as a nice addition to your already nifty web space.</p> <h2>Login Form 3 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v3.jpg' width="100%" loading=lazy><br> A gorgeous login page with a background image with shadow and a gradient form box with login button hover effect. The only limitation that you have is your imagination, so expand your view and use Login Form 3 to its full potential.</p> <h2>Login Form 4 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v4.jpg' width="100%" loading=lazy><br> Creativity knows no limits and nor does Login Form 4. Here it is, at your disposal, ready and set for you to download it and put it to some good use. Do not worry about the responsiveness either.</p> <h2>Login Form 5 by Colorlib</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v5.jpg' width="100%" loading=lazy><br> Gorgeous, clean and modern form with an option to log in with Facebook or Google. All buttons have a nice hove effect that spices up the experience.</p> <h2>Login Form 6 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v6.jpg' width="100%" loading=lazy><br> If your page is already super neat and tidy, a login form should be no different. Here is one that will easily meet your expectations if minimalism is your cup of tea.</p> <h2>Login Form 7 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v7.jpg' width="100%" loading=lazy><br> A form with a three-way option of logging into the account. Either it is Facebook, Twitter or email login they prefer, this is the type of a tool that you need to feature on your page. And if they do not already have an account, you can also link it with your sign up page.</p> <h2>Login Form 8 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v8.jpg' width="100%" loading=lazy><br> Another contemporary, trendy and enticing login form with rounded everything. This one is especially applicable to mobile users due to its currently very popular rounded corners style.</p> <h2>Login Form 9 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v9.jpg' width="100%" loading=lazy><br> If you would like to avoid the white or single-color background, this is the login form page that you should consider. Not only does it support a full image background, but it also comes with a gradient overlay and an option to log in with Facebook or Google.</p> <h2>Login Form 10 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v10.jpg' width="100%" loading=lazy><br> A somewhat complete opposite compared to the previous one is Login Form 10. It almost could not be more minimalistic looking while still having this up-to-the-minute feel to it.</p> <h2>Login Form 11 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v11.jpg' width="100%" loading=lazy><br> With our collection of the best HTML5 and CSS3 login forms, you save yourself time and effort (money, too). Instead of building one from scratch, here is another killer ready-to-use template for you to employ.</p> <h2>Login Form 12 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v12.jpg' width="100%" loading=lazy><br> Image background with a blue shadow overlay, name, image and the must-have form, that’s what’s up with Login Form 12. There is also a cool hover effect on the login button and gives you a chance to link it with your registration form for all new users.</p> <h2>Login Form 13 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v13.jpg' width="100%" loading=lazy><br> A split screen sign up form, where one half is dedicated to an image and the other half to the form. It is a free tool which you can start using this very moment. Just download the layout and go full tilt with it.</p> <h2>Login Form 14 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v14.jpg' width="100%" loading=lazy><br> In this collection, we have a mixture of simplistic and those a tad more complex and advanced login forms. In short, there is something for everyone and Login Form 14 is more on the minimalistic side. But why even complicate with a login form, right? To each their own.</p> <h2>Login Form 15 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v15.jpg' width="100%" loading=lazy><br> While still keeping things to the bare minimum, one cool addition to the Login Form 15 is the image banner just above the form. With this little feature, you can make the experience slightly more engaging.</p> <h2>Login Form 16 by Colorlib</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v16.jpg' width="100%" loading=lazy><br> This is a login form with a full-screen image on top of which is placed a form with username and password fields and a gradient button with hover effect. Simple and straightforward.</p> <h2>Login Form 17 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v17.jpg' width="100%" loading=lazy><br> To make it appear more personal, this framed login form template is the best fit for you. It has an image side and a form side but keeps things to the very minimum while still ensuring professionalism.</p> <h2>Login Form 18 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v18.jpg' width="100%" loading=lazy><br> If you like to differentiate yourself and keep things original, do consider using Login Form 18. While some enjoy login pages super basic, the others want to have some additional goodies rocking the layout. And if adding a picture is what you are after, this one is for you.</p> <h2>Login Form 19 by Colorlib</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v19.jpg' width="100%" loading=lazy><br> Vibrant, energetic and attention-grabbing, that is what this next login form based on HTML5 and CSS3 is all about. It is also fully responsive and mobile-ready, as well as compatible with all major web browsers.</p> <h2>Login Form 20 by Colorlib</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-v20.jpg' width="100%" loading=lazy><br> Gradient background, black sign in button with hover effect, username and password fields along with custom text and “Forgot password?” section, yep, that’s all part of Login Form 20. Sounds overwhelming but in reality, far from it.</p> <p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/dropdown-login-form.jpg' width="100%" loading=lazy></p><p>The form is hidden unless you click on “Login” option. Really great feature for modern websites that want to avoid having a separate page for the login form. You can display the form anywhere on your website with this powerful tool.</p> Download<p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/floating-sign-up-form.jpg' width="100%" loading=lazy></p><p>A design for a Sign Up form using tabs and floating form labels.</p> Download<p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/simple-login-form.jpg' width="100%" loading=lazy></p><p>What was initially made to stop people from entering one person’s WordPress site, it became a really popular form due to its simplicity and neat design.</p> Download <h2>Flat Login – Sign Up Form</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/floating-login-sign-up-form.jpg' width="100%" loading=lazy></p><p>Once you click “Click me” button in top-right corner, you will get smooth animation that transforms this Login form to Sign up form.</p> Download <h2>Login With Self-Contained SCSS Form</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-with-self-contained-scss-form.jpg' width="100%" loading=lazy></p><p>This is a form with self-contained SCSS. An extension of CSS that adds power and elegance to the basic language. It allows to use variables, nested rules, mixins, inline imports, and more.</p> Download<p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/animated-login-form.jpg' width="100%" loading=lazy></p><p>This is actually an animated Login form, with top “Hey you, Login already” transforming into the form at the bottom. Smooth animation effects.</p> Download<p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-using-css3-and-html5.jpg' width="100%" loading=lazy></p><p>This is an example on how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements (:after and:before) to create the multi page effect. These elements are rotated using the CSS3 transform property. This form uses HTML5 to make validation and submission easy.</p> Download<p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-with-shake-effect.jpg' width="100%" loading=lazy></p><p>Once you enter a wrong password in this form, a nice shake effect will warn you that you did not enter the correct password. A simple and effective solution that will point out the problem of incorrect passwords.</p> Download<p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/boxy-login-form.jpg' width="100%" loading=lazy></p><p>A boxy login form with a little surprise. Try “admin” as a username, and “1234” as a password, for full experience.</p> Download<p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/animated-login-form.jpg' width="100%" loading=lazy></p><p>Neat little login form. Once you click on “LOGIN” on the left side, animation effect creates neat little login form on the right. Definitely unique approach!</p> Download <h2>Material Design Form</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/material-design-login-form.jpg' width="100%" loading=lazy><br> Fairly simple and easy on the eye login form that you can add to your blog or any other website and spice up the experience. No need to overcomplicate with a simple thing as the login form is. Even if you are just collecting subscribers, you can also play around with this layout and get things rocking.</p> Download <h2>Bootstrap Snippet Form</h2><p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/bootstrap-snippet-login-form.jpg' width="100%" loading=lazy><br> Obviously, this next free HTML5 login form is based on the well-liked Bootstrap Framework. This tells you that you can expect some nice flexibility that any modern website and element must practice. Email address, password and a check box to tick if a user would like the platform to remember his or her information. Easy and to the point.</p> Download<p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-with-flat-ui.jpg' width="100%" loading=lazy><br> Regardless of your main web design, with things like login forms, you do not want to over complicate it. Instead, you would want to keep it simple and let it to the job, getting users to access their accounts seamlessly. You will achieve that goal with this login form with flat UI unquestionably.</p> Download <h2>Trendy UI Kits Form</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/trendy-ui-kits-login-form.jpg' width="100%" loading=lazy><br> From super simple login forms to those with slightly more action going on. This particular one is pretty similar compared to the last one just that you will notice a frame going all around the form. Get them to type in their names or usernames and passwords and they can enter your world of amazingness.</p> Download <h2>Dashboard CSS3 HTML5 Form</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/dashboard-css3-html5-login-form.jpg' width="100%" loading=lazy><br> All the HTML5 and CSS3 login forms you find on this list are simple to use and effortless to attach to your web platform. This one even has a “Forgot your password?” right at the bottom for everyone who just cannot recall their passwords. The template is perfect for entering your dashboard, but you can apply it for other needs, too.</p> Download <h2>Login With Recovery Form</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-form-with-recovery.jpg' width="100%" loading=lazy><br> The title pretty much says it all; this is a neat, clean and minimal looking login form with recovery. What you also notice is that there is no traditional “box” that you are used to seeing login forms use. If you would like to make a difference, you now know which layout to choose.</p> Download <p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/flat-login-form.jpg' width="100%" loading=lazy><br> A free flat login form with a stunning and elegant dark layout coupled with a green call-to-action button. Sure, you can alter the tool to your likings, but you can also employ it exactly as is and have it live on your website in a snap. Play around with its features and have it all set up the way you like it.</p> Download <h2>Transparent Login</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/transparent-login-form.jpg' width="100%" loading=lazy><br> Even a login form can be of super creative and attention-grabbing nature. While many stick to the simple and basic look, there are others who like it special and exclusive. This transparent login form will surely do the trick for you. With an image background and a form over it, this layout can follow your branding to a T.</p> Download<p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-with-google-chrome-extension.jpg' width="100%" loading=lazy><br> No need to be really going too in-depth with this next login since it is pretty self-explanatory. It is compatible with the Google Chrome extension, as well as features buttons for those who are not signed up yet or lost their password. If this is the one you were looking for, then scrolling all the way this far was more than worth it.</p> Download <h2>Elegant Flat Form</h2><p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/elegant-flat-login-form.jpg' width="100%" loading=lazy><br> A stylish flat form which you can append to your web space as a pop-up or ad as a widget on a page. Whatever the case, it will keep your professional approach intact. It is simple and easy on the eye and also has a CTA for everyone who missed signing up to your members’ area. Use it as is or improve it according to your taste.</p> Download<p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/stylized-login-form.jpg' width="100%" loading=lazy><br> Definitely an approach to a free login form that you should not miss. It has a feel of a coupon just that it is not if that even makes any sense. Anyhow, in the text section, you can also link this form to the signup form for those interested in creating an account. Other than that, it surely will capture their attention.</p> Download<p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/login-with-social-integration.jpg' width="100%" loading=lazy><br> More and more website owners are implementing social logins and you can join the trend as well. This free login form with social integration is the right option to take the plunge. However, along with Twitter, Facebook and Google+ buttons, the layout also features the traditional way of signing up with an email.</p> Download<p><img src='https://i2.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/show-and-hide-password-form-example.jpg' width="100%" loading=lazy><br> If your password is super complex, you sometimes just want to enter it in a “show” mode. Offer this same feature to all your users with the show and hide password login form. It has a stunning dark layout with green details perfect for those who dig this type of designs. Of course, feel free to make changes to it and fine-tune it according to your needs.</p> Download <h2>Log ‘N Load Animated Form</h2><p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/log-n-load-animated-login-form.jpg' width="100%" loading=lazy><br> If you already practice animations and special effects on your page, keep the trend with the login form, too. Instead of creating your own one, you can simply use this striking Log ‘N Load animated form that will do the trick. Once you hover over the login button, the form reveals right in front of you. It even has a circular loading that enhances the experience.</p> Download<p><img src='https://i0.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/flat-modern-login-form.jpg' width="100%" loading=lazy><br> This flat, modern and easy to use login form works great on all devices, mobile, tablet and desktop. You can also play around with different tweaks and alter the default settings to your website’s style precisely. The tool also has cool hover effects that add a touch of sophistication to the overall experience.</p> Download<p><img src='https://i1.wp.com/colorlib.com/wp/wp-content/uploads/sites/2/my-login-form.jpg' width="100%" loading=lazy><br> A free HTML5 and CSS3 login form with a bright layout that will get your login section sorted out in full. Add this widget to your page, activate it and let all your users and members enter their accounts. Warm colors, “remember me” section and a title along with email and password fields, that’s all you need.</p> <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class="post-bottom"> <div class="post-share"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir" data-counter=""></div> </div> </div> <div style="text-align: center; margin-top: 15px; margin-bottom: 25px; " id="vanna-1561572409"><div style="display:inline-block; padding-top: 10px; padding-bottom: 10px; font-size: 14px !important;"> <script type="text/javascript"> //<![CDATA[ yandex_partner_id = 186233; yandex_site_bg_color = 'FFFFFF'; yandex_stat_id = 31; yandex_ad_format = 'direct'; yandex_font_size = 1.2; yandex_font_family = 'arial'; yandex_direct_type = 'grid'; yandex_direct_border_type = 'ad'; yandex_direct_limit = 4; yandex_direct_title_font_size = 3; yandex_direct_border_radius = true; yandex_direct_links_underline = false; yandex_direct_header_bg_color = 'E6E6E6'; yandex_direct_bg_color = 'FBFFFF'; yandex_direct_border_color = 'D8D8D8'; yandex_direct_title_color = '1497C3'; yandex_direct_url_color = '52556F'; yandex_direct_text_color = '000000'; yandex_direct_hover_color = '666600'; yandex_direct_favicon = false; yandex_no_sitelinks = true; document.write('<scr'+'ipt type="text/javascript" src="//an.yandex.ru/system/context.js"></scr'+'ipt>'); //]]> </script> </div></div> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Не нашли ответ на свой вопрос? Посмотрите здесь</div> <div class="items"> <div class="related-item"> <a class="related-item__title" href="/services/stoit-li-obnovlyat-brauzery-obnovlyaem-brauzery-na-raznyh-ustroistvah-kompyuter-planshet-smartfon.html"><img src="/uploads/a697c55df0aa214e57cd897ebe05524c.jpg" width="120" height="120" alt="Обновляем браузеры на разных устройствах: компьютер, планшет, смартфон" class="related-item__image" / loading=lazy>Обновляем браузеры на разных устройствах: компьютер, планшет, смартфон</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="/rates/mp3-pleer-samsung-yp-p3-sensornyi-displei-dlya-top-modeli-mp3-pleer-samsung-yp-p3.html"><img src="/uploads/35df48a0fe40f4c5c3b830edb1fb6e6a.jpg" width="120" height="120" alt="MP3-плеер Samsung YP-P3: сенсорный дисплей для топ-модели Игры на плеер samsung yp p3" class="related-item__image" / loading=lazy>MP3-плеер Samsung YP-P3: сенсорный дисплей для топ-модели Игры на плеер samsung yp p3</a> <div class="related-item__comments"><span></span></div> </div> <div class="related-item"> <a class="related-item__title" href="/sim-card/chto-takoi-kosnites-zdes-peredach-failov-superbeam-moshchnyi-instrument-dlya.html"><img src="/uploads/0e82091c4d28430dd77b6468640e7c46.jpg" width="120" height="120" alt="SuperBeam — мощный инструмент для передачи файлов по Wi-Fi без интернета" class="related-item__image" / loading=lazy>SuperBeam — мощный инструмент для передачи файлов по Wi-Fi без интернета</a> <div class="related-item__comments"><span></span></div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 15px; margin-bottom: 15px; " id="vanna-1965575812"><div class="adsense"><script type="text/javascript">ga_1();</script></div></div> </main> <aside class="sidebar"> <div class="advices" data-theme="vannapedia_v.3"> <div class="headline"></div> <div class="advices-content"> <img src="/uploads/93f41ae2d5cd6d125e60ef81c85c4da3.jpg" width="120" height="120" alt="Electrum – биткоин кошелек Электрум" class="advices__image" / loading=lazy> <div class="advices__title" data-id="3334"><a href="/transfers-and-payments/electrum-bitkoin-koshelek-elektrum-obzor-sozdanie-nastroika-koshelek.html">Electrum – биткоин кошелек Электрум</a></div> </div> </div> <div class="vk-widget" id="text-3"> <div class="textwidget"><script type="text/javascript" src="//vk.com/js/api/openapi.js?130"></script> <div id="vk_groups"></div> </div> </div> <div class="sidebar-questions"> <div class="headline">Новое</div> <ul> <li><a href="/frequently-asked-questions/kak-pereimenovat-gruppu-failov-v-windows-10-kak-izmenit-rasshireniya-vseh.html" >Как изменить расширения всех файлов сразу</a></li> <li><a href="/frequently-asked-questions/vosstanovlenie-internet-explorer-kak-vosstanovit-internet-eksplorer-posle.html" >Как восстановить интернет эксплорер после выключения или удаления Как восстановить internet explorer без яндекса</a></li> <li><a href="/services/kak-uznat-apple-id-bez-slozhnostei-i-v-kratchaishee-vremya-uznaem.html" >Узнаем забытый Apple ID Чек айфон эппл айди</a></li> <li><a href="/rates/kak-sohranit-stranicu-v-vkladkah-kak-sohranit-otkrytye.html" >Как сохранить открытые вкладки в браузере Opera</a></li> <li><a href="/services/modem-tp-link-s-vai-fai-nastroika-proverennyi-sposob-bystro.html" >Проверенный способ быстро настроить роутер tp link – пошагово и на русском</a></li> <li><a href="/the-device/wi-fi-router-300-mbit-s-obzor-wi-fi-marshrutizatora-netgear-n300-opisanie-harakteristiki.html" >Обзор Wi-Fi маршрутизатора Netgear N300: описание, характеристики и отзывы владельцев</a></li> </ul> </div> <div class="section"> </div> <div class="section"> <div class="headline">Популярные статьи</div> <ul class="sidebar-posts"> <li><a href="/frequently-asked-questions/arhipelag-los-rokes-arhipelag-los-rokes-stoit-li-tuda.html"><img src="/uploads/4a54e66add1468c63b71439da1f2d57c.jpg" width="80" height="80" alt="Архипелаг Лос Рокес: стоит ли туда ехать?" / loading=lazy>Архипелаг Лос Рокес: стоит ли туда ехать?</a></li> <li><a href="/sim-card/ne-vidit-kompyutery-v-seti-posle-obeda-setevoe-okruzhenie-windows-propadayut.html"><img src="/uploads/ce1c1ee4195d672db243f7d0754299d6.jpg" width="80" height="80" alt="Сетевое окружение Windows" / loading=lazy>Сетевое окружение Windows</a></li> <li><a href="/transfers-and-payments/rukovodstvo-po-ekspluatacii-panasonic-air-conditioner-r410a-obzor-modelnogo.html"><img src="/uploads/b0e915358edebfd158fe03692dd4008e.jpg" width="80" height="80" alt="Обзор модельного ряда кондиционеров PANASONIC и инструкции к ним Кондиционер панасоник инструкция по эксплуатации пульта" / loading=lazy>Обзор модельного ряда кондиционеров PANASONIC и инструкции к ним Кондиционер панасоник инструкция по эксплуатации пульта</a></li> </ul> </div> <div class="section"> <div class="headline">Новое на сайте</div> <ul class="sidebar-posts sidebar-photo"> <li><a href="/transfers-and-payments/explay-n1-proshit-s-karty-pamyati-proshivka-explay-n1-planshet-chto.html">Прошивка Explay N1 (планшет)</a></li> <li><a href="/services/z1-obnovlyaetsya-obnovleniya-na-telefon-soni-nepravilno-obnovlyaem-sony-xperia.html">Обновления на телефон сони неправильно</a></li> <li><a href="/rates/servisnye-kody-dlya-samsung-gt-samsung-gt-e1200-sekretnye-kody-kody-dlya-telefona-samsung-gt.html">Samsung GT-E1200 Секретные коды Коды для телефона самсунг gt e1200m</a></li> <li><a href="/sim-card/v-istorii-microsoft-office-zavershilas-vazhnaya-stranica-chto-delat-s.html">Что делать с ошибкой «Прекращена работа программы Проводник Программа microsoft r html не работает</a></li> <li><a href="/sim-card/otklyuchaem-uslugu---antenna-akado-rastorzhenie-dogovora.html">Отключение антенны разных операторов Не работает антенна акадо</a></li> </ul> </div> </aside> </div> <footer class="footer"> <nav class="footer__nav"><ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1219"><a href="/">Новое</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527507"><a href="/services/stoit-li-obnovlyat-brauzery-obnovlyaem-brauzery-na-raznyh-ustroistvah-kompyuter-planshet-smartfon.html">Обновляем браузеры на разных устройствах: компьютер, планшет, смартфон</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527505"><a href="/rates/mp3-pleer-samsung-yp-p3-sensornyi-displei-dlya-top-modeli-mp3-pleer-samsung-yp-p3.html">MP3-плеер Samsung YP-P3: сенсорный дисплей для топ-модели Игры на плеер samsung yp p3</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527503"><a href="/sim-card/chto-takoi-kosnites-zdes-peredach-failov-superbeam-moshchnyi-instrument-dlya.html">SuperBeam — мощный инструмент для передачи файлов по Wi-Fi без интернета</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527501"><a href="/sim-card/samsung-ne-rabotaet-knopka-nazad-chto-delat-esli-ne-rabotayut.html">Что делать, если не работают физические клавиши управления?</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1230"><a href="/">Популярное</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527500"><a href="/the-device/imho-kak-xiaomi-obmanyvaet-nas-pochemu-takoi-kitaec-ne-nuzhen.html">почему такой китаец не нужен</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527498"><a href="/transfers-and-payments/electrum-bitkoin-koshelek-elektrum-obzor-sozdanie-nastroika-koshelek.html">Electrum – биткоин кошелек Электрум</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527497"><a href="/frequently-asked-questions/kak-pereimenovat-gruppu-failov-v-windows-10-kak-izmenit-rasshireniya-vseh.html">Как изменить расширения всех файлов сразу</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527496"><a href="/frequently-asked-questions/vosstanovlenie-internet-explorer-kak-vosstanovit-internet-eksplorer-posle.html">Как восстановить интернет эксплорер после выключения или удаления Как восстановить internet explorer без яндекса</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527493"><a href="/services/kak-uznat-apple-id-bez-slozhnostei-i-v-kratchaishee-vremya-uznaem.html">Узнаем забытый Apple ID Чек айфон эппл айди</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527492"><a href="/rates/kak-sohranit-stranicu-v-vkladkah-kak-sohranit-otkrytye.html">Как сохранить открытые вкладки в браузере Opera</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526294"><a href="/services/modem-tp-link-s-vai-fai-nastroika-proverennyi-sposob-bystro.html">Проверенный способ быстро настроить роутер tp link – пошагово и на русском</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526290"><a href="/the-device/wi-fi-router-300-mbit-s-obzor-wi-fi-marshrutizatora-netgear-n300-opisanie-harakteristiki.html">Обзор Wi-Fi маршрутизатора Netgear N300: описание, характеристики и отзывы владельцев</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1236"><a href="/">Рекомендуем</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526288"><a href="/frequently-asked-questions/arhipelag-los-rokes-arhipelag-los-rokes-stoit-li-tuda.html">Архипелаг Лос Рокес: стоит ли туда ехать?</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526287"><a href="/sim-card/ne-vidit-kompyutery-v-seti-posle-obeda-setevoe-okruzhenie-windows-propadayut.html">Сетевое окружение Windows</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526286"><a href="/transfers-and-payments/rukovodstvo-po-ekspluatacii-panasonic-air-conditioner-r410a-obzor-modelnogo.html">Обзор модельного ряда кондиционеров PANASONIC и инструкции к ним Кондиционер панасоник инструкция по эксплуатации пульта</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526285"><a href="/transfers-and-payments/explay-n1-proshit-s-karty-pamyati-proshivka-explay-n1-planshet-chto.html">Прошивка Explay N1 (планшет)</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526284"><a href="/services/z1-obnovlyaetsya-obnovleniya-na-telefon-soni-nepravilno-obnovlyaem-sony-xperia.html">Обновления на телефон сони неправильно</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526282"><a href="/rates/servisnye-kody-dlya-samsung-gt-samsung-gt-e1200-sekretnye-kody-kody-dlya-telefona-samsung-gt.html">Samsung GT-E1200 Секретные коды Коды для телефона самсунг gt e1200m</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1526281"><a href="/sim-card/v-istorii-microsoft-office-zavershilas-vazhnaya-stranica-chto-delat-s.html">Что делать с ошибкой «Прекращена работа программы Проводник Программа microsoft r html не работает</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1527508"><a href="/sim-card/otklyuchaem-uslugu---antenna-akado-rastorzhenie-dogovora.html">Отключение антенны разных операторов Не работает антенна акадо</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6898"><a href="/">О сайте</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6900"><a href="">О сайте</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6901"><a href="">Реклама на сайте</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6902"><a href="/feedback.html">Контакты</a></li> </ul> </li> </ul></nav> <div class="footer-bottom"> <div class="footer-left"> <div class="foot__logo"> <div class="footer__logo-sitename">tuseti.ru<span> ru</span></div> </div> <style> .foot__logo { min-height: 35px; margin: 0 0 11px -79px; padding: 9px 0 0 79px; text-decoration: none; } </style> <p>© 2024 Все права защищены</p> <p>Мобильный гид</p> <ul class="footer-bottom__nav"> <li><a href="" >Реклама на проекте</a></li> </ul> </div> <div class="footer-buttons"> </div> <ul class="footer__soc"> <li><a href="http://vk.com/" target="_blank" class="vk">ВКонтакте</a></li> <li><a href="http://ok.ru/" target="_blank" class="ok">Одноклассники</a></li> <li><a href="http://www.facebook.com/" target="_blank" class="fb">Facebook</a></li> <li><a href="https://twitter.com/" target="_blank" class="twi">Twitter</a></li> </ul> <div class="footer-right"> <div class="footer__note"></div> <div class="footer__counters" id="text-2"> <div class="textwidget"></div> </div> </div> </div> </footer> </div> </div> <link rel='stylesheet' id='wp-lightbox-bank.css-css' href='/wp-content/plugins/wp-lightbox-bank/assets/css/wp-lightbox-bank.css?ver=4.8.3' type='text/css' media='all' /> <script type='text/javascript' src='https://tuseti.ru/wp-content/themes/vannapedia_v.3/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://tuseti.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-fixed", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "respond", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ; </script> <script type='text/javascript' src='https://tuseti.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://tuseti.ru/wp-content/plugins/wp-lightbox-bank/assets/js/wp-lightbox-bank.js?ver=4.8.3'></script> <script type='text/javascript' src='https://tuseti.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script> </body> </html>