User Registration - signup.html

We will start developing the HTML page and the form where user will fill the details while registering.
For simplicity I will skip doing validation part and will do at the end.

1. Create a file in side www/mysite named signup.html

2. Inside the file write the below code first so that our page will have title 'Signup'
<html>
<head>
<title>Signup</title>
</head>
<body>
</body>
</html>

3. Now lets add a form in the page with the below code

<form name='regFrm' action='registration.php' method='POST'>
</form>

So far it is only HTML code. and let me explain what are the meaning of the values in this form element.

"name" is typically a name and you can give anything. This will be used inside the page to refer this object. Don't worry about it we will use it later when doing the validation so you can see it.

"action" is a very important attribute for <form> tag. the value tells where to go once the form is submitted. In our case once user fills out the form and clicks on submit we want to take all values to our PHP page registration.php to process them.

"method" attribute we will use POST. I will not explain this here.

4. Now lets add the fields in the form. So type the below code within <form></form> tag

First Name <input type="text" name="fname"><br>
Last Name <input type="text" name="lname"><br>
City <input type="text" name="city"><br>
Email Address <input type="text" name="email"><br>
Password <input type="password" name="passwd"><br>
Confirm Password <input type="password" name="cpasswd"><br>


And at the end add a Signup button
<input type="submit" name="submit" value="Signup"/>

The input type denotes what kind of inputs will be given here. input type="text" means user will type in plan text. Similarly for input type = password it will mask what ever user will type.

Input type "Submit" means it is a submit button.

In next section we will see what is the significance of the "name" attribute for each element.

5. So the full HTML page source should be like this

<html>
<head>
<title>Signup</title>
</head>
<body>
<form name='regFrm' action='registration.php' method='POST'>
First Name <input type="text" name="fname"><br>
Last Name <input type="text" name="lname"><br>
City <input type="text" name="city"><br>
Email Address <input type="text" name="email"><br>
Password <input type="password" name="passwd"><br>
Confirm Password <input type="password" name="cpasswd"><br>
<input type="submit" name="submit" value="Signup"/>
</form>
</body>
</html>

6. Now if you open a browser and hit the address http://localhost/mysite/signup.html you will get a page like below. Notice "Signup" at the page title.

signup.html
So now our Signup page is ready. We can make it look better by making proper alignment or putting the fields in a table but that is not in scope as of now.

So what all we have done here is

1. We created a web form with some fields and a submit button
2. When user fills the form an clicks on the submit button it will go to registration.php where it will process these data and insert into database.

So before writing code for registration.php we must create the database table where we will store the user data. In next section we will be creating the database table user_master in our MySql database.

No comments:

Post a Comment