Шаблон html5 с формой регистрации пользователей. 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://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><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>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://i1.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://i2.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> WordPress version <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> WordPress version <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> WordPress version <h2>Login Form 3 by Colorlib</h2><p><img src='https://i1.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> WordPress version <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> WordPress version <h2>Login Form 5 by Colorlib</h2><p><img src='https://i1.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> WordPress version <h2>Login Form 6 by Colorlib</h2><p><img src='https://i2.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> WordPress version <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> WordPress version <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> WordPress version <h2>Login Form 9 by Colorlib</h2><p><img src='https://i2.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> WordPress version <h2>Login Form 10 by Colorlib</h2><p><img src='https://i2.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> WordPress version <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> WordPress version <h2>Login Form 12 by Colorlib</h2><p><img src='https://i0.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> WordPress version <h2>Login Form 13 by Colorlib</h2><p><img src='https://i0.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> WordPress version <h2>Login Form 14 by Colorlib</h2><p><img src='https://i2.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> WordPress version <h2>Login Form 15 by Colorlib</h2><p><img src='https://i2.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> WordPress version <h2>Login Form 16 by Colorlib</h2><p><img src='https://i2.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> WordPress version <h2>Login Form 17 by Colorlib</h2><p><img src='https://i0.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> WordPress version <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> WordPress version <h2>Login Form 19 by Colorlib</h2><p><img src='https://i1.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> WordPress version <h2>Login Form 20 by Colorlib</h2><p><img src='https://i1.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> WordPress version<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://i2.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://i1.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://i2.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://i0.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://i2.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://i1.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://i0.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://i2.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://i0.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://i1.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://i2.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://i2.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://i0.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://i1.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://i2.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://i0.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://i2.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://i2.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> <p>В формате данного урока создадим <b>форму авторизации на CSS </b>, покажу, как подключать шрифтовые иконки, каким образом задавать прозрачность у элементов, задействуем в форме анимированные эффекты при наведение.</p> <h3>Каркас формы в HTML</h3> <p>Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.</p> <p>Создаем блок, который будет являться контейнер для формы. Присвоим ему класс .container , в нем размещаем форму с input Первый input для ввода логина <span>type="text" name="username" placeholder="Введите логин" </span>, второй <span>input type="password" name="password" placeholder="Введите пароль" </span> принимает пароль и за ним кнопка submit . Ниже размещаем надпись для восстановления пароля, сделаем ее простой ссылкой.</p><p> <div class="container"> <form> <input type="text" name="username" placeholder="Введите логин"> <input type="password" name="password" placeholder="Введите пароль"> <input type="submit" name="submit" value="ВОЙТИ"> Восстановить пароль </form> </div> </p><h3>Описываем в CSS элементы формы</h3> <p>Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.</p><p> <link rel="stylesheet" href="css/style.css" type="text/css"> </p><p>Я предлагаю на задний фон поставить изображение, для этого создадим дополнительную директорию img , и поместим в нее свое изображение. Подключаем картинку в style.css для body . Прописываем путь до картинки, выходим с текущей директории, заходим в папочку img , и далее название картинки.<br></p><p>Body{ background-image: url("../img/bg.png"); } </p><p>A{ color: #fff; } a:hover{ text-decoration: none; } </p><p>Предадим стили контейнеру с формой .container . Зададим ширину в 450 пик., и временно установим высоту в 500 пик. Зададим цвет #182134 , и отцентрируем ее посередине экрана margin: 250px auto 0 auto; . Текст в нутрии блока размещаем по центру, сверху сделаем отступ в 20 пик.<br></p><p>Container{ width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; } </p><p>Оформим затем input для ввода логина и пароля. Что бы не затронуть кнопку, отберем их по атрибутам text и password , указываем ширину в 300 пик. , высоту в 50 пик. Текст увеличиваем на 18 пик., сделаем отступы между ними в 25 пик., закруглим углы border-radius: 4px; , текст сдвинем на 10 пик. влево.</p><p>Input,input{ width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; } </p><p>Затем отцентруем inpyt , для этого обернем их в дополнительный блок и присвоим класс .dws-input . Сделаем перенос строки после кнопки, и вверху перед кнопкой вставим картинку с нашим логотипом. Для этого скопируем ее в папку img , и пропишем к ней путь img src="img/men.png" .<br></p><p> <div class="container"> <img src='https://i1.wp.com/img/men.png' loading=lazy> <form> <div class="dws-input"> <input type="text" name="username" placeholder="Введите логин"> </div> <div class="dws-input"> <input type="password" name="password" placeholder="Введите пароль"> </div> <input type="submit" name="submit" value="ВОЙТИ"><br /> Восстановить пароль </form> </div> </p><p>Далее опишем ее стили. Картинке присвоим ширину и высоту по 120 пик. , затем подымем ее чуть выше формы margin: -60px 0 30px 0; , делаем об водку в 5 пик. border: 5px solid #1a394f; , закругляем углы в 50%.</p><p>Container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; } </p><p>Теперь опишем стили кнопки. Присвоим ей класс .dws-submit , и назначаем ей стили. Назначаем отступы, увеличим текст на 15 пик., делаем его белым, а фон кнопки синим, убираем об водку и сделаем в низу плашку, а также курсор Pointer .</p><p>Dws-submit { padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer; } </p><p>Чтобы отцентровать инпуты и кнопку, поместим их отдельно каждый в свой блок. Опишем стили кнопке при наведении. Делаем плавный переход, цвет кнопки меняем на белый, а в тоже время шрифт будет меняться на темный.</p><p>Dws-submit:hover{ transition: all 0.5s; background: #fff; color: #2c536c; } </p><p>Сделаем, сверху нашей формы синею плашку, box-shadow: 0 -5px 0 #3adbfd; , и добавим ее к картинке box-shadow: 0 -5px 0 #3adbfd; . Сделаем фон формы немного прозрачнее, для этого пропишем этот цвет в формате RGBA .</p> <p>Я пользуюсь сервисом w3schools.com , спускаемся вниз до Color Picker , в форму введем наш цвет и преобразуем его в RGB . Копируем, вставляем в стиль контейнера.</p><p>Container{ width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; } .container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; } </p><p>Для эффекта, закруглим нижние углы, для этого пропишем border-radius: 0 0 10px 10px; .<br></p> <h3>Добавление шрифтовых иконок</h3> <p>Добавим иконки в виде шрифтов, переходим на сервис fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.</p><p> <link rel="stylesheet" href="css/font-awesome.css" type="text/css"> </p><p>Отберем иконки для наших инпутов, для этого переходим на страничку <b>Icons </b>, первый подключим стиль для ввода логина, используем <b>user </b>, копируем его код <b>f007 </b>, и описываем его в стилях при помощи псевдоэлемента.</p> <p>Подключаем шрифты font-family: "FontAwesome"; ,затем саму иконку, позиционируем ее абсолютно поля, увеличим ее на 30 пик, отцентруем и изменим цвет.</p><p>Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } </p><p>Немного подвинем текст в input - padding-left: 40px; .</p> <p>Отберем вторую иконку с названием <b>lock </b>, копируем ее код <b>f023 </b>, и описываем ее стили.</p> <p>Для этого отбираем второй элемент <span>.dws-input:nth-child(2)::before{} </span>, и прописываем картинку content: "<b>\f023 </b>";. <br></p><p>Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } .dws-input:nth-child(2)::before{ content: "\f023"; } </p><p>Dws-input:hover::before{ color: #319ebc; transition: all 0.3s; } </p><p>А также, стили наведение для инпутов. <br></p><p>Dws-input input:hover{ box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); } </p><p> <i class="fa fa-vk" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-google-plus-official" aria-hidden="true"></i> <i class="fa fa-odnoklassniki" aria-hidden="true"></i> </p><p>Для удобства обернем их в блок с классом .social и опишем их стили. Изменим их цвет на белый, увеличим на 20 пик., сделаем шириной в 20 пик., и дадим отступы.<br></p><p>Dws-social i{ color: #fff; font-size: 20px; width: 20px; padding: 10px; } </p><p>Затем опишем стили при наведении. Сделаем белый блок, фон иконки изменим на темный, закруглим углы и при наведение отобразим курсор.<br></p><p>Social i:hover{ background-color: #fff; color: #1a394f; border-radius: 5px; cursor: pointer; } </p><p>Уберем высоту блока формы, которую задавали в самом начале, а в место ее добавим нижний отступ padding-bottom: 20px; .</p> <p>В принцыпе и все, получилась довольно симпатичная форма, которую можно подключить на сайт и использовать для авторизации.</p> <p>Пробуйте сделать на примере данного урока что нибудь свое оригинальное, тренируйтесь, и не забывайте делится данным материалом.</p> <p>Поле для ввода пароля - обычное текстовое поле, вводимый текст в котором в зависимости от браузера отображается звёздочками или точками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Хотя вводимый текст и не показывается на экране, на сервер введённая информация передаётся в открытом виде без шифрования. Поэтому использование этого поля не обеспечивает безопасности данных и их можно перехватить.</p><p>Синтаксис создания следующий.</p><p> <input type="password" атрибуты> </p><p>Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.</p><p>Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить свои полномочия. В примере 1 показано, как создавать подобные поля.</p><p>Пример 1. Поле с паролем</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Поле с паролем</title> </head> <body> <form action="handler.php"> <p><strong>Логин:</strong> <input maxlength="25" size="40" name="login"></p> <p><strong>Пароль:</strong> <input type="password" maxlength="25" size="40" name="password"></p> <p><input type="submit" value="Войти"></p> </form> </body> </html> </p><p>В результате получим следующее (рис. 1).</p><p>Рис. 1. Вид поля с паролем</p><p>К полю с паролем применимы стилевые свойства задающие параметры цвета, фона, рамки и др. В примере 2 показано добавление фоновых картинок к полям формы. За основу возьмём стиль как для текстовых полей.</p><p>Пример 2. Добавление изображения в текстовое поле</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Поле с паролем</title> <style> .textField, .passField { width: 100%; /* Ширина поля */ padding: 10px; /* Поля */ box-sizing: border-box; /* Алгоритм расчёта ширины */ box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */ border: 1px solid #ccc; /* Параметры рамки */ color: #ff6d37; /* Цвет текста */ background: url(/example/image/user.png) no-repeat 5px 50%; /* Картинка пользователя */ padding-left: 30px; /* Расстояние от левого края */ } .passField { background: url(/example/image/lock.png) no-repeat 5px 50%; /* Картинка для поля с паролем */ } </style> </head> <body> <form action="handler.php"> <p><input maxlength="25" name="login" class="textField"></p> <p><input type="password" maxlength="25" name="password" class="passField"></p> <p><input type="submit" value="Войти"></p> </form> </body> </html> </p><p>Результат данного примера показан на рис. 2. Картинки добавляются в качестве фона, поэтому текст обязательно надо сдвинуть вправо через padding-left , в противном случае он будет выводиться поверх изображения.</p> <p>Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.</p> Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination. <h2>HTML Code for registration form</h2> <p>Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.</p> <p>In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.</p> <p><b>registration.html </b></p><p> <html> <head> <title>registration form</title> </head> <h2 ALIGN="CENTER">Registration form</h2> <form action="Welcome.html" method="post"> <table border="0" align="center"> <tbody> <tr> <td><label for="id">Id: </label></td> <td><input id="id" maxlength="50" name="name" type="text" /></td> </tr> <tr> <td><label for="name">Name: </label></td> <td><input id="name" maxlength="50" name="name" type="text" /></td> </tr> <tr> <td><label for="course">Course: </label></td> <td><input id="course" maxlength="50" name="course" type="text" /></td> </tr> <tr> <td><label for="branch">Branch: </label></td> <td><input id="branch" maxlength="50" name="branch" type="text" /></td> </tr> <tr> <td><label for="rolln0">Rollno: </label></td> <td><input id="rollno" maxlength="50" name="rollno" type="text" /></td> </tr> <tr> <td><label for="email">Email_Address:</label></td> <td><input id="email" maxlength="50" name="email" type="text" /></td> </tr> <tr> <td><label for="username">User_Name:</label></td> <td><input id="username" maxlength="50" name="username" type="text" /></td> </tr> <tr> <td><label for="aboutus">About Us:</label></td> <td valign="middle" align="center"><textarea> Password: