SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Massive Custom Forms - User Registration and Fields Validation

Massive Custom Forms - User Registration and Fields Validation

This is a massive tutorial that teaches you how to build your own custom forms to use in your web pages.

We will take as example a full registration form with its field verifications.

You can obviously modify this code to suit your needs to build your custom forms.

We'll see how to insert oform objects, how to make them look nice and how to validate each field to be sure thant your visitors provide the most accurate informations possible.

First of all, have a look at the code below: you have to place it into your page, between the <body> and the </body> tags.

In livereg.php we'll perform all the necessary controls and eventually redirect the users to custom error pages.

The code is explained line by line, we use the "*" to check required fields:

<form action="livereg.php" method="post">
//this line opens the form, be sure to place the ilename of the file that you will use to process the form in place of "livereg.php", post is the chosen method to forward the values to the script
<table width="100%" border="0">
<tr>
    <td width="300">Username ( Min 6 chars ):</td>
//we'll check if the user entered 6 chars in livereg.php
    <td width="300" > <input type="text" name="username" size="32"> * </td>
//this is a simple textbox
</tr>
<tr>
    <td>Password ( Min 6 chars ):</td>
//we'll check if the user entered 6 chars in livereg.php
    <td><input type="password" name="password" size="32"> *</td>
//this is a password textbox (while typing chars are shown as "*" or dots depending on your browser/OS
</tr>
<tr>
    <td>Retype Password:</td>
    <td><input type="password" name="password2" size="32"> *</td>
//this is another password textbox like the previous one, we'll use this value to check if the 2 passwords inserted are the same in livereg.php
</tr>
<tr>
    <td>Your Email:</td>
    <td><input type="text" name="email" size="32"> *</td>
//This is another simple textbox, here the user will insert his/her email address, we'll check for its correctness in livereg.php
</tr>
<tr>
    <td>Your Full Name:</td>
    <td><input type="text" name="name" size="32"> *</td>
//This is another simple textbox, here the user will insert his Full Name
</tr>
<tr>
    <td>Your Domain:</td>
    <td><input type="text" name="domain" size="32"></td>
//In this textbox the user will insert his domain (if any)
</tr>
<tr>
    <td>Your ZIP Code:</td>
    <td><input type="text" name="zip" size="5"> *</td> //In this textbox the user will insert his ZIP code
</tr>
<tr>
    <td height="21">Your City:</td>
    <td><input type="text" name="city" size="32"> *</td> //In this textbox the user will insert his City
</tr>
<tr>
    <td>State/Province:</td>
    <td><input type="text" name="state" size="32"> *</td> //In this textbox the user will insert his State/Province
</tr>
<tr>
    <td>Country:</td>
    <td><input type="text" name="country" size="32"> *</td>//In this textbox the user will insert his Country
</tr>
<tr>
    <td>Address:</td>
    <td><input type="text" name="address" size="32"> *</td>//In this textbox the user will insert his Address
</tr>
<tr>
    <td>Phone:</td>
    <td><input type="text" name="phone" size="32"></td>//In this textbox the user will insert his Phone Number
</tr>
<tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Register" name="submit"></td> //this is the Register button. If you want your button to show another text you can change value="Register" to value="Order", value="Send" or what you prefer
</tr>
</table>
</form>

Now let's see what this code will look like when browsing your page - click here.

   
subscribe to newsletter