Создание HTML форм. Форма входа и регистрации с помощью HTML5 и CSS3 Бесправие login form html

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.

So what do Login Forms have to do with HTML and CSS? They are both the essential parts of the Login Forms.

HTML (HyperText Markup Language) is a standard markup language used to create web pages. HTML elements are building blocks of all websites.

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!

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.

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.

Explore 2.5 Million Digital Assets including 2019’s Best WordPress Templates

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.

DOWNLOAD NOW

WordPress Login Customizer

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.

Creative Login Form

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

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.

Login Form 1 by Colorlib

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.

Login Form 2 by Colorlib

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.

Login Form 3 by Colorlib

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.

Login Form 4 by Colorlib

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.

Login Form 5 by Colorlib

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.

Login Form 6 by Colorlib

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.

Login Form 7 by Colorlib

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.

Login Form 8 by Colorlib

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.

Login Form 9 by Colorlib

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.

Login Form 10 by Colorlib

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.

Login Form 11 by Colorlib

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.

Login Form 12 by Colorlib

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.

Login Form 13 by Colorlib

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.

Login Form 14 by Colorlib

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.

Login Form 15 by Colorlib

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.

Login Form 16 by Colorlib

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.

Login Form 17 by Colorlib

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.

Login Form 18 by Colorlib

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.

Login Form 19 by Colorlib

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.

Login Form 20 by Colorlib

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.

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.

A design for a Sign Up form using tabs and floating form labels.

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.

Flat Login – Sign Up Form

Once you click “Click me” button in top-right corner, you will get smooth animation that transforms this Login form to Sign up form.

Login With Self-Contained SCSS Form

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.

This is actually an animated Login form, with top “Hey you, Login already” transforming into the form at the bottom. Smooth animation effects.

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.

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.

A boxy login form with a little surprise. Try “admin” as a username, and “1234” as a password, for full experience.

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!

Material Design Form

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.

Bootstrap Snippet Form

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.

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.

Trendy UI Kits Form

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.

Dashboard CSS3 HTML5 Form

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.

Login With Recovery Form

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.

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.

Transparent Login

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.

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.

Elegant Flat Form

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.

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.

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.

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.

Log ‘N Load Animated Form

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.

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.

DesignMaz have collected list of the best CSS /HTML Login Form Templates for Web Designers, Developers that they can download and use to create a form and most of them also have pre built HTML validation features as well as some option jQuery validation (like the Login /Register form with pass meter below).

Free Responsive Flat Login Form Widget Template

Free Responsive Flat New Login Form Widget Template for your websites. This Login form is designed using web technologies such as . It is completely free for download and can be use for your website or application sign in.

Forms Plus

PopForms

Flat Form with Bootstrap 3

This is a flat modern css3 design based on Booststrap 3 Framework. Responsive design with multi-color multipurpose web forms with pure css3.

Responsive Static Login Form HTML5 Template

Free Responsive Static Login Form HTML5 CSS3 Template. You can download this HTML CSS Sign In Widget which can be used in you web projects.

Free Responsive Flat and Clean Login Form Template

A Responsive Flat and Clean Login Form HTML Template designed using web technologies such as HTML5 and CSS3. You can free download and use for your website or application sign in.

Responsive Flat Purple Login Form Template

A free Responsive Flat Purple Login Form Template built with HTML5, and CSS3. It is completely free for download and can be used straight away in your website or app.

Bootstrap login with social buttons

Any Twitter Bootstrap developer will love these free Responsive Bootstrap login form template with social buttons . This Responsive Bootstrap login form template is a Simple and Clean login form website template base on Bootstrap 3.1.0 .

Easy to use the beautiful and colorful css login form for their own website. Simply insert into the existing CSS file and enjoy the new CSS login form . Created with rounded corners and nice look. It degrades nicely on older browsers, e.g. IE7 and IE8.

MetroLogin is a Windows 8’s Login form simulator that gives you this ability to make a login page for your website’s users or a login Page for your admin panel with a nice metro design.

Twitter Inspired Login Form – Jquery

This is a drop down login form similar to the one found on twitter. It comes complete with JavaScript , CSS and HTML . Just like Twitters login in form it comes with enhancements like tooltips and a compact login form and a clicked state button. It uses CSS3 to reduce the need for images and it degrades nicely in non CSS browsers. It has great browser support and works in most modern browsers and even older ones like Internet explorer 6 and 7.

This is clean and pleasant designed login & register HTML user interface with error handling and social buttons.

Clean and usable login & register form is for every developer. It’s very fast pure CSS . Error handling states, social buttons and forgotten password state is in there.

Zi-Popup Login Forms – Pure CSS3

Clean and usable login & register form is for every developer. It’s very fast CSS form with jQuery validation. Error handling, social buttons and forgotten password handling is in there. Bring to live with a jQuery.

Minimalistic Login/Register Form + Live Validation

Minimalistic Designed Login , Register and Forgot Template Forms Pack. Packed with jQuery Live Validation, 7 color styles, 3 different form size options, title animation, custom checkbox, tooltip hints and jQuery Error Handling.

Summer Forms – Login And Registration Forms

Summer Forms are coupled login and registration forms having a set of impressing effects bundled with the bright modern design. The flexibility of these responsive forms Summer Forms may be become the first brick of your new web site or may be just a replacement of your old forms . Every year the people get more exacting. The forms are well thought out and may satisfy any user.

Not so long ago, in order to achieve such effects, we used JS. But, now, CSS3 has all the necessary tools for making pop-up windows too.

Moon Forms – Login & Registration CSS Forms

Moon Forms are coupled login and registration forms having a modern design. The flexibility of these responsive forms allows placing it into any area on your site (like a widget, like a popup window, like a standalone page).

Tab and form developed by using only CSS3 , no javascript used. It is simple , clean and browser compatible. Very Easy to implement on any kind of website.

Features a large collection of form styles that are used regularly in websites. You get Search Forms , Login Forms , Contact Forms and General Form styles. Further all these forms are available in Dark and Light coloured versions, so you get a total of 224 form styles! The login , contact and general forms also have focus and validation error styles defined in the css.

Form Framework that strikes a balance between simplicity and elegance.CSS3 Responsive Forms kit is simple, clean and fresh modern form pack develop using bootstrap .

Day/Night Login Page

Day / Night Login Forms – has the net and unique design. In the kit you get 2 folder with 6 forms. In two colors white and dark. As in the kit includes 4 style buttons. Thanks to the Day / Night Login Forms developers can save time and money on developing the design. And the designers can see an example of the correct organization of layers.

Is a set of beautiful form elements. It has large amount of customized items, different color schemes, responsive grid system and allows you to create forms of any complexity and for any needs: login , registration , contacts , review , order , comment , checkout , etc.

Easy to use HTML5 & CSS3 Login Panel

Golden Forms is a simple and professional Form Framework that strikes a balance between simplicity and elegance. The framework is built with pure CSS3 + HTML5 (no images), features a clean consistent Form UI , responsive 12 column grid, and can be used to build any kind of Web Forms quickly whether simple or complex, without special CSS and coding knowledge.

Your visitors won’t be able to stop themselves contacting you with this baby. The HTML5 AJAX Contact Form utilises cutting edge HMTL5 code and CSS3 animations to make your contact page elegant and ultra-usable.

– has a clean design and a powerfull 3D Flip Effect which give user a unique exprince and a fast way to complete the process . In the kit you get 1 psd file with 3 forms styes.

Responsive HTML5 – jQuery Sign In – Registration Form

Responsive HTML5 Sign In / Registration form , with jQuery effects and CSS3 customization.

Как вы уже знаете, веб-клиент имеет возможность передавать веб-серверу различную информацию при помощи GET и POST-запросов. HTML-формы - это основной инструмент для создания таких запросов. По сути, HTML-форма представляет собой поле или поля для ввода информации на веб-странице. Наглядным примером HTML-формы служит форма ввода логина и пароля для авторизации на сайте.

HTML-форма описывается с помощью парного тега form . Этот тег имеет два важнейших атрибута: method и action . В атрибуте method задается тип HTTP-запроса (get или post), в action - запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:

Существует несколько различных видов элементов для ввода данных, которые помещаются внутри формы. Элемент, с которого я хотел бы начать, называется submit :

Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут value задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты name . Например:

При формировании запроса веб-браузер включит HTTP-параметр, характеризующий нажатый элемент submit. В качестве имени параметра будет взято значение атрибута name нажатой кнопки, в качестве значения - значение атрибута value. Таким образом, при нажатии кнопки Add будет сформирован запрос:

/control.php?submit=Add

а при нажатии кнопки Edit:

/control.php?submit=Edit

Следующий элемент представляет собой простейший элемент для ввода однострокового текста. Его HTML-код:

name - обязательный атрибут для участия в HTTP-запросе. Значение этого атрибута будет использовано в качестве имени HTTP-параметра. Этот атрибут имеется у всех типов элементов форм.

Элементу можно также задать атрибут value, указав в нем текст, который по-умолчанию будет введен в элементе. Например:

Элемент password служит для ввода паролей. Внешне он такой же, но введенный текст отображается в виде звездочек или точек:

Этого, в принципе, достаточно для создания простейшей формы авторизации. Давайте попробуем ее реализовать, а затем вернемся к рассмотрению остальных типов элементов.

Создадим файл auth.php в корневом каталоге со следующим содержимым:

Как видите, внутри тега form можно размещать теги, помогающие красиво разметить форму (я внутрь поместил таблицу). Форма содержит поля для ввода имени пользователя и пароля с именами login и pass соответственно. При нажатии "Войти" формируется GET-запрос документа /auth.php (то есть, страница запрашивает саму себя). В моем случае полный URL страницы имел вид http://test-domain3/auth.php .

Введите данные и нажмите "Войти". Страница должна перезагрузиться. Должен также измениться и адрес страницы. В моем случае он принял вид:

Http://test-domain3/auth.php?login=Joker-jar&pass=12345

Это означает, что документ auth.php был запрошен с GET-параметрами, которые были введены с помощью HTML-формы. Поместите в начало файла auth.php PHP-обработчик, который будет принимать данные для авторизации:

Если странице были переданы логин и пароль, условие сработает и сообщение будет выведено. Также будет вызван exit , который прекратит дальнейшее выполнение скрипта, следовательно форма выведена не будет.

Передавать пароль с помощью GET-запроса небезопасно, так как он виден в адресной строке. Сменим тип запроса на POST. Для этого изменим значение атрибута method, а в PHP-обработчике обращения к массиву $_GET изменим на $_POST. Проверьте работоспособность скрипта.

Следующий элемент - флажок . Его применяют, когда от пользователя необходим ответ вида "да/нет":

Если флажок не отмечен, в параметрах ничего не передается. Иначе передается параметр name со значением on . Есть еще один момент. Как правило, рядом с флажком присутствует поясняющая надпись. Хорошим тоном является реализация веб-мастером реакции флажка на клики по этой надписи. Делается это просто. Флажку присваивается определенный id, а сама надпись оформляется тегом label с атрибутом for , значение которого равно идентификатору флажка:

Похожий элемент используется для выбора ответа из набора значений. Допустим, пользователю необходимо выбрать один из трех цветов:

Обратите внимание, что у всех элементов одинаковое значение name. Можно выбрать только одно значение. В HTTP-параметра передастся value выбранного элемента, например color=blue .

Чтобы изначально был выбран какой-то из элементов, например, первый, ему нужно задать атрибут checked со значением checked (стандарт XHTML):

Для ввода большого многострочного текста существует специальный элемент textarea :

Текст внутри элемента

Этот элемент, как видите, отличается от предыдущих. Он представляет собой парный тег, а текст помещается не в атрибут, а в тело тега. У элемента также есть атрибут name. При помощи атрибута rows можно задать количество строк в элементе, cols - количество символов в строке. Элемент textarea используется, как правило, в POST-формах, т.к. предполагает ввод длинного текста (например, форма сообщения на форуме).

Выпадающий список. Наверняка сталкивались с таким элементом в программах. Позволяет выбрать одно значение из набора. Код элемента также не совсем обычен. Сначала создается элемент-контейнер select , ему задается атрибут name:

Внутрь контейнера помещаются элементы списка. Элемент списка представляет собой парный тег option , каждому элементу задается атрибут value. В тело элемента прописывается надпись элемента:

В HTTP-запросе передается параметр с именем name и значением value выбранного элемента, например town=vlad . По умолчанию выбран первый элемент списка, если хотите, чтобы был выбран другой элемент, задайте ему атрибут selected со значением selected :

Список значений. Если элементу select задать атрибут size с числовым значением, выпадающий список превратится в список значений. При этом значение атрибута size будет определять вертикальный размер элемента:

Москва Владивосток Новосибирск

Если элементу select задать атрибут multiple со значением multiple (стандарт XHTML), то появится возможность выбирать более одного элемента одновременно (например, с зажатой клавишей Ctrl). В этом случае в HTTP-запросе будут переданы все выбранные элементы с одинаковыми именами, например: town=msk&town=vlad&town=nsk .

Иногда необходимо в HTTP-запросе передать параметр, который пользователь не должен редактировать, а порой даже и видеть. Допустим, вы реализуете форму редактирования новости. В HTTP-запросе необходимо передавать идентификатор этой новости. Для подобных случаев есть скрытый элемент HTML-форм:

Этот элемент не будет виден на форме, но при выполнении запроса будет передан HTTP-параметр name=value.

Иногда может пригодиться элемент, очищающий форму. Кнопка, при нажатии на которую все введенные пользователем данные на форме стираются:

Перечисленные элементы имеют два специальных атрибута:

readonly="readonly" - запрещает изменение информации в элементе (режим "только для чтения);
disabled="disabled" - делает элемент неактивным.

Существует также элемент для выбора файла, который при сабмите формы будет загружен на веб-сервер, но об этом, пожалуй, в отдельной статье.

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://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <div class="form-wrap"> <div class="profile"><img src='https://i0.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> <p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://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> <i> </i> <p>В этой статье вы узнаете, <b>как создать форму регистрации и авторизации </b>, используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернета магазина и для социальных сетей (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.</p> <p>Если у Вас сайт на локальном компьютере, то я надеюсь, что у Вас уже . Без него ничего работать не будет.</p> <h2>Создание таблицы в Базе Данных</h2> <p>Для того чтобы реализовать регистрацию пользователей, в первую очередь нам нужна База Данных. Если она у Вас уже есть, то замечательно, иначе, Вам нужно её создавать. В статье , я подробно объясняю, как сделать это.</p> <p>И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу <i>users </i> в которой будем добавлять наших зарегистрированных пользователей.</p> <p>Как создавать таблицу в БД, я также объяснил в статье . Перед тем как создать таблицу, нам необходимо определить какие поля она будет содержать. Эти поля будут соответствовать полям из формы регистрации.</p> <p>Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу <i>users </i> с такими полями:</p> <ul><li><i>id </i> - Идентификатор. Поле <i>id </i> должно быть у каждой таблицы из БД.</li> <li><i>first_name </i> - Для сохранений имени.</li> <li><i>last_name </i> - Для сохранений фамилии.</li> <li><i>email </i> - Для сохранений почтового адреса. E-mail мы будем использовать в качестве логина, поэтому это поле должна быть уникальной, то есть иметь индекс UNIQUE.</li> <li><i>email_status </i> - Поле для указания, подтверждена ли почта или нет. Если почта подтверждена, то оно будет иметь значение 1, иначе значение 0. </li> <li><i>password </i> - Для сохранений пароля.</li> </ul><p> <br><img src='https://i0.wp.com/sozdatisite.ru/images/img-articles/struktura-tablicy-users.jpg' width="100%" loading=lazy></p> <p>Если Вы хотите чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.</p> <p>Всё, наша таблица <i>users </i> готова. Переходим к следующему этапу.</p> <h2>Подключение к Базе Данных</h2> <p>Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.</p> <p>В папке нашего сайта, создаём файл с именем <i>dbconnect.php </i>, и в нём пишем следующий скрипт:</p><p> <?php // Указываем кодировку header("Content-Type: text/html; charset=utf-8"); $server = "localhost"; /* имя хоста (уточняется у провайдера), если работаем на локальном сервере, то указываем localhost */ $username = "имя_пользователя_бд"; /* Имя пользователя БД */ $password = "пароль_пользователя_бд"; /* Пароль пользователя, если у пользователя нет пароля то, оставляем пустым */ $database = "имя_базы_данных"; /* Имя базы данных, которую создали */ // Подключение к базе данный через MySQLi $mysqli = new mysqli($server, $username, $password, $database); // Проверяем, успешность соединения. if (mysqli_connect_errno()) { echo "<p><strong>Ошибка подключения к БД</strong>. Описание ошибки: ".mysqli_connect_error()."</p>"; exit(); } // Устанавливаем кодировку подключения $mysqli->set_charset("utf8"); //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта $address_site = "http://testsite.local"; ?> </p><p>Этот файл <i>dbconnect.php </i> нужно будет подключить к обработчикам форм.</p> <p>Обратите внимание на переменную <i>$address_site </i>, здесь я указал название моего тестового сайта, над которым буду работать. Вы соответственно, укажите название Вашего сайта.</p> <h2>Структура сайта</h2> <p>Теперь давайте разберёмся с HTML структурой нашего сайта.</p> <p>Шапку и подвал сайта вынесем в отдельные файлы, <i>header.php </i> и <i>footer.php </i>. Их будем подключать на всех страницах. А именно на главной (файл <i>index.php </i>), на страницу с формой регистрации (файл <i>form_register.php </i>) и на страницу с формой авторизации (файл <i>form_auth.php </i>).</p> <p>Блок с нашими ссылками, <i>регистрация </i> и <i>авторизация </i>, добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на <b>страницу с формой регистрации </b> (файл <i>form_register.php </i>) а другая на страницу с <b>формой авторизации </b> (файл <i>form_auth.php </i>).</p> <p>Содержимое файла header.php:</p><p> <?php //Запускаем сессию session_start(); ?> <!DOCTYPE html> <html> <head> Название нашего сайта <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> </p><p>В итоге, главная страница, у нас выглядит так:</p> <p> <br><img src='https://i2.wp.com/sozdatisite.ru/images/img-articles/vid-glavnoj-stranicy.jpg' width="100%" loading=lazy></p> <p>Конечно, у Вас на сайте может быть совсем другая структура, но это для нас сейчас не важно. Главное, чтобы присутствовали ссылки (кнопки) регистрации и авторизации.</p> <h2></h2> <p>Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле <i>form_register.php </i>.</p> <p>Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы <i>users </i> и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.</p> <p>На сервере, в результате обработки формы регистрации, могут возникнуть различные ошибки, из-за которых пользователь не сможет зарегистрироваться. Поэтому для того чтобы пользователь понимал почему не проходит регистрация, необходимо вывести ему сообщения об этих ошибках.</p> <p>Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.</p> <p>И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера <i>адрес_сайта/form_register.php </i>, то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.</p> <p>В общем, код файла <i>form_register.php </i> у нас получился таким:</p><p> <?php //Подключение шапки require_once("header.php"); ?> </p><p> <?php //Если в сессии существуют сообщения об ошибках, то выводим их if(isset($_SESSION["error_messages"]) && !empty($_SESSION["error_messages"])){ echo $_SESSION["error_messages"]; //Уничтожаем чтобы не выводились заново при обновлении страницы unset($_SESSION["error_messages"]); } //Если в сессии существуют радостные сообщения, то выводим их if(isset($_SESSION["success_messages"]) && !empty($_SESSION["success_messages"])){ echo $_SESSION["success_messages"]; //Уничтожаем чтобы не выводились заново при обновлении страницы unset($_SESSION["success_messages"]); } ?></p><p> <?php //Проверяем, если пользователь не авторизован, то выводим форму регистрации, //иначе выводим сообщение о том, что он уже зарегистрирован if(!isset($_SESSION["email"]) && !isset($_SESSION["password"])){ ?> </p><p> <?php }else{ ?> </p><h2>Вы уже зарегистрированы</h2><p> <?php } //Подключение подвала require_once("footer.php"); ?> </p><p>В браузере, страница с формой регистрации выглядит так:</p> <p> <br><img src='https://i1.wp.com/sozdatisite.ru/images/img-articles/forma-registracii.jpg' width="100%" loading=lazy></p> <p>С помощью <b>атрибута required </b>, мы сделали все поля обязательными к заполнению.</p> <p>Обратите внимание на код формы регистрации где <b>выводится капча </b>:</p><p> <img src='https://i2.wp.com/captcha.php' loading=lazy> <br></p><p>Мы в значение атрибута src для изображения, указали путь к файлу <i>captcha.php </i>, который генерирует данную капчу.</p> <p>Посмотрим на код файла <i>captcha.php </i>:</p><p> <?php session_start(); // Генерируем случайное число. $rand = mt_rand(1000, 9999); // Сохраняем значение переменной $rand (капчи) в сессию $_SESSION["rand"] = $rand; //создаём новое черно-белое изображение $im = imageCreateTrueColor(90,50); // Указываем белый цвет для текста $c = imageColorAllocate($im, 255, 255, 255); // Записываем полученное случайное число на изображение imageTtfText($im, 20, -10, 10, 30, $c, "fonts/verdana.ttf", $rand); header("Content-type: image/png"); // Выводим изображение imagePng($im); //Освобождаем ресурсы imageDestroy($im); ?> </p><p>Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.</p> <p>Внутри функции <i>imageTtfText() </i>, указан путь к шрифту <i>verdana.ttf </i>. Так вот для корректной работы капчи, мы должны создать папку <i>fonts </i>, и поместить туда файл шрифта <i>verdana.ttf </i>. Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи .</p> <p>С HTML структурой мы закончили, пора двигаться дальше.</p> <h2>Проверка email на валидность с помощью jQuery</h2> <p>Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента (с помощью JavaScript, jQuery), так и на стороне сервера.</p> <p>Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.</p> <p>Для данного поля input, мы задали тип email (type="email"), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута <i>type </i> с <i>email </i> на <i>text </i>, и всё, наша проверка будет уже недействительна.</p> <p> <br><img src='https://i1.wp.com/sozdatisite.ru/images/img-articles/tip-polya-email.jpg' width="100%" loading=lazy></p> <p>И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.</p> <p>Для подключения библиотеки jQuery, в файле <i>header.php </i>между тегами <i><head></head> </i>, перед закрывающего тега <i></head> </i>, добавляем эту строчку:</p> <p>Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.</p> <p>С помощью данного скрипта, мы проверяем введённого почтового адреса на валидность. Если пользователь ввёл неправильный Email, то мы выводим ему ошибку об этом и дезактивируем кнопку отправки формы. Если всё хорошо, то мы убираем ошибку и активируем кнопку отправки формы.</p> <p>И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.</p> <h2>Регистрация пользователя</h2> <p>Форму мы отправляем на обработку файлу <i>register.php </i>, через метод POST. Название данного файла обработчика, указано в значение атрибута <i>action </i>. А метод отправки указано в значение атрибута <i>method </i>.</p> <p>Открываем этот файл <i>register.php </i> и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл <i>dbconnect.php </i> (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки <i>error_messages </i> и <i>success_messages </i> в глобальном массиве сессии. В <i>error_mesages </i> будем записывать все сообщения об ошибках возникающие при обработке формы, а в <i>succes_messages </i>, будем записывать радостные сообщения.</p><p> <?php //Запускаем сессию session_start(); //Добавляем файл подключения к БД require_once("dbconnect.php"); //Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы. $_SESSION["error_messages"] = ""; //Объявляем ячейку для добавления успешных сообщений $_SESSION["success_messages"] = ""; ?> </p><p>Перед тем как продолжить, мы должны проверить, <b>была ли вообще отправлена форма </b>. Злоумышленник, может посмотреть на значение атрибута <i>action </i> из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: <i>http://арес_сайта/register.php </i></p> <p>Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки "Зарегистрироваться" из формы. Таким образом мы проверяем была ли нажата кнопка "Зарегистрироваться" или нет.</p> <p>Если злоумышленник попытается перейти напрямую в этот файл, то он получить сообщение об ошибке. Напоминаю, что переменная $address_site содержит название сайта и оно было объявлено в файле <i>dbconnect.php </i>.</p><p> <?php /* Проверяем была ли отправлена форма, то есть была ли нажата кнопка зарегистрироваться. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую. */ if(isset($_POST["btn_submit_register"]) && !empty($_POST["btn_submit_register"])){ // (1) Место для следующего куска кода }else{ exit("<p><strong>Ошибка!</strong> главную страницу .</p>"); } ?> </p> <p>Значение капчи в сессии было добавлено при её генерации, в файле <i>captcha.php </i>. Для напоминания покажу ещё раз этот кусок кода из файла <i>captcha.php </i>, где добавляется значение капчи в сессию:</p><p> <?php session_start(); // Генерируем случайное число. $rand = mt_rand(1000, 9999); // Сохраняем значение переменной $rand (капчи) в сессию $_SESSION["rand"] = $rand; ?> </p><p>Теперь приступим к самой проверке. В файле <i>register.php </i>, внутри блока if, где проверяем была ли нажата кнопка "Зарегистрироваться", а точнее где указан комментарий "<i> // (1) Место для следующего куска кода </i>" пишем:</p><p> //Проверяем полученную капчу //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу регистрации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "<p class="mesage_error"><strong>Ошибка!</strong> Вы ввели неправильную капчу </p>"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (2) Место для следующего куска кода }else{ //Если капча не передана либо оно является пустой exit("<p><strong>Ошибка!</strong> Отсутствует проверечный код, то есть код капчи. Вы можете перейти на главную страницу .</p>"); } </p><p>Далее, нам нужно обрабатывать полученные данные, из массива POST. Первым делом, нам нужно проверить содержимое глобального массива POST, то есть находится ли там ячейки, имена которых соответствуют именам полей input из нашей формы.</p> <p>Если ячейка существует, то обрезаем пробелы с начала и с конца строки из этой ячейки, иначе, перенаправляем пользователя обратно на страницу с формой регистрации.</p> <p>Далее, после того как обрезали пробелы, добавляем строку в переменную и проверяем эту переменную на пустоту, если она не является пустой, то идём дальше, иначе перенаправляем пользователя обратно на страницу с формой регистрации.</p> <p>Этот код вставляем в указанное место "<i>// (2) Место для следующего куска кода </i>".</p><p> /* Проверяем если в глобальном массиве $_POST существуют данные отправленные из формы и заключаем переданные данные в обычные переменные.*/ if(isset($_POST["first_name"])){ //Обрезаем пробелы с начала и с конца строки $first_name = trim($_POST["first_name"]); //Проверяем переменную на пустоту if(!empty($first_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $first_name = htmlspecialchars($first_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Ваше имя</p><p class="mesage_error">Отсутствует поле с именем</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["last_name"])){ //Обрезаем пробелы с начала и с конца строки $last_name = trim($_POST["last_name"]); if(!empty($last_name)){ // Для безопасности, преобразуем специальные символы в HTML-сущности $last_name = htmlspecialchars($last_name, ENT_QUOTES); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Вашу фамилию</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Отсутствует поле с фамилией</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["email"])){ //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); // (3) Место кода для проверки формата почтового адреса и его уникальности }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Ваш email</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error"></p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } if(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем папроль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error">Укажите Ваш пароль</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error"></p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } // (4) Место для кода добавления пользователя в БД </p><p>Особенную важность имеет поле <i>email </i>. Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.</p> <p>В указанном месте "<i>// (3) Место кода для проверки формата почтового адреса и его уникальности </i>" добавляем следующий код:</p><p> //Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Вы ввели неправельный email</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } //Проверяем нет ли уже такого адреса в БД. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //Если кол-во полученных строк ровно единице, значит пользователь с таким почтовым адресом уже зарегистрирован if($result_query->num_rows == 1){ //Если полученный результат не равен false if(($row = $result_query->fetch_assoc()) != false){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Пользователь с таким почтовым адресом уже зарегистрирован</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Ошибка в запросе к БД</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); } /* закрытие выборки */ $result_query->close(); //Останавливаем скрипт exit(); } /* закрытие выборки */ $result_query->close(); </p><p>И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте " <i>// (4) Место для кода добавления пользователя в БД </i>" добавляем следующий код:</p><p> //Запрос на добавления пользователя в БД $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name."", "".$email."", "".$password."")"); if(!$result_query_insert){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Ошибка запроса на добавления пользователя в БД</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); }else{ $_SESSION["success_messages"] = "<p class="success_message">Регистрация прошла успешно!!! <br />Теперь Вы можете авторизоваться используя Ваш логин и пароль.</p>"; //Отправляем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); } /* Завершение запроса */ $result_query_insert->close(); //Закрываем подключение к БД $mysqli->close(); </p><p>Если в запросе на добавления пользователя в БД произошла ошибка, мы добавляем сообщение об этой ошибке в сессию и возвращаем пользователя на страницу регистрации.</p> <p>Иначе, если все прошло хорошо, в сессию мы также добавляем сообщение, но уже более приятна, а именно говорим пользователю что регистрация прошла успешно. И перенаправляем его уже на страницу с формой авторизации.</p> <h2></h2> <p>Скрипт для проверки формата почтового адреса и длины пароля находится в файле <i>header.php </i>, поэтому он будет действовать и на поля из этой формы.</p> <p>Запуск сессии также происходит в файле <i>header.php </i>, поэтому в файле <i>form_auth.php </i> сессию запускать не нужно, потому что получим ошибку.</p> <p> <?php //Подключение шапки require_once("header.php"); ?> </p><p> <?php if(isset($_SESSION["error_messages"]) && !empty($_SESSION["error_messages"])){ echo $_SESSION["error_messages"]; //Уничтожаем чтобы не появилось заново при обновлении страницы unset($_SESSION["error_messages"]); } if(isset($_SESSION["success_messages"]) && !empty($_SESSION["success_messages"])){ echo $_SESSION["success_messages"]; //Уничтожаем чтобы не появилось заново при обновлении страницы unset($_SESSION["success_messages"]); } ?></p><p> <?php //Проверяем, если пользователь не авторизован, то выводим форму авторизации, //иначе выводим сообщение о том, что он уже авторизован if(!isset($_SESSION["email"]) && !isset($_SESSION["password"])){ ?> </p> <p> <br><img src='https://i0.wp.com/sozdatisite.ru/images/img-articles/forma-avtorizacii.jpg' width="100%" loading=lazy></p> <p>Как я уже сказал, скрипт проверки формата почтового адреса и длины пароля здесь также действует. Поэтому если пользователь введёт неправильный почтовый адрес или короткий пароль, то он сразу же получить сообщение об ошибке. А кнопка <i>войти </i> станет не активной.</p> <p> <img src='https://i2.wp.com/sozdatisite.ru/images/img-articles/proverka-formy-avtorizacii.jpg' height="356" width="358" loading=lazy></p> <p>После устранения ошибок кнопка <i>войти </i> становится активной, и пользователь сможет отправить форму на сервер, где она будет обрабатываться.</p> <h2>Авторизация пользователя</h2> <p>В значение атрибута <i>action </i> у форы авторизации указан файл <i>auth.php </i>, это значит, что форма будет обрабатываться именно в этом файле.</p> <p>И так, открываем файл <i>auth.php </i> и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл <i>dbconnect.php </i> для соединения с БД.</p><p> <?php //Запускаем сессию session_start(); //Добавляем файл подключения к БД require_once("dbconnect.php"); </p><p> //Объявляем ячейку для добавления ошибок, которые могут возникнуть при обработке формы. $_SESSION["error_messages"] = ""; //Объявляем ячейку для добавления успешных сообщений $_SESSION["success_messages"] = ""; </p><p> /* Проверяем была ли отправлена форма, то есть была ли нажата кнопка Войти. Если да, то идём дальше, если нет, то выведем пользователю сообщение об ошибке, о том что он зашёл на эту страницу напрямую. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"])){ //(1) Место для следующего куска кода }else{ exit("<p><strong>Ошибка!</strong> Вы зашли на эту страницу напрямую, поэтому нет данных для обработки. Вы можете перейти на главную страницу .</p>"); } </p><p> //Проверяем полученную капчу if(isset($_POST["captcha"])){ //Обрезаем пробелы с начала и с конца строки $captcha = trim($_POST["captcha"]); if(!empty($captcha)){ //Сравниваем полученное значение с значением из сессии. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")){ // Если капча не верна, то возвращаем пользователя на страницу авторизации, и там выведем ему сообщение об ошибке что он ввёл неправильную капчу. $error_message = "<p class="mesage_error"><strong>Ошибка!</strong> Вы ввели неправильную капчу </p>"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ $error_message = "<p class="mesage_error"><strong>Ошибка!</strong> Поле для ввода капчи не должна быть пустой. </p>"; // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] = $error_message; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } //(2) Место для обработки почтового адреса //(3) Место для обработки пароля //(4) Место для составления запроса к БД }else{ //Если капча не передана exit("<p><strong>Ошибка!</strong> Отсутствует проверочный код, то есть код капчи. Вы можете перейти на главную страницу .</p>"); } </p><p>Если пользователь ввёл проверочный код правильно, то идём дальше, иначе возвращаем его на страницу авторизации.</p> <h3>Проверка почтового адреса</h3> <p> //Обрезаем пробелы с начала и с конца строки $email = trim($_POST["email"]); if(isset($_POST["email"])){ if(!empty($email)){ $email = htmlspecialchars($email, ENT_QUOTES); //Проверяем формат полученного почтового адреса с помощью регулярного выражения $reg_email = "/^**@(+(*+)*\.)++/i"; //Если формат полученного почтового адреса не соответствует регулярному выражению if(!preg_match($reg_email, $email)){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Вы ввели неправильный email</p>"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Поле для ввода почтового адреса(email) не должна быть пустой.</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Отсутствует поле для ввода Email</p>"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } //(3) Место для обработки пароля </p><p>Если пользователь ввёл почтовый адрес в неправильном формате или значение поля почтового адреса является пустой, то мы возвращаем его на страницу авторизации где выводим ему сообщение об этом.</p> <h3>Проверка пароля</h3> <p>Следующее поле для обработки, это поле с паролем. В указанное место "<i>//(3) Место для обработки пароля </i>", пишем:</p><p>If(isset($_POST["password"])){ //Обрезаем пробелы с начала и с конца строки $password = trim($_POST["password"]); if(!empty($password)){ $password = htmlspecialchars($password, ENT_QUOTES); //Шифруем пароль $password = md5($password."top_secret"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Укажите Ваш пароль</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Отсутствует поле для ввода пароля</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } </p><p>Здесь мы с помощью функции md5() шифруем полученный пароль, так как в БД пароли у нас находятся именно в зашифрованном виде. Дополнительное секретное слово в шифровании, в нашем случае "<i>top_secret </i>" должна быть та которая использовалась и при регистрации пользователя.</p> <p>Теперь необходимо сделать запрос к БД на выборке пользователя у которого почтовый адрес равен полученному почтовому адресу и пароль равен полученному паролю.</p><p> //Запрос в БД на выборке пользователя. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select){ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Ошибка запроса на выборке пользователя из БД</p>"; //Возвращаем пользователя на страницу регистрации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); }else{ //Проверяем, если в базе нет пользователя с такими данными, то выводим сообщение об ошибке if($result_query_select->num_rows == 1){ // Если введенные данные совпадают с данными из базы, то сохраняем логин и пароль в массив сессий. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Возвращаем пользователя на главную страницу header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/index.php"); }else{ // Сохраняем в сессию сообщение об ошибке. $_SESSION["error_messages"] .= "<p class="mesage_error" >Неправильный логин и/или пароль</p>"; //Возвращаем пользователя на страницу авторизации header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Останавливаем скрипт exit(); } } </p><h2>Выход с сайта</h2> <p>И последнее что мы реализуем, это <b>процедура выхода с сайта </b>. На данный момент в шапке у нас выводятся ссылки на страницу авторизации и на страницу регистрации.</p> <p>В шапке сайта (файл <i>header.php </i>), с помощью сессии мы проверяем, авторизован ли уже пользователь. Если нет, то выводим ссылки регистрации и авторизации, в противном случае (если он авторизован) то вместо ссылок регистрации и авторизации выводим ссылку <i>Выход </i>.</p> <p>Модифицированный кусок кода из файла <i>header.php </i>:</p> <p> Регистрация</p> <p> Выход</p><p> <?php } ?></p> <p>При нажатии на ссылку выхода с сайта, мы попадаем в файл <i>logout.php </i>, где просто уничтожаем ячейки с почтовым адресом и паролем из сессии. После этого возвращаем пользователя обратно на ту страницу, на которой была нажата ссылка <i>выход </i>.</p> <p>Код файла <i>logout.php: </i></p><p> <?php //Запускаем сессию session_start(); unset($_SESSION["email"]); unset($_SESSION["password"]); // Возвращаем пользователя на ту страницу, на которой он нажал на кнопку выход. header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$_SERVER["HTTP_REFERER"]); ?> </p><p>На этом всё. Теперь Вы знаете как <b>реализовать и обрабатывать формы регистрации и авторизации </b> пользователя на своём сайте. Эти формы встречаются почти на каждом сайте, поэтому каждый программист должен знать, как их создавать.</p> <p>Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery) так и на стороне сервера (с помощью языка PHP). Также мы научились <b>реализовать процедуру выхода с сайта </b>.</p> <p>Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке .</p> <p>В будущем я напишу статью где опишу . И ещё планирую написать статью где объясню, (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.</p> <p>При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.</p><p>План урока (Часть 5): </p><ol><li>Создаем HTML структуру для формы авторизации</li> <li>Обрабатываем полученные данные</li> <li>Выводим приветствие пользователя в шапку сайта</li> </ol><h3>Понравилась статья?</h3> <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 style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div> </article> <div class='yarpp-related'> <div class="related-posts-title">Похожие публикации:</div> <ul class="related-items"> <li> <img src="/uploads/3893facae09b93ebaf11e35ff6673614.jpg" width="180" height="160" alt="Как заработать на WebMoney?" loading=lazy> <a href='/browsers/kak-zarabotat-elektronnye-dengi-na-webmoney-kak-zarabotat-na/' class='related-item__title'>Как заработать на WebMoney?</a> </li> <li> <img src="/uploads/f29a28334ec2a77d9bd33510b281b118.jpg" width="180" height="160" alt="Как добавить визуальные закладки Яндекс в свежие версии Mozilla Firefox…" loading=lazy> <a href='/excel/propala-knopka-domoi-v-mozile-kak-dobavit-vizualnye-zakladki-yandeks-v/' class='related-item__title'>Как добавить визуальные закладки Яндекс в свежие версии Mozilla Firefox…</a> </li> <li> <img src="/uploads/982ed5314bba0f393eb47fd03571df9b.jpg" width="180" height="160" alt="Самостоятельная озвучка: программы для чтения текста голосом" loading=lazy> <a href='/browsers/zhenskii-sintezator-rechi-onlain-samostoyatelnaya-ozvuchka/' class='related-item__title'>Самостоятельная озвучка: программы для чтения текста голосом</a> </li> <li> <img src="/uploads/e9f17315d355f61fd53529451106acc2.jpg" width="180" height="160" alt="Отключение рут доступа на смартфонах Meizu" loading=lazy> <a href='/word/poluchenie-rut-prav-na-flyme-6-otklyuchenie-rut-dostupa-na-smartfonah-meizu-stiranie-rut/' class='related-item__title'>Отключение рут доступа на смартфонах Meizu</a> </li> </ul> </div> <style> .nafAdaptMedia { width: 100%; height: 300px; } @media(min-width: 500px) { .nafAdaptMedia { width: 100%; height: 300px; } } @media(min-width: 800px) { .nafAdaptMedia { width: 100%; height: 300px; } } </style> <style> .nafAdaptText { width: 100%; height: 300px; } @media(min-width: 500px) { .nafAdaptText { width: 100%; height: 300px; } } @media(min-width: 800px) { .nafAdaptText { width: 100%; height: 300px; } } </style> </div>  <div id="rightColomn"> <div class="title">Категории</div> <aside> <ul id="asidemenu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/programs/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Программы</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/windows/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Windows</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/browsers/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Браузеры</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/word/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Word</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/excel/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Excel</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/payment-systems/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Платежные системы</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/download-software/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Скачать софт</span></a></li> </ul> </aside> <div class="banner" id="text-4"> <div class="textwidget"> </div> </div> </div> </div> </div> <div class="hfooter"></div> </div> <footer> <div class="container"> <ul> <li><a href='/sitemap.xml'>Карта сайта</a></li> </ul> <div class="copy"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=leally.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a>© 2024, leally.ru - Твой гид в мире компьютера и интернета </div> </div> </footer> <script type="text/javascript"> jQuery(document).ready(function(){ var q2w3_sidebar_1_options = { "sidebar" : "banner", "margin_top" : 10, "margin_bottom" : 0, "screen_max_width" : 0, "width_inherit" : false, "widgets" : ['text-4'] } ; q2w3_sidebar(q2w3_sidebar_1_options); setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); } , 1500); } ); </script> <script type='text/javascript' src='https://leally.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.1.10'></script> <script type='text/javascript' src='https://leally.ru/wp-content/plugins/fitvids-for-wordpress/jquery.fitvids.js?ver=1.1'></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('body').fitVids(); } ); </script><script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> </body> </html>