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.<\/p>\n
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.
\nFor this example we will use:<\/p>\n
\n[ulp id=’8njY7i2QRy6sg8pg’]<\/p>\n
HTML forms are created with the opening index.html<\/em><\/span><\/p>\n 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 index1.html<\/em><\/span><\/p>\n The code above shows a form with form action GET.<\/p>\n 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? For example we have created a form using the GET method and the form contains a text field index2.html<\/em><\/span><\/p>\n This is a simple\/trivial registration form and below is the code for manipulating the form data.<\/p>\n index.php<\/em><\/span><\/p>\n The form data is sent using the POST method, so the script extracts the form field value from the 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.<\/p>\n<form><\/code> and closing <\/form><\/code><\/p>\n<\/code> tag. Theform<\/code> tag defines an html form.
\nForm elements are different, they can be text fields, checkboxes, radio buttons, submit buttons, and more.<\/p>\n \r\n<!DOCTYPE html> \r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML Form<\/title>\r\n\t\r\n\t<\/head>\r\n<body>\r\n<form action=\"index.php\" method =\"post\">\r\nName: \r\n<input type =\"text\" name =\"name\" required>\r\n<br>\r\nE-mail: \r\n<input type =\"email\" name =\"email\" required>\r\n<br>\r\n<input type=\"submit\" value=submit>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nGET<\/code>or POST<\/code><\/p>\n1.1 GET Method<\/h2>\n
\n
\n
http:\/\/www.server.com\/index.htm?name1=value<\/code><\/li>\n \r\n<!DOCTYPE html> \r\n<html lang=eng>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title>HTML Form<\/title>\r\n\t\r\n\t<\/head>\r\n<body>\r\n<form action=\"index.php\" method =\"get\">\r\nName: <br>\r\n<input type =\"text\" name =\"name\" required>\r\n<br>\r\nCar: <br>\r\n<select name =\"cars\">\r\n<option value=\"volvo\"> Volvo <\/\r\noption>\r\n<option value=\"saab\"> Saab <\/\r\noption >\r\n<option value=\"fiat\"> Fiat <\/\r\noption >\r\n<option value=\"audi\"> Audi <\/\r\noption>\r\n<\/select>\r\n<br>\r\n<input type=\"submit\" value=submit>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n1.2 POST Method<\/h2>\n
\n
\n
\n
\n
1.3 Handling forms data with PHP<\/h2>\n
\nFirst 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\"><\/code>.
\nNext 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<\/code> and $_POST<\/code> superglobal arrays<\/p>\n\n
\n
\n
\n
\n< input type=text name=text ><\/code>.
\nWe can access the data in this form field by using the $_GET <\/code> superglobal array
\n$text=$_GET[\"text\"];<\/code><\/p>\n \r\n<!DOCTYPE html> \r\n <html lang=\u201den\u201d> \r\n <head> \r\n <title>Membership Form<\/title> \r\n<\/head>\r\n <body> \r\n <h1>Membership Form<\/h1>\r\n <p>Thanks for choosing to join The Programming Language Club.<\/p>\r\n <form action=index.php method=post> \r\n\t<div style=\"width: 30em;\" >\r\n <label for=firstName>First name<\/label><br> <input type=text name=firstName id=firstName required \/><br><br>\r\n <label for=lastName>Last name<\/label> <br> <input type=text name=lastName id=lastName required\/><br><br>\r\n <label for=password1>Choose a password<\/label> <br> <input type=password name=password1 id=password1 required \/> <br> <br> \r\n\t\t<label for=password2>Retype password<\/label><br> <input type=password name=password2 id=password2 required \/> <br> <br>\r\n <label for=genderMale>Are you male...<\/label> <input type=radio name=gender id=genderMale value=Male \/> \r\n\t\t<label for=genderFemale>...or female?<\/label> <input type=radio name=gender id=genderFemale value=Female checked \/> <br> <br>\r\n <label for=favoriteWidget>What's your favorite language?<\/label> <select name=favoriteWidget id=favoriteWidget size=1> \r\n\t\t<option value=java>Java<\/option> \r\n\t\t<option value=php>PHP<\/option> \r\n\t\t<option value=phyton>PHYTON<\/option> \r\n\t\t<\/select> <br> <br>\r\n <label for=newsletter>Do you want to receive our newsletter?<\/label> \r\n\t\t<input type=checkbox name=newsletter id=newsletter value=yes \/> <br> <br>\r\n <label for=comments>Any comments?<\/label> \r\n\t\t<textarea name=comments id=comments rows=4 cols=50> <\/textarea>\r\n <div style=\u201dclear: both;\u201d> \r\n\t<input type=submit name=submitButton id=submitButton value=Send Details \/> \r\n\t<input type=reset name=resetButton id=resetButton value=\"Reset Form\" style=\"margin-right: 20px;\" \/> \r\n\t<\/div> \r\n\t<\/div> \r\n\t<\/form>\r\n <\/body> <\/html>\r\n\r\n<\/pre>\n
\r\n<!DOCTYPE html> \r\n <html lang=\u201den\u201d> \r\n <head> \r\n <title>Membership Form<\/title> \r\n<\/head>\r\n <body> \r\n <h1>Membership Form<\/h1>\r\n <p>Thanks for choosing to join The Programming Language Club.<\/p>\r\n <form action=index.php method=post> \r\n\t<div style=\"width: 30em;\" >\r\n <label for=firstName>First name<\/label><br> <input type=text name=firstName id=firstName required \/><br><br>\r\n <label for=lastName>Last name<\/label> <br> <input type=text name=lastName id=lastName required\/><br><br>\r\n <label for=password1>Choose a password<\/label> <br> <input type=password name=password1 id=password1 required \/> <br> <br> \r\n\t\t<label for=password2>Retype password<\/label><br> <input type=password name=password2 id=password2 required \/> <br> <br>\r\n <label for=genderMale>Are you male...<\/label> <input type=radio name=gender id=genderMale value=Male \/> \r\n\t\t<label for=genderFemale>...or female?<\/label> <input type=radio name=gender id=genderFemale value=Female checked \/> <br> <br>\r\n <label for=favoriteWidget>What's your favorite language?<\/label> <select name=favoriteWidget id=favoriteWidget size=1> \r\n\t\t<option value=java>Java<\/option> \r\n\t\t<option value=php>PHP<\/option> \r\n\t\t<option value=phyton>PHYTON<\/option> \r\n\t\t<\/select> <br> <br>\r\n <label for=newsletter>Do you want to receive our newsletter?<\/label> \r\n\t\t<input type=checkbox name=newsletter id=newsletter value=yes \/> <br> <br>\r\n <label for=comments>Any comments?<\/label> \r\n\t\t<textarea name=comments id=comments rows=4 cols=50> <\/textarea>\r\n <div style=\u201dclear: both;\u201d> \r\n\t<input type=submit name=submitButton id=submitButton value=Send Details \/> \r\n\t<input type=reset name=resetButton id=resetButton value=\"Reset Form\" style=\"margin-right: 20px;\" \/> \r\n\t<\/div> \r\n\t<\/div> \r\n\t<\/form>\r\n <\/body> <\/html>\r\n\r\n<\/pre>\n
$_POST<\/code> associative array and displays each field using PHP methodecho()<\/code>. The script above is used just as an example, in the real world you shouldn’t display the password the user has just entered.
\nIt is considered bad practise to trust user input without validating it. So you shouldn’t pass the values in $_GET<\/code> and $_POST<\/code> directly to echo<\/code> or print<\/code> 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.<\/p>\n2. Summary<\/h2>\n
3. Download The Source Code<\/h2>\n