{"id":1345,"date":"2022-11-28T09:00:17","date_gmt":"2022-11-28T01:00:17","guid":{"rendered":"https:\/\/hostscripter.com\/?p=1345"},"modified":"2022-11-28T09:00:17","modified_gmt":"2022-11-28T01:00:17","slug":"part-2-create-your-own-registration-system-using-php-and-mysql","status":"publish","type":"post","link":"https:\/\/hostscripter.com\/?p=1345","title":{"rendered":"Part 2: Create your own Registration System using PHP and MySql"},"content":{"rendered":"<h2 id=\"creatingtheregistrationformdesign\">2. Creating the Registration Form Design<\/h2>\n<p>The registration form will be used by our websites visitors. They can use it to input their account information. We&#8217;ll be creating the registration form with HTML and CSS.<\/p>\n<p>Edit the\u00a0<i>register.html<\/i>\u00a0file and add the following code:<\/p>\n<div class=\"code-header\"><\/div>\n<pre class=\" language-html\"><code class=\" language-html\"><span class=\"token doctype\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>utf-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>Register<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/use.fontawesome.com\/releases\/v5.7.1\/css\/all.css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>register<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>Register<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form <span class=\"token attr-name\">action<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>register.php<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">method<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>post<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">autocomplete<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>off<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>username<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>i <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>fas fa-user<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>i<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>username<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">placeholder<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Username<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>username<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">required<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>i <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>fas fa-lock<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>i<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">placeholder<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">required<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>email<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>i <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>fas fa-envelope<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>i<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>email<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>email<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">placeholder<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Email<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>email<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">required<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>submit<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Register<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>form<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>Navigate to\u00a0<i>http:\/\/localhost\/phplogin\/register.html<\/i>, our registration form will look like the following:<\/p>\n<div class=\"browser\">\n<div><span class=\"url\">http:\/\/localhost\/phplogin\/register.html<\/span><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/phplogin\/basic-html-registration-form-layout.png?resize=750%2C489&#038;ssl=1\" alt=\"Basic HTML Registration Form Layout\" width=\"750\" height=\"489\" data-recalc-dims=\"1\" \/><\/div>\n<p>Pretty basic for a registration form, now let&#8217;s add some CSS, edit the\u00a0<i>style.css<\/i>\u00a0file and add the following:<\/p>\n<div class=\"code-header\"><\/div>\n<pre class=\" language-css\"><code class=\" language-css\"><span class=\"token selector\">* <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> -apple-system, BlinkMacSystemFont, <span class=\"token string\">\"segoe ui\"<\/span>, roboto, oxygen, ubuntu, cantarell, <span class=\"token string\">\"fira sans\"<\/span>, <span class=\"token string\">\"droid sans\"<\/span>, <span class=\"token string\">\"helvetica neue\"<\/span>, Arial, sans-serif<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">16<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">-webkit-font-smoothing<\/span><span class=\"token punctuation\">:<\/span> antialiased<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">-moz-osx-font-smoothing<\/span><span class=\"token punctuation\">:<\/span> grayscale<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">body <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#435165<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">400<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#ffffff<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token number\">0<\/span> <span class=\"token number\">9<\/span>px <span class=\"token number\">0<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span>, <span class=\"token number\">0<\/span>, <span class=\"token number\">0<\/span>, <span class=\"token number\">0.3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">100<\/span>px auto<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> h1 <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#5b6574<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">24<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span>px <span class=\"token number\">0<\/span> <span class=\"token number\">20<\/span>px <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">border-bottom<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span>px solid <span class=\"token hexcode\">#dee0e4<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> form <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">flex-wrap<\/span><span class=\"token punctuation\">:<\/span> wrap<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">padding-top<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span>px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> form label <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">50<\/span>px<span class=\"token punctuation\">;<\/span>\r\n \t<span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">50<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#3274d6<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#ffffff<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> form input<span class=\"token attribute\">[type=\"password\"]<\/span>, <span class=\"token class\">.register<\/span> form input<span class=\"token attribute\">[type=\"text\"]<\/span>, <span class=\"token class\">.register<\/span> form input<span class=\"token attribute\">[type=\"email\"]<\/span> <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">310<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">50<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">1<\/span>px solid <span class=\"token hexcode\">#dee0e4<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token number\">15<\/span>px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> form input<span class=\"token attribute\">[type=\"submit\"]<\/span> <\/span><span class=\"token punctuation\">{<\/span>\r\n  \t<span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">100%<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">15<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">margin-top<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">20<\/span>px<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#3274d6<\/span><span class=\"token punctuation\">;<\/span>\r\n \t<span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> bold<span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#ffffff<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color <span class=\"token number\">0.2<\/span>s<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\"><span class=\"token class\">.register<\/span> form input<span class=\"token attribute\">[type=\"submit\"]<\/span><span class=\"token pseudo-class\">:hover<\/span> <\/span><span class=\"token punctuation\">{<\/span>\r\n\t<span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token hexcode\">#2868c7<\/span><span class=\"token punctuation\">;<\/span>\r\n  \t<span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color <span class=\"token number\">0.2<\/span>s<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p>We need to include our stylesheet in our\u00a0<i>register.html<\/i>\u00a0file, copy and paste the following code to the head section:<\/p>\n<div class=\"code-header\"><\/div>\n<pre class=\" language-html\"><code class=\" language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>style.css<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>text\/css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>And now our registration form will look more appealing:<\/p>\n<div class=\"browser\">\n<div><span class=\"url\">http:\/\/localhost\/phplogin\/register.html<\/span><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/phplogin\/awesome-html-registration-form-layout.png?resize=750%2C489&#038;ssl=1\" alt=\"Awesome HTML Registration Form Layout\" width=\"750\" height=\"489\" data-recalc-dims=\"1\" \/><\/div>\n<p>Let&#8217;s narrow down the form so we can get a better understanding on what&#8217;s going on.<\/p>\n<ul>\n<li><b>Form<\/b>\u00a0\u2014 we need to use both the\u00a0<i class=\"hl\">action<\/i>\u00a0and\u00a0<i class=\"hl\">post<\/i>\u00a0attributes, the\u00a0<i class=\"hl\">action<\/i>\u00a0attribute will be set to the registration file. When the form is submitted, the form data will be sent to the registration file for processing. The\u00a0<i class=\"hl\">method<\/i>\u00a0is to\u00a0<i class=\"hl\">post<\/i>, this will allow us to process the form data.\n<ul>\n<li><b>Input (text\/password\/email)<\/b>\u00a0\u2014 We need to name our form fields so the server can recognize them, so if we set the value of the attribute\u00a0<i class=\"hl\">name<\/i>\u00a0to the\u00a0<i class=\"hl\">username<\/i>, we can use the post variable in our registration file to get the data, like this:\u00a0<i class=\"hl\">$_POST[&#8216;username&#8217;]<\/i>.<\/li>\n<li><b>Input (submit)<\/b>\u00a0\u2014 On click the form data will be sent to our registration file.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>That&#8217;s basically all we need to do on the client-side, next step is to set-up the database and create the registration file with PHP.<\/p>\n<div data-counters='false' data-style='square' data-size='small' data-url='https:\/\/hostscripter.com\/?p=1345' data-title='Part 2: Create your own Registration System using PHP and MySql' class='linksalpha_container linksalpha_app_3'><a href='\/\/www.linksalpha.com\/share?network='facebook' class='linksalpha_icon_facebook'><\/a><a href='\/\/www.linksalpha.com\/share?network='twitter' class='linksalpha_icon_twitter'><\/a><a href='\/\/www.linksalpha.com\/share?network='googleplus' class='linksalpha_icon_googleplus'><\/a><a href='\/\/www.linksalpha.com\/share?network='mail' class='linksalpha_icon_mail'><\/a><\/div><div data-position='' data-url='https:\/\/hostscripter.com\/?p=1345' data-title='Part 2: Create your own Registration System using PHP and MySql' class='linksalpha_container linksalpha_app_7'><a href='\/\/www.linksalpha.com\/share?network='facebook' class='linksalpha_icon_facebook'><\/a><a href='\/\/www.linksalpha.com\/share?network='twitter' class='linksalpha_icon_twitter'><\/a><a href='\/\/www.linksalpha.com\/share?network='googleplus' class='linksalpha_icon_googleplus'><\/a><a href='\/\/www.linksalpha.com\/share?network='mail' class='linksalpha_icon_mail'><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>2. Creating the Registration Form Design The registration form will be used by our websites visitors. They can use it to input their account information. We&#8217;ll be creating the registration [&hellip;]<\/p>\n","protected":false},"author":301,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[4],"tags":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9KaPo-lH","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1343,"url":"https:\/\/hostscripter.com\/?p=1343","url_meta":{"origin":1345,"position":0},"title":"Part 1: Create your own Registration System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"This tutorial is a follow up to our previous tutorial\u00a0Secure Login System with PHP and MySQL. In this tutorial, we'll be creating a secure registration form and implementing basic validation. A registration form is what your website's visitors can use to register their details, which will subsequently be stored in\u2026","rel":"","context":"In &quot;Blog&quot;","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"Secure Registration System with PHP and MySQL","src":"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-registration-system-php-mysql.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-registration-system-php-mysql.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-registration-system-php-mysql.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/codeshack.io\/web\/img\/posts\/secure-registration-system-php-mysql.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1349,"url":"https:\/\/hostscripter.com\/?p=1349","url_meta":{"origin":1345,"position":1},"title":"Part 4: Create your own Registration System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"4. Registering Users with PHP & MySQL Now we need to create the registration file that will process the form fields, check for basic validation, and insert the new account into our database. The registration page will require a connection to our database and therefore we must include the necessary\u2026","rel":"","context":"In &quot;Blog&quot;","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1341,"url":"https:\/\/hostscripter.com\/?p=1341","url_meta":{"origin":1345,"position":2},"title":"Part 7: Create your own Login System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"7. Creating the Logout Script Creating the logout script is straightforward. All you need to do is destroy the sessions that were declared in the authenticate file. Edit the\u00a0logout.php\u00a0file and add the following code: <?php session_start(); session_destroy(); \/\/ Redirect to the login page: header('Location: index.html'); ?> Initialize sessions, destroy them,\u2026","rel":"","context":"In &quot;Blog&quot;","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1352,"url":"https:\/\/hostscripter.com\/?p=1352","url_meta":{"origin":1345,"position":3},"title":"Part 5: Create your own Registration System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"5. Validating Form Data We already have basic validation in our PHP script but what if we want to check if the email is actually an email or if the username and password should be a certain amount of characters long, you can do that with the codes below, add\u2026","rel":"","context":"In &quot;Blog&quot;","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1354,"url":"https:\/\/hostscripter.com\/?p=1354","url_meta":{"origin":1345,"position":4},"title":"Part 6: Create your own Registration System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"6. Implementing Account Activation The account activation system will send an email to the user with the activation link when the user has registered. The first thing we need to do is to go into\u00a0phpMyAdmin\u00a0and select our database, in our case this would be\u00a0phplogin, you can either add the column\u00a0activation_code\u00a0to\u2026","rel":"","context":"In &quot;Blog&quot;","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1347,"url":"https:\/\/hostscripter.com\/?p=1347","url_meta":{"origin":1345,"position":5},"title":"Part 3: Create your own Registration System using PHP and MySql","author":"h05t5cr1pt3r","date":"November 28, 2022","format":false,"excerpt":"3. Creating the Database and setting-up Tables You can skip this step if you followed the\u00a0Secure Login System Tutorial. For this part, you will need to access your MySQL database, either using\u00a0phpMyAdmin\u00a0or your preferred MySQL database management application. If you're using\u00a0phpMyAdmin\u00a0then follow these instructions: Navigate to:\u00a0http:\/\/localhost\/phpmyadmin\/ Click the\u00a0Databases\u00a0tab at the\u2026","rel":"","context":"In &quot;Blog&quot;","block_context":{"text":"Blog","link":"https:\/\/hostscripter.com\/?cat=4"},"img":{"alt_text":"phpMyAdmin Accounts Table","src":"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/phplogin\/phpmyadmin-accounts-table.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/codeshack.io\/web\/img\/phplogin\/phpmyadmin-accounts-table.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/codeshack.io\/web\/img\/phplogin\/phpmyadmin-accounts-table.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/codeshack.io\/web\/img\/phplogin\/phpmyadmin-accounts-table.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/hostscripter.com\/index.php?rest_route=\/wp\/v2\/posts\/1345"}],"collection":[{"href":"https:\/\/hostscripter.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hostscripter.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hostscripter.com\/index.php?rest_route=\/wp\/v2\/users\/301"}],"replies":[{"embeddable":true,"href":"https:\/\/hostscripter.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1345"}],"version-history":[{"count":1,"href":"https:\/\/hostscripter.com\/index.php?rest_route=\/wp\/v2\/posts\/1345\/revisions"}],"predecessor-version":[{"id":1346,"href":"https:\/\/hostscripter.com\/index.php?rest_route=\/wp\/v2\/posts\/1345\/revisions\/1346"}],"wp:attachment":[{"href":"https:\/\/hostscripter.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hostscripter.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hostscripter.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}