Using HTML Forms

Handling an HTML form with PHP is one of the most important process in a dynamic Web site. Two steps are involved: first you create the HTML form, and then you create the corresponding PHP script that will receive and process the form data.

1) An HTML form is created using the form tags and various elements for taking input.
- Here is an example of an HTML form with one input text box, two radio buttons and a submit button:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<body>

<form action="script.php" method="post">
 Name: <input type="text" name="user" /><br />
 <input type="radio" name="gen" value="man" />Man
 <input type="radio" name="gen" value="woman" />Woman<br />
 <input type="submit" name="submit" value="Send" />
</form>

</body>
</html>

- The action attribute dictates to which page the form data will be sent.
- The method attribute dictates how the data is sent to the PHP script. It has two options: post and get (post is the value used most frequently).
- The name attribute gives the name of that form field. With this name, the php script can retrieve data from that field.
- The value attribute define a value for that form element.
If multiple radio buttons have the same name, only one can be chosen by the user.

The HTML code above will display the following form:

When a user fills out the form above and click on the submit button (Send), the form data is sent to the "script.php" file.

2) In the "script.php" file we write the PHP script that will receive and process the form data.
- All data received from an HTML form with method="post" are stored in the superglobal $_POST array.

<?php
if (isset($_POST['submit'])) {
  $user = $_POST['user'];
  $gen = $_POST['gen'];

  echo 'User: '. $user. ' - gender: '. $gen;
}
?>

First, the script use the expresion if (isset($_POST['submit'])) to determine if the form has been submitted (checks if the form element with name="submit" has been received).
The data entered into the form input which has name="user", will be accessible through $_POST['user']. The same applies to the other form elements, their name attribute will automatically be the keys in the $_POST array.
In the PHP script above, the values received from that form are added in $user and $gen variables, then they are displayed with the "echo" instruction.
The result will be something like this:

User: MarPlo - gender: man

If you use method="get" in the form tag, then, in the PHP script you must use $_GET ($_GET['field_name']) or $_REQUEST ($_REQUEST['field_name']).
- With $_REQUEST you can get data from both "post" and "get" methods.

Form Validation

Data validation is necessary to avoid errors and for security.
Validating form data requires the use of conditionals, operators, and specific functions. One standard function to be used is isset(), which tests if a variable has a value (but not NULL).
One issue with the isset() function is that an empty string results as TRUE. Along with the isset() function we can use a construction with the strlen() function to check if the string has at least one character.

Let's see a more complete example, with the PHP code and the HTML form in the same php file.
To test yourself this example, add the fallowing code in a php file, than access it in your browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PHP form example</title>
</head>
<body>

<?php
// check if there are received the necessary data from the form
if (isset($_POST['user']) && isset($_POST['age'])) {
  // adds the values in variables, romoving white spaces from the beginning and the end of the values
    $user = trim($_POST['user']);
    $age = trim($_POST['age']);

  // check if data are valid
  if (strlen($user)>0 && is_numeric($age)) {
    echo $user. ' - '. $age. ' years old.';
  }
  else {   // if not all data are valid
    echo '<h4>Fill the form with valid data</h4>';
  }
}
else {   // if no data from form
  echo '<h4>Fill the form</h4>';
}
?>

<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post">
 User: <input type="text" name="user" /><br />
 Age: <input type="text" name="age" /><br />
 <input type="submit" value="Send" />
</form>

</body>
</html>

- First, the PHP script uses the isset() function to check if the necessary data from the form are sent. Then, if that data are received, adds them in variable, using the trim() function to remove white spaces from the beginning and the end of the values.
- If there isn't data received from the form, will be executed the else statement, wich outputs: "<h4>Fill the form</h4>".
- To not use empty value, we use "strlen($user)>0" to check if the data from 'user' has at least one character.
- Becouse the age must be a number, we use "is_numeric($age)" to check if the data from 'age' is a numeric value.
- If the $user has an empty value or the $age isn't a number, will be executed the else statement, wich outputs: "<h4>Fill the form with valid data</h4>".

The code: <?php echo $_SERVER['SCRIPT_NAME']; ?> outputs the path (the filename) of the current script, often used for the "action" attribute of the form that must send data to the same php file where the form is created.
- You can also have a form submit back to this same page by using no value for the action attribute:
<form action="" method="post">

<<-If Else conditionals, Comparative .. -- $_GET, $_POST and $_REQUEST ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Using HTML Forms

Php-mysql Course

Form Validation

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month