In this example we will learn how to create HTML forms and how to handle data transmitted through them with PHP. HTML forms allows user’s send data to a server or website.
If a website needs to collect a user name, age or date of birth it’s most likely going to use HTML forms. Login and registration systems for websites are built with html forms.
For this example we will use:
- A computer with PHP>= 5.5 installed
- notepad++
1. Creating HTML forms
HTML forms are created with the opening <form> and closing </form>
tag. Theform tag defines an html form.
Form elements are different, they can be text fields, checkboxes, radio buttons, submit buttons, and more.
index.html
<!DOCTYPE html>
<html lang=eng>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML Form</title>
</head>
<body>
<form action="index.php" method ="post">
Name:
<input type ="text" name ="name" required>
<br>
E-mail:
<input type ="email" name ="email" required>
<br>
<input type="submit" value=submit>
</form>
</body>
</html>
The code above creates an html form. The “action” attribute in the form tag(line 23) tells the form where to submit it’s content while the “method” attribute let’s the form know which method to use when transmitting it’s content. The method attribute can either be GETor POST
1.1 GET Method
- The get method is visible to everyone
- The GET method sends encoded user information appended to the page. e.g
http://www.server.com/index.htm?name1=value - The GET method has a limitation of about 2000 characters
- The GET method should never be used to transmit sensitive information(e.g passwords)
- PHP provides $_GET associative array to access all the data sent using GET method.
index1.html
<!DOCTYPE html>
<html lang=eng>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML Form</title>
</head>
<body>
<form action="index.php" method ="get">
Name: <br>
<input type ="text" name ="name" required>
<br>
Car: <br>
<select name ="cars">
<option value="volvo"> Volvo </
option>
<option value="saab"> Saab </
option >
<option value="fiat"> Fiat </
option >
<option value="audi"> Audi </
option>
</select>
<br>
<input type="submit" value=submit>
</form>
</body>
</html>
The code above shows a form with form action GET.
1.2 POST Method
- Information sent with POST is invisible to others
- It has no limitations on data size
- PHP provides $_POST associative array to access all the information sent using POST method
1.3 Handling forms data with PHP
We have learnt how to create HTML forms and how data in HTML forms are sent to the server. How do we write a script that handles and manipulates the form data when it arrives at the server?
First of all, the form action attribute needs to contain the URL of the PHP script that will handle the form. e.g <form action="index.php" method ="post">.
Next we need to create the form handler (index.php). When the form data gets to the server the script “index.php” is called. The script then needs to read the form data and act on it. We use $_GET and $_POST superglobal arrays
- $_GET: Contains a list of all the field names and values sent by a form using the GET method
- $_POST: Contains a list of all the field names and values sent by a form using the POST method.
For example we have created a form using the GET method and the form contains a text field
< input type=text name=text >.
We can access the data in this form field by using the $_GET superglobal array
$text=$_GET["text"];
index2.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Membership Form</title>
</head>
<body>
<h1>Membership Form</h1>
<p>Thanks for choosing to join The Programming Language Club.</p>
<form action=index.php method=post>
<div style="width: 30em;" >
<label for=firstName>First name</label><br> <input type=text name=firstName id=firstName required /><br><br>
<label for=lastName>Last name</label> <br> <input type=text name=lastName id=lastName required/><br><br>
<label for=password1>Choose a password</label> <br> <input type=password name=password1 id=password1 required /> <br> <br>
<label for=password2>Retype password</label><br> <input type=password name=password2 id=password2 required /> <br> <br>
<label for=genderMale>Are you male...</label> <input type=radio name=gender id=genderMale value=Male />
<label for=genderFemale>...or female?</label> <input type=radio name=gender id=genderFemale value=Female checked /> <br> <br>
<label for=favoriteWidget>What's your favorite language?</label> <select name=favoriteWidget id=favoriteWidget size=1>
<option value=java>Java</option>
<option value=php>PHP</option>
<option value=phyton>PHYTON</option>
</select> <br> <br>
<label for=newsletter>Do you want to receive our newsletter?</label>
<input type=checkbox name=newsletter id=newsletter value=yes /> <br> <br>
<label for=comments>Any comments?</label>
<textarea name=comments id=comments rows=4 cols=50> </textarea>
<div style=”clear: both;”>
<input type=submit name=submitButton id=submitButton value=Send Details />
<input type=reset name=resetButton id=resetButton value="Reset Form" style="margin-right: 20px;" />
</div>
</div>
</form>
</body> </html>
This is a simple/trivial registration form and below is the code for manipulating the form data.
index.php
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Membership Form</title>
</head>
<body>
<h1>Membership Form</h1>
<p>Thanks for choosing to join The Programming Language Club.</p>
<form action=index.php method=post>
<div style="width: 30em;" >
<label for=firstName>First name</label><br> <input type=text name=firstName id=firstName required /><br><br>
<label for=lastName>Last name</label> <br> <input type=text name=lastName id=lastName required/><br><br>
<label for=password1>Choose a password</label> <br> <input type=password name=password1 id=password1 required /> <br> <br>
<label for=password2>Retype password</label><br> <input type=password name=password2 id=password2 required /> <br> <br>
<label for=genderMale>Are you male...</label> <input type=radio name=gender id=genderMale value=Male />
<label for=genderFemale>...or female?</label> <input type=radio name=gender id=genderFemale value=Female checked /> <br> <br>
<label for=favoriteWidget>What's your favorite language?</label> <select name=favoriteWidget id=favoriteWidget size=1>
<option value=java>Java</option>
<option value=php>PHP</option>
<option value=phyton>PHYTON</option>
</select> <br> <br>
<label for=newsletter>Do you want to receive our newsletter?</label>
<input type=checkbox name=newsletter id=newsletter value=yes /> <br> <br>
<label for=comments>Any comments?</label>
<textarea name=comments id=comments rows=4 cols=50> </textarea>
<div style=”clear: both;”>
<input type=submit name=submitButton id=submitButton value=Send Details />
<input type=reset name=resetButton id=resetButton value="Reset Form" style="margin-right: 20px;" />
</div>
</div>
</form>
</body> </html>
The form data is sent using the POST method, so the script extracts the form field value from the $_POST associative array and displays each field using PHP methodecho(). The script above is used just as an example, in the real world you shouldn’t display the password the user has just entered.
It is considered bad practise to trust user input without validating it. So you shouldn’t pass the values in $_GET and $_POST directly to echo or print for display in a webpage. A malicious user might be trying to break into the site, it is quite easy for a malicious user to submit form data to an unprotected site that could be used to gain access to other users credentials.
2. Summary
In this example we learnt about html forms, what they are and how to create them. We also learnt how to handle them in PHP.
3. Download The Source Code
You can download the full source code of this example here: phpformactionexample
