Форма html для регистрации и входа. Форма входа и регистрации с помощью HTML5 и CSS3

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>Для изменения <a href="/uvidet-na-sebe-zolotye-pugovicy-vo-sne-k-chemu-videt-vo-sne/">внешний вид</a> текстового поля при получении фокуса, используется псевдокласс 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://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> </p><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>Creating a membership based site seems like a daunting task at first. If you ever wanted to do this by yourself, then just gave up when you started to think how you are going to put it together using your PHP skills, then this article is for you. We are going to walk you through every aspect of creating a membership based site, with a secure members area protected by password.</p><p>The whole process consists of two big parts: user registration and user authentication. In the first part, we are going to cover creation of the registration form and storing the data in a MySQL database. In the second part, we will create the login form and use it to allow users access in the secure area.<br></p><h2>Download the code</h2><p>You can download the whole source code for the registration/login system from the link below:<br></p><p><b>Configuration & Upload </b><br> The ReadMe file contains detailed instructions.</p><p>Open the <i>source\include\membersite_config.php </i> file in a text editor and update the configuration. (Database login, your website’s name, your email address etc).</p><p>Upload the whole directory contents. Test the register.php by submitting the form.</p><h2>The registration form</h2><p>In order to create a user account, we need to gather a minimal amount of information from the user. We need his name, his email address and his desired username and password. Of course, we can ask for more information at this point, but a long form is always a turn-off. So let’s limit ourselves to just those fields.</p><p>Here is the registration form:</p><p><form id="register" action="register.php" method="post" accept-charset="UTF-8"> <fieldset > <legend>Register</legend> <input type="hidden" name="submitted" id="submitted" value="1"/> <label for="name" >Your Full Name*: </label> <input type="text" name="name" id="name" maxlength="50" /> <label for="email" >Email Address*:</label> <input type="text" name="email" id="email" maxlength="50" /> <label for="username" >UserName*:</label> <input type="text" name="username" id="username" maxlength="50" /> <label for="password" >Password*:</label> <input type="password" name="password" id="password" maxlength="50" /> <input type="submit" name="Submit" value="Submit" /> </fieldset> </form></p><p>So, we have text fields for name, email and the password. Note that we are using the for better usability.</p><h2>Form validation</h2><p>At this point it is a good idea to put some form validation code in place, so we make sure that we have all the data required to create the user account. We need to check if name and email, and password are filled in and that the email is in the proper format.</p><h2>Handling the form submission</h2><p>Now we have to handle the form data that is submitted.</p><p>Here is the sequence (see the file fg_membersite.php in the downloaded source):</p><p>function RegisterUser() { if(!isset($_POST["submitted"])) { return false; } $formvars = array(); if(!$this->ValidateRegistrationSubmission()) { return false; } $this->CollectRegistrationSubmission($formvars); if(!$this->SaveToDatabase($formvars)) { return false; } if(!$this->SendUserConfirmationEmail($formvars)) { return false; } $this->SendAdminIntimationEmail($formvars); return true; }</p><p>First, we validate the form submission. Then we collect and ‘sanitize’ the form submission data (always do this before sending email, saving to database etc). The form submission is then saved to the database table. We send an email to the user requesting confirmation. Then we intimate the admin that a user has registered.</p><h2>Saving the data in the database</h2><p>Now that we gathered all the data, we need to store it into the database.<br> Here is how we save the form submission to the database.</p><p>function SaveToDatabase(&$formvars) { if(!$this->DBLogin()) { $this->HandleError("Database login failed!"); return false; } if(!$this->Ensuretable()) { return false; } if(!$this->IsFieldUnique($formvars,"email")) { $this->HandleError("This email is already registered"); return false; } if(!$this->IsFieldUnique($formvars,"username")) { $this->HandleError("This UserName is already used. Please try another username"); return false; } if(!$this->InsertIntoDB($formvars)) { $this->HandleError("Inserting to Database failed!"); return false; } return true; }</p><p>Note that you have configured the Database login details in the membersite_config.php file. Most of the cases, you can use “localhost” for database host.<br> After logging in, we make sure that the table is existing.(If not, the script will create the required table).<br> Then we make sure that the username and email are unique. If it is not unique, we return error back to the user.</p><h3>The database table structure</h3><p>This is the table structure. The CreateTable() function in the fg_membersite.php file creates the table. Here is the code:</p><p>function CreateTable() { $qry = "Create Table $this->tablename (". "id_user INT NOT NULL AUTO_INCREMENT ,". "name VARCHAR(128) NOT NULL ,". "email VARCHAR(64) NOT NULL ,". "phone_number VARCHAR(16) NOT NULL ,". "username VARCHAR(16) NOT NULL ,". "password VARCHAR(32) NOT NULL ,". "confirmcode VARCHAR(32) ,". "PRIMARY KEY (id_user)". ")"; if(!mysql_query($qry,$this->connection)) { $this->HandleDBError("Error creating the table \nquery was\n $qry"); return false; } return true; }</p><p>The id_user field will contain the unique id of the user, and is also the primary key of the table. Notice that we allow 32 characters for the password field. We do this because, as an added security measure, we will store the password in the database encrypted using MD5. Please note that because MD5 is an one-way encryption method, we won’t be able to recover the password in case the user forgets it.</p><h3>Inserting the registration to the table</h3><p>Here is the code that we use to insert data into the database. We will have all our data available in the $formvars array.</p><p>function InsertIntoDB(&$formvars) { $confirmcode = $this->MakeConfirmationMd5($formvars["email"]); $insert_query = "insert into ".$this->tablename."(name, email, username, password, confirmcode) values ("" . $this->SanitizeForSQL($formvars["name"]) . "", "" . $this->SanitizeForSQL($formvars["email"]) . "", "" . $this->SanitizeForSQL($formvars["username"]) . "", "" . md5($formvars["password"]) . "", "" . $confirmcode . "")"; if(!mysql_query($insert_query ,$this->connection)) { $this->HandleDBError("Error inserting data to the table\nquery:$insert_query"); return false; } return true; }</p><p>Notice that we use PHP function md5() to encrypt the password before inserting it into the database.<br> Also, we make the unique confirmation code from the user’s email address.</p><h2>Sending emails</h2><p>Now that we have the registration in our database, we will send a confirmation email to the user. The user has to click a link in the confirmation email to complete the registration process.</p><p>function SendUserConfirmationEmail(&$formvars) { $mailer = new PHPMailer(); $mailer->CharSet = "utf-8"; $mailer->AddAddress($formvars["email"],$formvars["name"]); $mailer->Subject = "Your registration with ".$this->sitename; $mailer->From = $this->GetFromAddress(); $confirmcode = urlencode($this->MakeConfirmationMd5($formvars["email"])); $confirm_url = $this->GetAbsoluteURLFolder()."/confirmreg.php?code=".$confirmcode; $mailer->Body ="Hello ".$formvars["name"]."\r\n\r\n". "Thanks for your registration with ".$this->sitename."\r\n". "Please click the link below to confirm your registration.\r\n". "$confirm_url\r\n". "\r\n". "Regards,\r\n". "Webmaster\r\n". $this->sitename; if(!$mailer->Send()) { $this->HandleError("Failed sending registration confirmation email."); return false; } return true; }</p><h2>Updates</h2><p><b>9th Jan 2012 </b><br> Reset Password/Change Password features are added<br> The code is now shared at GitHub .</p><p>Welcome back <?= $fgmembersite->UserFullName(); ?>!</p><h2>License</h2><p><img src='https://i0.wp.com/gnu.org/graphics/lgplv3-147x51.png' height="51" width="147" loading=lazy><br> The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.</p><p>No related posts.</p> <p>Comments on this entry are closed.</p><ul><li><li><li><li><li></ul> <br> Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации. <br> В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .<h3> HTML </h3> <div id="container_demo" > <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --> <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Log in</h1> <p> <label for="username" class="uname" data-icon="u" > Your email or username </label> <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p"> Your password </label> <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Keep me logged in</label> </p> <p class="login button"> <input type="submit" value="Login" /> </p> <p class="change_link">Not a member yet ? Join us </p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Sign up"/> </p> <p class="change_link">Already a member ? Go and log in </p> </form> </div> </div> </div> <br> Здесь мы использовали несколько приемов HTML5. Например, элемент <i>type=password </i> автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент <i>type=email </i> позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр <i>require=required </i>; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр <i>autocomplete=on </i> будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.<p>Теперь о двух хитрых моментах. Вы наверное заметили две ссылки <a href> в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).</p><p>Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр <i>data-icon=”icon_character” </i> с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes . </p><h2> CSS </h2> Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!<h4>Стилизуем формы, используя CSS3</h4> Во-первых, давайте назначим нашим формам базовый стиль.<p> #subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; } </p><p>Здесь мы назначим свойства для шапки:</p><p> /**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); } </p><p>Замечу, что сегодня только браузеры с webkit поддерживают <i>background-clip: text </i>, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр <i>background-clip: text </i> работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр <i>-webkit-text-fill-color: transparent </i> позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.</p><p>Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.</p><p>Теперь давайте позаботимся о полях ввода и придадим им приятный вид.</p><p> /**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; } </p><p>Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.</p><p> /* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } </p><p>Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.</p><p>Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут <i>data-icon </i>? Именно в него нужно вставить букву. Я использовал <i>data-icon=’u’ </i> для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face. </p><p> @font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; } </p><p>Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр <i>content: attr(data-icon) </i>, чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.</p><p>Теперь назначим правила для кнопки отправки формы.</p><p> /*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; } </p><p>Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.</p><p>Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:</p><p> /* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; } </p><p>Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.</p><p>P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; } </p><p>Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!</p><h4>Создаем анимацию</h4> Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:<p> #register{ z-index: 21; opacity: 0; } </p><p>Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.</p><p>Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр <i>display: none </i>. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).</p><p> #toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; } </p><p>Вот, что происходит: когда мы кликаем на кнопку <i>Присоединиться </i>, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием <i>fadeInLeft </i>. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.<br> Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.</p><p>Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } </p><p>Форма, которая “исчезает”, будет иметь анимацию затемнения влево:</p><p> #toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } </p><p>Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.</p><p>Вот и все, друзья. Надеюсь вам понравился этот туториал!</p><p><b>Заметим, что в некоторых браузерах параметр <i>background-clip: text </i> не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет. </b></p><p><b>P.S. </b> Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!</p><p>Теги: Добавить метки</p> 23.09.18 6.8K <p>Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.</p> <h2>WordPress Login Customizer</h2> <p>Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress. </p><h2>Creative Login Form</h2> <p><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><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><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><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><img src='https://i1.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><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><img src='https://i1.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><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><img src='https://i2.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><img src='https://i1.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><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><img src='https://i2.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><img src='https://i2.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><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><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><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><img src='https://i0.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><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><img src='https://i1.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><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-383796-740x576.jpg' width="100%" loading=lazy></p><p>Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под <a href="/otlichiya-kart-pamyati-sd-ot-sdhc-i-sdxc-luchshie-micro-sd-karty-pamyati-dlya/">мобильные устройства</a> и совместима со всеми основными веб-браузерами. </p><p>Скачать </p> <p>Предварительный просмотр </p> <h2>Форма авторизации №20</h2> <p><img src='https://i1.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><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><img src='https://i1.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><img src='https://i0.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><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><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, которое добавляет <a href="/kak-nazyvaetsya-bazovyi-uroven-angliiskogo-yazyka-urovni-vladeniya-angliiskim/">базовому языку</a> новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое. </p><p>Скачать </p> <h2>Animated Login Form</h2> <p><img src='https://i2.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><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384367-740x576.jpg' width="100%" loading=lazy></p><p>Пример того, как создать <a href="/skachat-prostaya-forma-registracii-html-sozdanie-html-form/">простую форму</a> входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и:before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных. </p><p>Скачать </p> <h2>Login With Shake Effect</h2> <p><img src='https://i1.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><img src='https://i1.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><img src='https://i1.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><img src='https://i0.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><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><img src='https://i0.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><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/2018/10/42847-384807-740x576.jpg' width="100%" loading=lazy></p>Скачать <p>В данной статье будет описан процесс реализации возможности регистрации и аутентификации пользователей наиболее простейшим образом.</p><h3>1. Регистрация</h3> <p>Начнём с регистрации. Django "из коробки" предоставляет форму создания пользователя <b>UserCreationForm </b>, которую мы и будет использовать для регистрации. Плюс ко всему, она автоматически делает все необходимые проверки. Например, зарегистрирован ли уже пользователь с данным именем. Построенное на основе данной формы представление будет иметь следующий вид:</p><p>From django.views.generic.edit import FormView from django.contrib.auth.forms import UserCreationForm class RegisterFormView(FormView): form_class = UserCreationForm # Ссылка, на которую будет перенаправляться пользователь в случае успешной регистрации. # В данном случае указана ссылка на страницу входа для зарегистрированных пользователей. success_url = "/login/" # Шаблон, который будет использоваться при отображении представления. template_name = "register.html" def form_valid(self, form): # Создаём пользователя, если данные в форму были введены корректно. form.save() # Вызываем метод базового класса return super(RegisterFormView, self).form_valid(form) </p><p>Как видно, зарегистрировать пользователя достаточно просто. Теперь необходимо добавить ссылку на представление в <b>urls.py </b>:</p><p>From django.conf.urls import patterns, include, url urlpatterns = patterns("", ... url(r"^register/$", views.RegisterFormView.as_view()), ...) </p><p>И тег <b>{{ form }} </b> в шаблон <b>register.html </b>:</p><p> <!DOCTYPE html> <html> <head> <title>Регистрация</title> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(98243278, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/98243278" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <link type="image/svg+xml" href="/favicon.svg" rel="icon"> </head> <body> <form action="" method="post"> {% csrf_token %} <!-- as_p для того, чтобы каждый элемент формы был с новой строки --> {{ form.as_p }} <button type="submit">Зарегистрироваться</button> </form> </body> </html> </p><p>Таким образом, перейдя на страницу <b>ваш.сайт/register/ </b> можно будет увидеть форму регистрации, которая, если повезёт, даже будет работать. Однако, выглядеть она будет страшновато. Как применить к ней форматирование и стили CSS можно догадаться из статьи или почитав документацию.</p><h3>2. Аутентификация</h3> <p>Принципы реализации аутентификации абсолютно те же самые, но реализация немного сложнее (за счёт использования некоторых дополнительных функций). Без лишних слов, смотрим на код и читаем комментарии:</p><p> # Опять же, спасибо django за готовую форму аутентификации. from django.contrib.auth.forms import AuthenticationForm # Функция для установки сессионного ключа. # По нему django будет определять, выполнил ли вход пользователь. from django.contrib.auth import login class LoginFormView(FormView): form_class = AuthenticationForm # Аналогично регистрации, только используем шаблон аутентификации. template_name = "login.html" # В случае успеха перенаправим на главную. success_url = "/" def form_valid(self, form): # Получаем объект пользователя на основе введённых в форму данных. self.user = form.get_user() # Выполняем аутентификацию пользователя. login(self.request, self.user) return super(LoginFormView, self).form_valid(form) </p><p>Осталось, аналогично регистрации, добавить ссылку в <b>urls.py </b> и создать шаблон <b>login.html </b> (кстати говоря, подойдёт и представленный выше шаблон регистрации без каких-либо изменений).</p><h3>3. Выход</h3> Для полного счастья осталось добавить возможность выхода (для ещё большего счастья смену и восстановление пароля, но об этом ниже). Для выхода не требуется никаких форм и шаблонов, поэтому представление для него делается буквально в четыре строки: from django.http import HttpResponseRedirect from django.views.generic.base import View from django.contrib.auth import logout class LogoutView(View): def get(self, request): # Выполняем выход для пользователя, запросившего данное представление. logout(request) # После чего, перенаправляем пользователя на главную страницу. return HttpResponseRedirect("/") <h3>4. Заключение</h3> <p>Скопировав и склеив всё это, можно получить минимальную систему "чтобы работало" с большим потенциалом для улучшения. Например, можно реализовать страницы восстановления и изменения пароля аналогичным образом на основе форм <b>PasswordResetForm </b> и <b>PasswordChangeForm </b> из <b>django.contrib.auth.forms </b>.</p> Please enable JavaScript to view the <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <footer class="entry-meta"> </footer> </div> </article> </main> </div> </div> <div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary"> <div class="well"> <aside id="search-2" class="widget widget_search"> <form method="get" class="form-search" action="/"> <div class="input-group"> <input type="text" class="form-control search-query" value="" name="s" id="s" placeholder="Поиск..."> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Search"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </form> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Новые статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/unikalnyi-eresunnskii-most-tonnel-soedinyayushchii-daniyu-i-shveciyu/">Эресуннский мост — воплощение смелой мечты Автомобильный мост между данией и швецией</a></li> <li class="recentcomments"><a href="/vkusnyi-goryachii-salat-t-plye-salaty-govyadina-s-bolgarskim-percem-i/">Вкусный горячий салат. Тёплые салаты. Говядина с болгарским перцем и пекинской капустой</a></li> <li class="recentcomments"><a href="/skolko-platili-za-skalp-indeica-zachem-indeicam-skalp-ural-ne/">Сколько платили за скальп индейца</a></li> <li class="recentcomments"><a href="/odevayut-li-kolgotki-pod-bosonozhki-po-etiketu-mozhno-li-nosit-bosonozhki-s/">Можно ли носить босоножки с капроновыми колготками</a></li> <li class="recentcomments"><a href="/griby-ryadovki-v-kakih-derevyah-rastut-grib-ryadovka-harakteristika-sedobnyh-i-nesedobnyh-vidov-k/">Гриб рядовка: характеристика съедобных и несъедобных видов</a></li> <li class="recentcomments"><a href="/novyi-kukuruznik-priletit-iz-sibiri-novyi-kukuruznik/">Новый «кукурузник»: построит ли Россия биплан XXI века Новый композитный ан 2</a></li> <li class="recentcomments"><a href="/a-mechty-sbyvayutsya-kogda-mechty-sbyvayutsya-a-kogda-net-kak-zastavit/">Когда мечты сбываются, а когда — нет?</a></li> <li class="recentcomments"><a href="/kak-pravilno-vstrechat-rozhdestvo-i-chto-gotovit-rozhdestvo-semeinyi/">Рождество – семейный праздник: как весело отметить Рождество Христово в кругу семьи</a></li> <li class="recentcomments"><a href="/pochemu-mozhet-bolet-zhivot-vo-vtorom-trimestre-pochemu-na-18-nedele/">Почему может болеть живот во втором триместре?</a></li> <li class="recentcomments"><a href="/skorost-rasprostraneniya-volny-eryutkin-e-s-dlina-volny-skorost-volny/">Скорость распространения волны (Ерюткин Е</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Последние статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/kakie-uprazhneniya-podtyagivayut-grudnye-myshcy-uprazhneniya-na-grudnye-myshcy-dlya/">Упражнения на грудные мышцы для девушек в тренажерном зале, дома, чтобы накачать, для подтяжки, роста</a></li> <li class="recentcomments"><a href="/chto-my-ne-znaem-o-kalanhoe-magiya-rastenii-kalanhoe-v-dome/">Магия растений Каланхоэ в доме приметы и суеверия</a></li> <li class="recentcomments"><a href="/kurinaya-grudka-v-slivkah-vkusnyi-recept-prostogo-uzhina/">Куриная грудка в сливочном соусе на сковороде Куриная грудка в сливках сливочная</a></li> <li class="recentcomments"><a href="/chto-sluchilos-8-iyulya-prazdniki-i-sobytiya-iyulya-den-deistvii-protiv/">Праздники и события июля</a></li> <li class="recentcomments"><a href="/samoe-rasprostranennoe-imya-devushki-redkie-i-krasivye-imena-dlya/">Редкие и красивые имена для девочек</a></li> <li class="recentcomments"><a href="/venera-zhenshchiny-v-trigone-k-yupiteru-muzhchiny-otpravit-po-elektronnoi-pochte/">Отправить по электронной почте</a></li> <li class="recentcomments"><a href="/ege-po-angliiskomu-ustnaya-chast-varianty-zadanii-uchimsya/">Учимся описывать картинку (ЕГЭ, ОГЭ)</a></li> <li class="recentcomments"><a href="/kak-vybrat-chto-sdavat-na-ege-kakie-predmety-legche-sdavat-na-oge/">Какие предметы легче сдавать на ОГЭ?</a></li> <li class="recentcomments"><a href="/interesnye-fakty-o-nogtyah-cheloveka-neveroyatnye-fakty-o-chelovecheskom/">Невероятные факты о человеческом теле</a></li> <li class="recentcomments"><a href="/kakoi-god-1965-po-goroskopu-god-derevyannoi-zmei-negativnye/">Какой год 1965 по гороскопу</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> </aside> </div> </div> </div> <div id="yandex_rtb_R-A-202909-1"></div> </div> </div> </div> <div id="footer-area"> <div class="container footer-inner"> <div class="row"> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info container"> <div class="row"> ciklon.vip - Насморкам НЕТ </div> </div> <div class="scroll-to-top"><i class="fa fa-angle-up"></i></div> </footer> </div> <script type="text/javascript"> disableSelection(document.body) </script> <script type='text/javascript' src='https://ciklon.vip/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var cm_imgs = { "fileTypeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435\u0432\u0435\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043e \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044e.","fileSizeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b. \u041f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d! \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430:","limitFileSize":"2097152","fileCountError":"<strong>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/strong> \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b <br \/>\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: ","limitFileCount":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://ciklon.vip/wp-content/plugins/comment-images-reloaded/js/cir.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://ciklon.vip/wp-content/themes/sparkling/inc/js/skip-link-focus-fix.js?ver=20140222'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://ciklon.vip/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6'></script> <script type='text/javascript' src='https://ciklon.vip/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://ciklon.vip/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> </body> </html>