With our database created we can now create the registration form.
This is a preview of the registration form the pages titled registered or BHP and the form has four
text inputs first name last name email address and password once this form is completed some validation
is conducted on the form and we'll be using Ajax and BHP for that when the register button is clicked.
The data is inserted into our database.
The user can then use the log in form to log in to his or her account and access the blog.
And so that's what we'll be doing here.
We'll be using the contact dot BHP page as a template for the registration page since it already has
a form.
So this is the contact page.
Contact the IP HP and we'll need to make some changes we don't need this entire section with the map
and the contact information so all we need is this section here.
The contact form and we'll have to make some changes to it.
So we'll go ahead and get started.
Open Contact dot BHP in your text editor
and save this file is registered at BHP.
So just go to file save as and type in register.
BHP
now when we need to make some basic edits to this page so on line 12.
Just change the title.
Same thing on line 35
remove the entire navigation code block and replace it with the BHP require statement.
I'm just gonna load this page by typing in registered IP HP into the web browser so we can preview it
as we as we move along so you can see that the title is changed and the navigation is there.
It's loaded from the external file
we need to now remove this entire section here all of this
so it appears that the code for this entire section starts on line 43 and so I'm going to remove that
that entire row from line 43 to line 70
we're left with just the contact form content area.
We don't need this text here.
So when you delete that
it would have to change this text contact form to registration form
and we'll just update the copyright text as well.
Okay so I've screwed up to the form code block and for me that starts on line 50.
So there's a couple of things we need to do here.
First of all we need to change the labels to first name last name email address and password.
So let's go ahead and do that.
So first name last name email address and password the password is not a text area.
We need to change it to an input.
So I'm going to delete the text area and when it copy one of these inputs and just paste it over here
okay so our text inputs are in our labels are correct then we to add some attributes to our form elements
we need to add an I.D. and a name attribute to each element.
This is so that we can use ajax and HP to process the form.
You'll see this in action later on.
So this is this is what you need to add in so the first input I d f name the name attribute set it to
f name as well and give it a max length attribute of twenty five.
Now for the last name element change that type from email to text and insert this code I dl name name.
L name max length twenty five the email address change the type to email and then insert this code I
d set to email names to email in max length set the twenty five four password change it type to password
I decided to password name to password in Matt max length to 10.
Now delete this hidden input this just comes with the template we don't need it so just delete this
entire input
for the button the type is submit which is what we need
leave the class as it is just insert this I.D.
set the I.D. to register and again you'll see why we're we're using these I.D. attributes when we get
into working with the Ajax PART OF THIS FORM OKAY SO THAT COMPLETES THE FORM I'll just refresh the page
and it looks good.