How to make a form

This is a beginners tutorial on making web forms.

Let us first see the working of a web form.

A form has two parts: the client side and the server side.

The client side is coded using HTML, CSS and some Javascript.
The server side is usually coded using a scripting language available on the web server like PHP, ASP, Ruby or Perl.

Coding the client side of the form

Here is the sample HTML code for a simple form:

<form method='post' action='contact-form-proc.php' name='contactform' id='contactform'>
<p>
<label for='fullname'>Your Name:</label><br/>
<input type='text' name='fullname' />
</p>
<p>
<label for='email' >Email Address:</label><br/>
<input type='text' name='email' />
</p>
<input type='submit' name='submit' value='Submit Form' />
</form>

Coding the client side of the form

Here is the sample HTML code for a simple form:





<form method='post' action='contact-form-proc.php' name='contactform' id='contactform'>

<p>

<label for='fullname'>Your Name:</label><br/>

<input type='text' name='fullname' />

</p>

<p>

<label for='email' >Email Address:</label><br/>

<input type='text' name='email' />

</p>

<input type='submit' name='submit' value='Submit Form' />

</form>








The form is defined within the <form> and </form> tags. Inside the form tag, we define the input fields. The <label> tag is used to define the description of each field for the user.

Note the action attribute of the form tag. The action attribute should point to the server side script that processes the form submissions. For this example, we have a simple PHP script that emails the form submission.

Server-side PHP script

Here is a simple server side for this form:





<?php

 

if(empty($_POST['submit']))

{

    echo "Form is not submitted!";

    exit;

}

if(empty($_POST["fullname"]) ||

    empty($_POST["email"]))

    {

        echo "Please fill the form";

        exit;

    }

     

$name = $_POST["fullname"];

$email = $_POST["email"];

 

mail( 'pmj@user10.com' , 'New form submission' , 

"New form submission: Name: $name, Email:$email"  );

 

header('Location: thank-you.html');

 

?>






The script gets the data submitted in the for through the $_POST variable. (Alternatively, you can use the$_REQUEST variable as well).

if $_POST[‘submit’] is empty, then there is something wrong. If the form is submitted, the submit variable (note that the submit button’s name in the HTML code is “submit”) will have the value of the submit button. This check is done to avoid the script being accessed directly. If the form is submitted, $_POST[‘submit’] will not be empty.

Then we do some simple validations on the name and email fields.

The PHP mail function is used to send the email.

This line: header('Location: thank-you.html'); redirects the user to another page.