home / Business/ Majestic users registration form html. Creating a custom user registration form on WordPress

Great users registration form html. Creating a custom user registration form on WordPress

This tutorial will show you how to make changes to the registration page in Joomla 3.x.

Changing registration form field names

To change the field names of the registration form, follow these instructions:

To make changes to the registration form fields, make changes to the en-GB.com_users.ini file located in the language/en-GB folder on your server. Use the command CTRL+F, to find the text you want to change. You can change the following field names in the en-GB.com_users.ini file:

Required fields

(Required field)

Name

Username

Password confirmation
(Confirm Password)
E-mail address
Email address confirmations
(Confirm email Address)
not necessary

Edit the en-GB.plg_user_profile.ini file located in the administrator/language/en-GB folder on your server to change the following headers:

Address 1

Address 2 (Address2)

City

Region

Country

Postal code (Postal / ZIP Code)

Phone

Website

Favorite Book

About Me

The entered date of birth must be in the Year-Month-Day format, for example: 0000-00-00

Date of Birth

To change the names of the “Registration” and “Cancel” buttons, edit the en-GB.ini file from the language/en-GB folder of your server.

Removing fields from the registration form

In order to disable any of the fields on your registration form, you need to do the following:

Adding new fields to the registration form

In order to add new fields to the registration form, you need to make changes to both the template files and the database. You need to make the following changes to the database:

In order for the new field to be displayed on your site, make changes to the following files:

Make changes to the user.php file from the libraries/joomla/user folder. Find the field code after which the new field should be added:

Public $name = null;

Add the code for the new field after this code:

Public $field_lable_here= null;

Where field_name is the name of your field.

Also make changes to the users.xml file from the administrator/components/com_users/models/forms folder.

Find the field code after which the added field will be displayed:

Add the code for your field after this code:

Replace field_lable_here your field name. Also change Your description to the description you need.

Make changes to the registration.xml file from the components/com_users/models/forms folder on your server. Add the code for your field below the code for the field under which the new field should appear.

WordPress has a registration form that allows new users to register on the site. But what if you want to create a custom registration form that doesn't meet the WordPress Console options and add new fields to it?

| Download ready-made form plugin |

In today's tutorial, you'll learn how to create a registration form in WordPress using a combination of template tags and shortcodes.

The standard registration form consists of only two fields – username and e-mail.

Having only two fields to fill out on the registration form makes the registration process very simple. First, you enter your username and email address, after which the password to enter the site is automatically sent to you by e-mail. Then you log into the site using the password sent to you, fill out your profile and change the password to a new one that you come up with yourself and can easily remember.

Or you can slightly change the above-mentioned registration process on your site and use additional fields along with the two already available. This could be a password field, the URL of the user's site, any personal information, nickname, last name and first name.

And today we will create a WordPress plugin for a custom registration form using the following fields:

Username
password
e-mail
Site URL
surname
nickname
personal information

A custom registration form can be integrated into WordPress using a plugin shortcode and an appropriate template tag.

A shortcode allows you to create a page and make it the main registration page of your site. You can also use a shortcode in a post so that the user can subscribe to updates on your site after reading one of the articles they liked.

If you want to add a registration form to your sidebar or any other page on your site, you will need to edit the theme you are using and place a template tag where you want the registration form to appear.

Before we start creating the plugin, it is worth noting that we need fields with username, password and e-mail.

We will follow this rule when creating the validation function.

Creating a plugin

With all that said, let's start coding the plugin. First, include the title and header of the plugin.

Conclusion

In today's post, we looked at the process of creating a plugin that adds a custom registration form to a WordPress website. Based on the information provided, you can expand the number of fields to fill out, but only by ensuring that the form fields are valid metadata for wp_insert_user .

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

Last Updated on December 17, 2019

Web forms are used by virtually all websites for a wide range of purposes. Users of forums and social networks use forms to add content and interact with other users. Websites that can be customized to create a personalized experience, such as customizable newsfeeds, use forms to allow users to control the content that appears on the page. And nearly every website uses forms to allow website visitors to contact the organization or person administering the website. Web forms are made possible by the integration of multiple technologies:

HTML to create the form fields and labels and accept user input.
CSS to style the presentation of the form.
JavaScript to validate form input and provide Ajax -enabled interactions.
Server-side languages such as PHP to process form data.

In this guide, we're going to cover all of the HTML elements used to create web forms. We also have other that cover topics such as building a form, styling and designing forms, and ensuring form usability and accessibility.

Defining the Structure of a Form

Paragraph content.

Contact Form

Name:

Email:

Subject:

Message: Type your message here

Additional paragraph content

When rendered in the browser, the contact form would be clearly separated from surrounding content.

The fieldset element is optional but is commonly used to group related elements on long and complex forms, or to isolate form fields from nearby elements when a form is presented along with non-form content. HTML5 added three attributes which can be applied to fieldset elements:

disabled: Used to disable all of the forms in a fieldset. Note that we used this attribute in the example form above.
form: Used to associate a fieldset with the id of one or more form elements. Note that browser support for this attribute is very limited.
name: Associates a name with the fieldset .

The Input Element

Depending on the type of form you are creating, it"s entirely possible to have a form that only includes two types of elements: one form element and one or more input elements. The element is used to create a variety of different types of input fields for form users to interact with.

Common Values

The input element is a very flexible element who appearance and behavior can change dramatically based on the type attribute applied to the element. The most common type values include: text : The default value for the type="" attribute. Defines a single line of text 20 characters wide. The width can be adjusted with the size attribute as you can see in the form code in our previous example. password : The password type is basically the same as the text field with the exception that characters entered into a password field are masked. radio : Radio buttons can be used to provide multiple options of which only one may be chosen. checkbox : Checkboxes are similar to radio buttons, but more than one selection can be active at a time. This means multiple values can be submitted with a set of checkboxes while a set of radio buttons will only accept one value. submit : The submit type value creates a form submission button. When clicked, the form will take the action specified in the action attribute associated with the form element. Many forms make use of just one or two input types, and most simple forms are built using just the types listed above. However, there are many additional types you can use to accept form data that doesn't fit into any of the types listed above.

Less Common Values

These input types are less common than those listed above but are supported by virtually all browsers and can be used to build many different types of form inputs. button : If you want to run a when a button is clicked, the button input type can be used to create a button which can be associated with a variety of actions. hidden : This attribute type is usually used simultaneously with the value attribute, which we"ll cover momentarily, to add a pre-defined value to every form submission. For example, if you have contact forms on five different pages you could add to each form to submit the name of the page where the contact form was submitted from. reset : This type is used to create a reset button that will return all form fields to their default state. file : If you want to allow form users to upload and submit files, will provide that capability. image : In the past, it was common to use an image as a submit button. While this type value is still valid, it is not used very frequently in modern web form design. Instead, use CSS to style the button.

New Values Added by HTML5

Several additional input types are defined by the HTML5 specification. Many of these types have limited browser support. So if you use them, be sure to check caniuse.com for browser support and provide adequate fallback options where appropriate. search : This is the proper type to specify if your form provides search functionality. Unlike most of the other types of inputs added in HTML5, type="search" is supported by all browsers. Just remember that this feature doesn't actually provide search functionality, it just creates a form input field designed to be used as a part of a search feature. color : When this input type is specified it will display a colored-button that launches a basic color selector tool. Set the default color value by using the value attribute and a hex color code like this: . number : This type produces a field for entering a number which has increments buttons on the right hand side of box. Limits can be placed on the range of acceptable entries with the max , min , and step attributes, but browsers that lack support for this element typically fallback to a standard text input that does not recognize these limits. range : Browser support for this element is pretty good with a few exceptions. Use this attribute to produce a slider which can be used to select a value within a specified range. For example, this code would produce a slider to select a number between 100 and 1000 in increments of 50: . You"ll need to pair the range element with another technique to provide a live preview of the selected value. Thankfully, HTML5 Doctor has a simple way to do this using the output element. Date and Time Types : HTML5 added a number of input types that can be used to specify time and date values. For example, the date type defines a control to enter a year, month, and day. To add time to the date input, use datetime-local . If you want time without date information use the time input type. Less specific input types include the month and week options which can be used to select a week or month within a year without specifying the day or time. Browsers have been slow to add support for this type, so be sure to check for browser support and provide fallbacks if you use this type of input. Contact Detail Types : Broad support is available for the three input types used to collect pertinent details like email addresses (email), telephone numbers (tel), and website URLs (url).

Common Input Attributes

While the type attribute is by far the most-used and most useful input attribute, there are several other attributes you will need to know to build useful forms. name : The name assigned to an input element will be submitted along with the value entered into the associated field. In other words, if the value “Fred” were entered into an input element with this code the value submitted would be “first_name=Fred”. value : The value of an input element performs a different function depending on the type of input it is applied to. When applied to the submit , reset , or button types the value is used as the text on the button. When applied to text fields it provides the default value associated with the field. When associated with a checkbox or radio button, the value provides the value that will be associated with that field if selected.

Who referred you to our website?:

Pink:

Red:

readonly : When readonly is applied as an attribute of an input element the value in the field cannot be changed. JavaScript can be used to remove the readonly attribute after some other action is taken, such as clicking a button or selecting a checkbox. For example, readonly could be applied to a submit input type and removed when a checkbox was selected confirming that the user accepted the website"s terms of service. disabled : We used this attribute with example form embedded earlier in this tutorial. Use this attribute to disable an entire form, fieldset, a single field. size : Use the size attribute with text input types to specify the visible width of the field without limiting the number of characters that may be entered into the field. maxlength : If you don" t want to accept more than a certain number of characters in a given field, use maxlength to limit those fields to a defined number of characters. checked : If you want a checkbox or radio button to be preselected when a form loads apply this attribute to that input element. These attributes have broad support and are used commonly with forms you encounter every day.

New Attributes Added by HTML5

HTML5 added many new attributes which can be associated with input elements. Browser support for some of these elements is limited, so be sure to check for support and provide fallback options for users of unsupported browsers. autocomplete : If your form includes common fields, leaving autocomplete on will allow the visitors browser to suggest entries based on previously completed forms. autofocus : Use this attribute to identify the form field that should be in focus when the form loads. multiple : The multiple attribute can be used with email and file input types to allow form users to input more than one value. When used for email inputs, more than one email address can be submitted by separating each address from the next with a comma. When used for file inputs, multiple files may be selected and submitted simultaneously. pattern : There may be times when you want to specify that the value of an input must meet certain criteria. For example, you may want to require that a password field includes at least one uppercase letter, one lowercase letter, one number, and meets a minimum length requirement. The pattern attribute can be used to create expressions against which input values are validated. Writing these expressions, referred to as Regular Expressions or RegExp, is beyond the scope of this tutorial. You can learn about regular expressions at Wikipedia and the n write and test your expressions for free at RegExr . placeholder : Most forms include placeholder text which disappears as soon as you click into the field or begin typing. Use this attribute to add and define placeholder text for any inputs that accept text. required : If certain fields in a form are required, use this attribute to prevent submission of incomplete forms. form : If you ever need to place an input element outside of the form element, you can associate the displaced element by using the form attribute and applying a value that matches the id attribute applied to the form. Modify Form Submit Button Behavior There are five attributes that can be applied to submit and image input types to override the attributes applied to the parent form element. These attributes include:

formaction : Define a different URL from the one identified in the parent form's action attribute to process a form submission. Often used when forms may be processed in more than one way to provide a variety of form submission options.
formenctype : Specify an encoding type that should be used for form submissions. The value used overrides the value applied to the enctype attribute of the parent form element.
formmethod : This attribute is used specify either the get or post method value and will override the method attribute applied to the parent form .
formnovalidate : If you don't want form input to be validated when submitted you can use this attribute.
formtarget : Override the target attribute applied to the parent form element by applying this attribute to a submit or image input type field.

Define the Size of type="image" : If you use the image input type to create a form submission button, you can control the size of the image using the height and width attributes. Alternatively, you can do the same thing with CSS. Most developers and designers would recommend avoiding these attributes and controlling button appearance with CSS . Set Limits and Increments for Numeric Values : You can use the min , max , and step attributes to define minimum and maximum values as well as acceptable increments falling between these values for any input that accepts numeric values.

Drop-Downs, Text Areas, & Buttons

Inputs aren't the only elements that can be used to create form fields. Other types of elements can be associated with forms to create drop-down lists or options, free-form text areas, and flexible buttons.

Pre-Populated Drop-Down Lists

To create a drop-down list of pre-populated options from which a website visitor can select an option, use the select element to create the field, and nest multiple option elements to create the various options that should appear in the drop-down menu . For example, to create a drop-down menu of pretentious color options for a fictional e-commerce store, the following code could be used:

Windswept Sand Dune Lush Forest Turbulent Waters Deep Night

Note that the value is what will actually be submitted with the form while the text between the opening and closing tags is what is presented to the visitor completing the form. For example, if a visitor selects “Lush Forest” the actual value submitted with the form will be green . Here's how our drop-down list shows up in the browser:

Windswept Sand Dune Lush Forest Turbulent Waters Deep Night

Free Form Text Areas

All of the text inputs we"ve seen so far, such as , only accept a single line of text. However, if you want to create a larger text area for longer text input a single line input field isn"t going to work. The textarea element is the correct choice for creating a large text input area capable of accepting text input that won"t render well on a single line. There are three parts to a textarea:

The textarea is created by inserting opening and closing tags. Any text nested between the tags will be loaded in the text area when the form loads and will be submitted along with the form unless the visitor submitting the form deletes the text out of the textarea .

If you want to define the size of the text area use the rows attribute to define the number of rows of text that should be able to be displayed without resizing the text area.

To set a predefined width use the cols attribute. The value applied will be the number of characters that will appear on a single row before wrapping to the second row.

Text area elements are resizable. However, the rows and cols attributes will define the size of the textarea when it is first rendered by the browser and will also set the minimum space the area may be resized to fit.

Enter Text Here

This code will produce two identically sized text areas that are three rows tall and can accept 60 characters per row. They will be resizable to any size larger than the default size. Note how the placeholder text was added to the first with the placeholder element but simply nested between the opening and closing tags in the second example. Below you can see how these two bits of code are rendered.

While textarea size can be specified using 'rows" and 'cols", it is a better practice to use CSS to style and size text areas. Many of the attributes that can be applied to input elements can also be applied to textarea elements. In addition, to those included in our example above, attributes that can be applied to text areas include: autofocus , disabled , form , maxlength , name , readonly , required , and wrap .

Flexible Buttons

There are two ways to create buttons for forms:

We"ve already talked about the input element and the different types that can be used to create buttons. So why is there another button? There are at least two ways that button elements are different from their input cousins.

Because buttons are made with an opening and closing tag, different types of content – usually text and images – can be nested between the opening and closing tags and will be rendered on the button.

Buttons do not have to be associated with a form element. They can be used as standalone buttons to initiate scripts, as the content of an anchor element, and to perform other actions.

Form Elements Added in HTML5

Three new form elements were added in HTML5: datalist : Use this element to provide a list of suggested autocompletion values for an input element. In order to use the datalist element, first create an input element with a list attribute. Then create a datalist element with an id attribute. The value applied to the input list attribute must match the datalist id. Values are added to the datalist by adding option elements between the opening and closing datalist tags. Here's an example of how this all works:

When we render that code in the browser and input element will appear. If we begin typing, autocomplete suggestions will be made based on the options included in the datalist. Note that users submitting the form aren't limited to selecting from one of these options. They can still choose to type a value that is not an included option if they wish to do so.

What is your favorite web technology?

output : Use this element to display the result of a calculation or user input. Associate it with an input element by using the for attribute with a value that matches the id of the relevant input element, or associate it with a form by adding a form attribute using a value that matches the id of the relevant form . The output element can also be paired with the range element to let form users know the exact value represented by the current position of the slider of a range element. Using the output and range elements in this way is beyond the scope of this introductory tutorial, but if you want to use these two elements together you can learn more about this technique at the HTML5 Doctor.

Next Steps

This tutorial has provided an overview of the elements used to build forms for the web. The next step is to try out some of the knowledge you"ve gained. Other tutorials in this section will walk you through the process of creating a reservation form, styling and designing forms, and ensuring that your forms meet usability and accessibility guidelines.

Frequently Asked Questions How do you restrict a form field to only accept numbers?

In the past, restricting a field to numbers only required the use of JavaScript. However, with the release of HTML5, it"s now simple to limit a field to numeric input only. Just apply the number value to the type attribute of the applicable input element. For example:

When rendered, produces a text input field that will only accept numbers.

How do you restrict a form field to only accept alphanumeric characters?

In the past, the only way to limit field input to alphanumeric characters was to use jQuery or JavaScript and craft a custom function. However, HTML5 added the pattern attribute for input elements which can be used to restrict a form field to accept alphanumeric input only. Here's the code that will do the trick:

In this case, the pattern element will accept lowercase letters, uppercase letters, and numbers. The second part of the value in curly braces stipulates how many total characters may be entered into the field. Let's see how that looks in the browser.

The way it works is that when you attempt to submit values that don"t meet the specified pattern the title attribute is displayed. So you should put some instructions inside the pattern attribute so that users can figure out what they"ve done wrong. Browser support for this relatively new attribute is really pretty good. IE 9 and earlier versions of IE don"t support it and Opera Mini also lacks support. However, all other browsers do support the attribute.

How do you make a form submit when the user presses enter?

If you"ve come across a form that does not submit when you press enter, then someone has intentionally designed the form to behave that way – and they really shouldn"t have done that. Web accessibility specs are clear: design forms to allow implicit submission. What is implicit submission? Submitting a form by pressing enter. Browsers are designed to support implicit submission. Here's how it works. Take this form for instance:

Name:
Age:

If you were focused on any element in that form and pressed enter, the form would be submitted. This is implicit submission and all modern browsers support this behavior. Use the button element in the form and you don"t even have to use the submit value for the type attribute. Hit enter while focused on any element in this form and the form will still be submitted.

Name:
Age:
Submit

So how do developers break this behavior? One way to get around this behavior–and to be clear, we don"t recommend this–is to drop the form elements. The browser knows what to submit by grouping together everything between the form tags. Drop those tags and the browser doesn" t know what to submit. Another way some developers manipulate browser behavior is to use CSS to make buttons rather than proper HTML elements, like this.

.submitButton ( padding: 10px 20px; margin-top: 10px; background-color: #ddd; border-radius: 5px; display: inline-block; ) .submitButton:hover ( background-color: #ccc; ) .submitButton: active ( background-color: #ddd; ) Name:
Age:
Submit

Which, when rendered by the browser, would produce a button that looked like a button but did not do anything when enter is pressed.

SubmitButton(padding: 10px 20px; margin-top: 10px; background-color: #ddd; border-radius: 5px; display: inline-block;).submitButton:hover(background-color: #ccc;).submitButton:active (background-color: #ddd;)

In this article, you will learn how to create a registration and login form using HTML, JavaScript, PHP and MySql. Such forms are used on almost every website, regardless of its type. They are created for the forum, and for the online store, and for social networks(such as Facebook, Twitter, Odnoklassniki) and for many other types of sites.

If you have a website on your local computer, then I hope that you already have . Without it, nothing will work.

Creating a table in the Database

In order to implement user registration, first of all we need a Database. If you already have it, then great, otherwise, you need to create it. In the article, I explain in detail how to do this.

And so, we have a Database (abbreviated as DB), now we need to create a table users in which we will add our registered users.

I also explained how to create a table in a database in the article. Before creating a table, we need to determine what fields it will contain. These fields will correspond to the fields from the registration form.

So, we thought, imagined what fields our form would have and created a table users with these fields:

id- Identifier. Field id Every table in the database should have it.
first_name- To save the name.
last_name- To preserve the surname.
email- To save the postal address. We will use e-mail as a login, so this field must be unique, that is, have the UNIQUE index.
email_status- Field to indicate whether the mail is confirmed or not. If the mail is confirmed, then it will have a value of 1, otherwise the value is 0. By default, this field will have a value of 0.
password- To save the password.

All fields of type “VARCHAR” must have a default value of NULL.

If you want your registration form to have some other fields, you can also add them here.

That's it, our table users ready. Let's move on to the next stage.

Database Connection

We have created the database, now we need to connect to it. We will connect using the PHP extension MySQLi.

In the folder of our site, create a file with the name dbconnect.php, and write the following script in it:

This file dbconnect.php will need to be connected to form handlers.

Notice the variable $address_site, here I indicated the name of my test site that I will be working on. Please indicate the name of your site accordingly.

Site structure

Now let's look at the HTML structure of our site.

We will move the header and footer of the site into separate files, header.php And footer.php. We will include them on all pages. Namely on the main page (file index.php), to the page with the registration form (file form_register.php) and to the page with the authorization form (file form_auth.php).

Block with our links, registration And authorization, add them to the site header so that they are displayed on all pages. One link will enter to the page with the registration form (file form_register.php) and the other to the page with the authorization form (file form_auth.php).

Contents of the header.php file:

Name of our site

As a result, our main page looks like this:

Of course, your site may have a completely different structure, but this is not important for us now. The main thing is that there are links (buttons) for registration and authorization.

Now let's move on to the registration form. As you already understand, we have it on file form_register.php.

Go to the Database (in phpMyAdmin), open the table structure users and look at what fields we need. This means that we need fields for entering the first and last name, a field for entering the postal address (Email) and a field for entering the password. And for security purposes, we will add a field for entering a captcha.

On the server, as a result of processing the registration form, there may be various errors, due to which the user will not be able to register. Therefore, in order for the user to understand why registration fails, it is necessary to display messages about these errors.

Before displaying the form, add a block to display error messages from the session.

And one more thing, if the user is already authorized, and out of curiosity he goes to the registration page directly by writing in the address bar of the browser site_address/form_register.php, then in this case, instead of the registration form, we will display a header stating that he is already registered.

In general, the file code form_register.php we got this:

You are already registered

In the browser, the page with the registration form looks like this:

Using the required attribute, we made all fields mandatory.

Pay attention to the code of the registration form where the captcha is displayed:

We specified the path to the file in the value of the src attribute for the image captcha.php, which generates this captcha.

Let's look at the file code captcha.php:

The code is well commented, so I will focus on just one point.

Inside a function imageTtfText(), the path to the font is specified verdana.ttf. So for the captcha to work correctly, we must create a folder fonts, and place the font file there verdana.ttf. You can find it and download it from the Internet, or take it from the archive with the materials of this article.

We're done with the HTML structure, it's time to move on.

Checking email validity using jQuery

Any form needs to check the validity of the entered data, both on the client side (using JavaScript, jQuery) and on the server side.

We must pay special attention to the Email field. It is very important that the entered postal address is valid.

For this input field, we set the email type (type="email"), this slightly warns us against incorrect formats. But this is not enough, because through the code inspector that the browser provides us, we can easily change the attribute value type With email on text, and that’s it, our check will no longer be valid.

And in this case, we must do a more reliable check. To do this, we will use the jQuery library from JavaScript.

To connect the jQuery library, in the file header.php between tags , before the closing tag , add this line:

Immediately after this line, we will add the email validation code. Here we will add a code to check the length of the entered password. Its length must be at least 6 characters.

Using this script, we check the entered email address for validity. If the user entered an incorrect Email, we display an error message about this and disable the form submit button. If everything is fine, then we remove the error and activate the form submit button.

And so, we are done with form validation on the client side. Now we can send it to the server, where we will also do a couple of checks and add data to the database.

User registration

We send the form to the file for processing register.php, via the POST method. The name of this handler file is specified in the attribute value action. And the sending method is specified in the attribute value method.

Open this file register.php and the first thing we need to do is write a session launch function and connect the file we created earlier dbconnect.php(In this file we made a connection to the database). And also, let’s immediately declare the cells error_messages And success_messages in the global session array. IN error_mesages we will record all error messages that occur during form processing, and in succes_messages, we will record joyful messages.

Before we continue, we need to check if the form was submitted at all. An attacker can look at the attribute value action from the form, and find out which file is processing this form. And he may have the idea to go directly to this file by typing the following address in the browser’s address bar: http://site_address/register.php

So we need to check for a cell in the global POST array whose name matches the name of our "Register" button from the form. This way we check whether the "Register" button was clicked or not.

If an attacker tries to go directly to this file, they will receive an error message. Let me remind you that the $address_site variable contains the name of the site and it was declared in the file dbconnect.php.

The captcha value in the session was added when it was generated, in the file captcha.php. As a reminder, I’ll show you this piece of code from the file again captcha.php, where the captcha value is added to the session:

Now let's proceed to the verification itself. In file register.php, inside the if block, where we check whether the "Register" button was clicked, or rather where the comment " is indicated" // (1) Space for the next piece of code"we write:

//Check the received captcha //Trim the spaces from the beginning and end of the line $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Compare the received value with the value from the session. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // If the captcha is not correct, then we return the user to the registration page, and there we will display an error message to him that he entered the wrong captcha. $error_message = "

Error! You entered the wrong captcha

"; // Save the error message to the session. $_SESSION["error_messages"] = $error_message; // Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site ."/form_register.php"); //Stop the script exit(); ) // (2) Place for the next piece of code )else( //If the captcha is not passed or it is empty exit("

Error! There is no verification code, that is, a captcha code. You can go to the main page.

"); }

Next, we need to process the received data from the POST array. First of all, we need to check the contents of the global POST array, that is, whether there are cells there whose names correspond to the names of the input fields from our form.

If the cell exists, then we trim the spaces from the beginning and end of the line from this cell, otherwise, we redirect the user back to the page with the registration form.

Next, after we have trimmed the spaces, we add the line to the variable and check this variable for emptyness; if it is not empty, then we move on, otherwise we redirect the user back to the page with the registration form.

Paste this code into the specified location" // (2) Space for the next piece of code".

/* Check if there is data sent from the form in the global array $_POST and wrap the submitted data in regular variables.*/ if(isset($_POST["first_name"]))( //Trim the spaces from the beginning and end of the string $first_name = trim($_POST["first_name"]); //Check the variable for emptiness if(!empty($first_name))( // For safety, convert special characters to HTML entities $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your name

Name field is missing

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) if( isset($_POST["last_name"]))( //Trim spaces from the beginning and end of the line $last_name = trim($_POST["last_name"]); if(!empty($last_name))( // For security , convert special characters into HTML entities $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Please enter your last name

Last name field is missing

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) if( isset($_POST["email"]))( //Trim spaces from the beginning and end of the line $email = trim($_POST["email"]); if(!empty($email))( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Code location for checking the format of the email address and its uniqueness )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your email

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) if( isset($_POST["password"]))( //Trim spaces from the beginning and end of the string $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars ($password, ENT_QUOTES); //Encrypt the password $password = md5($password."top_secret"); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your password

Of particular importance is the field email. We must check the format of the received postal address and its uniqueness in the database. That is, is there any user with the same email address already registered?

At the specified location" // (3) Code location to check the format of the postal address and its uniqueness" add the following code:

//Check the format of the received email address using a regular expression $reg_email = "/^**@(+(*+)*\.)++/i"; //If the format of the received email address does not match the regular expression if(!preg_match($reg_email, $email))( // Save the error message to the session. $_SESSION["error_messages"] .= "

You entered an incorrect email

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) // We check whether such an address is already in the database. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //If the number of received there are exactly one row, which means the user with this email address is already registered if($result_query->num_rows == 1)( //If the resulting result is not false if(($row = $result_query->fetch_assoc()) != false) ( // Save the error message to the session. $_SESSION["error_messages"] .= "

A user with this email address is already registered

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); )else( // Save the error message to the session . $_SESSION["error_messages"] .= "

Error in database query

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); ) /* closing the selection */ $result_query-> close(); //Stop the script exit(); ) /* closing the selection */ $result_query->close();

And so, we are done with all the checks, it’s time to add the user to the database. At the specified location" // (4) Place for the code for adding a user to the database" add the following code:

//Query to add a user to the database $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)( // Save the error message to the session. $_SESSION["error_messages"] .= "

Error in request to add user to database

Registration completed successfully!!!
Now you can log in using your username and password.

"; //Send the user to the authorization page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); ) /* Completing the request */ $result_query_insert-> close(); //Close the connection to the database $mysqli->close();

If an error occurred in the request to add a user to the database, we add a message about this error to the session and return the user to the registration page.

Otherwise, if everything went well, we also add a message to the session, but this time it’s more pleasant, namely we tell the user that the registration was successful. And we redirect it to the page with the authorization form.

The script for checking the email address format and password length is in the file header.php, so it will also apply to fields from this form.

The session is also started in the file header.php, so in the file form_auth.php There is no need to start a session, because we will get an error.

As I already said, the script for checking the email address format and password length also works here. Therefore, if the user enters an incorrect email address or short password, he will immediately receive an error message. A button to come in will become inactive.

After fixing the errors, the button to come in becomes active, and the user will be able to submit the form to the server, where it will be processed.

User authorization

To attribute value action the authorization handicap has a file specified auth.php, this means that the form will be processed in this file.

And so, open the file auth.php and write code to process the authorization form. The first thing you need to do is start a session and connect the file dbconnect.php to connect to the database.

When you click on the exit link from the site, we are taken to a file logout.php, where we simply destroy the cells with the email address and password from the session. After this, we return the user back to the page on which the link was clicked exit.

File code logout.php:

That's all. Now you know how to implement and process user registration and authorization forms on your website. These forms are found on almost every website, so every programmer should know how to create them.

We also learned how to validate input data, both on the client side (in the browser, using JavaScript, jQuery) and on the server side (using PHP). We also learned how to implement a procedure for leaving the site.

All scripts have been tested and are working. You can download the archive with the files of this small site from this link.

In the future I will write an article where I will describe. And I also plan to write an article where I will explain (without reloading the page). So, in order to stay informed about the release of new articles, you can subscribe to my website.

If you have any questions, please contact me, and if you notice any error in the article, please let me know.

Lesson Plan (Part 5):

Creating an HTML structure for the authorization form

We process the received data

We display the user's greeting in the site header

Did you like the article?

Here is an example of html code for student registration form. In this example, we have displayed many text fields, radio button, Reset button and Submit Form button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in student registration form. If you will not enter value in text field than an error message will be show. In this example we have made entry in every field mandatory hence an error is shown if one of them is not filled correctly. However, a programmer can make adjust it accordingly.

When all fields are filled correctly, submit form adds the data. A programmer can use this submit form as he/she wants, either they can send/redirect it to other page or save it in database.

Here is the video tutorial of "How to create student registration form in HTML?":

In the above video instruction we have explained you how to make html page for student registration and validate it with JavaScript. JavaScript is used to validate the HTML page in web applications. These days Ajax and jQuery is also used for making dynamic web applications.

StudentRegistration.html

Student Registration Form
Name
Father Name
Postal Address
Personal Address
Sex	Male Female
City	select.. NEW DELHI MUMBAI GOA PATNA
Course	select.. B.TECH MCA MBA BCA
District	select.. NALANDA UP GOA PATNA
State	select.. NEW DELHI MUMBAI GOA BIHAR
PinCode
EmailId
DOB
MobileNo

Form Validation

Function validate() ( if(document.StudentRegistration.textnames.value == "") ( alert("Please provide your Name!"); document.StudentRegistration.textnames.focus() ; return false; ) if(document.StudentRegistration .fathername.value == "") ( alert("Please provide your Father Name!"); document.StudentRegistration.fathername.focus() ; return false; ) if(document.StudentRegistration.paddress.value == "") ( alert("Please provide your Postal Address!"); document.StudentRegistration.paddress.focus() ; return false; ) if(document.StudentRegistration.personaladdress.value == "") ( alert("Please provide your Personal Address !"); document.StudentRegistration.personaladdress.focus() ; return false; ) if ((StudentRegistration.sex.checked == false) && (StudentRegistration.sex.checked == false)) ( alert ("Please choose your Gender : Male or Female"); return false; ) if(document.StudentRegistration.City.value == "-1") ( alert("Please provide your City!"); document.StudentRegistration.City.focus() ; return false; ) if(document.StudentRegistration.Course.value == "-1") ( alert("Please provide your Course!"); return false; ) if(document.StudentRegistration.District.value == "-1") ( alert("Please provide your Select District!"); return false; ) if(document.StudentRegistration.State.value == "-1") ( alert("Please provide your Select State!"); return false; ) if (document.StudentRegistration.pincode.value == "" || isNaN(document.StudentRegistration.pincode.value) || document.StudentRegistration.pincode.value.length != 6) ( alert("Please provide a pincode in the format ######."); document.StudentRegistration.pincode.focus() ; return false; ) var email = document.StudentRegistration.emailid.value; atpos = email.indexOf("@"); dotpos = email.lastIndexOf("."); if (email == "" || atpos

Great users registration form html. Creating a custom user registration form on WordPress

Password recovery