From time to time, it will occur to you as a developer that you may need to retrieve several val- ues from the same select box. Luckily, HTML and PHP 5 have made an allowance for such a 1 3 - 1 0 ■ C R E AT I N G F O R M E L E M E N T S W I T H M U LT I P L E O P T I O N S
506
feature. Commonly referred to as a list box, the functionality involved allows you to select a multitude of items (by holding down the Control key) and then submit them as one. The fol- lowing example allows you to select a number of items and then display only the selected items in the script.
The Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Sample 13.10</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="width: 500px; text-align: left;">
<?php
//If you have received a submission.
if ($_POST['submitted'] == "yes"){
//Check if any have been selected.
if (count ($_POST['fruit']) != 0){
echo "Your Selections:<br />";
} else {
echo "You have not made any selections.<br /><br />";
}
//You can actually treat the submittal as an array.
for ($i = 0; $i < count ($_POST['fruit']); $i++){
echo $_POST['fruit'][$i] . "<br />";
}
?><a href="sample13_10.php">Try Again</a><?php }
//Show the form only if there is no submission.
if ($_POST['submitted'] != "yes"){
?>
<form action="sample13_10.php" method="post">
<p>Example:</p>
<input type="hidden" name="submitted" value="yes" />
Your Choice (s): <br />
<select name="fruit[]" multiple="multiple" style="width: 400px;➥ height: 100px;">
<option value="Bananas">Bananas</option>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Pears">Pears</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select><br />
<input type="submit" value="Submit" style="margin-top: 10px;" />
</form>
1 3 - 1 0 ■ C R E AT I N G F O R M E L E M E N T S W I T H M U LT I P L E O P T I O N S 507
<?php }
?>
</div>
</body>
</html>
How It Works
You should note a few key features when examining this code. In the form element itself, you will witness a few new attributes to the select tag. You can designate the element as a list box by adding the attribute multiple="multiple", and you designate the field as something that can be read as an array by adding the []to the end of the element name. Once PHP gets a hold of the posted value, it treats the value as an array. By walking through the array one element at a time using a forloop, you can output the selections by merely outputting the value of the array. If a particular option was not selected, it simply will not show up in the array.
13-11. Creating Form Elements Based on the Current Time and/or Date
Occasionally, it makes sense to create a form-based element that will react according to the current date and/or time on the server. Doing so speeds up form entry for the user and can make things slightly more ergonomic. To create this sort of functionality, you merely embed some PHP into the HTML to create a dynamic element set. Those of you who have studied Jon Stephens’s Chapter 5 will find this section of code to be no trouble at all. The following example allows you to select a value with the form elements being preset to the current date and time.
The Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Sample 13.11</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="width: 500px; text-align: left;">
<?php
//If you have received a submission.
if ($_POST['submitted'] == "yes"){
echo $_POST['month'] . "/" . $_POST['day'] . "/" . $_POST['year']➥ . " - " . $_POST['hour'] . ":" . $_POST['minute']➥
. ":" . $_POST['second'];
?><br /><a href="sample13_11.php">Try Again</a><?php }
//Only show the form if there is no submission.
if ($_POST['submitted'] != "yes"){
1 3 - 1 1 ■ C R E AT I N G F O R M E L E M E N T S B A S E D O N T H E C U R R E N T T I M E A N D / O R D AT E 508
?>
<form action="sample13_11.php" method="post">
<p>Example:</p>
<input type="hidden" name="submitted" value="yes" />
Select a Date and Time: <br />
<select name="month">
<?php
for ($i = 1; $i <= 12; $i++){
?><option value="<?php echo $i; ?>"<?php if ($i == date ("n")){?>➥ selected="selected"<?php } ?>><?php echo $i; ?></option><?php
}
?>
</select> /
<select name="day">
<?php
for ($i = 1; $i <= 31; $i++){
?><option value="<?php echo $i; ?>"<?php if ($i == date ("j")){?>➥ selected="selected"<?php } ?>><?php echo $i; ?></option><?php
}
?>
</select> /
<select name="year">
<?php
for ($i = 1950; $i <= date ("Y"); $i++){
?><option value="<?php echo $i; ?>"<?php if ($i == date ("Y")){?>➥ selected="selected"<?php } ?>><?php echo $i; ?></option><?php
}
?>
</select> -
<select name="hour">
<?php
for ($i = 1; $i <= 24; $i++){
?><option value="<?php echo $i; ?>"<?php if ($i == date ("G")){?>➥ selected="selected"<?php } ?>><?php echo $i; ?></option><?php
}
?>
</select> :
<select name="minute">
<?php
for ($i = 1; $i <= 60; $i++){
//Deal with leading zeros.
if ($i < 10){
$comparem = "0" . $i;
} else {
$comparem = $i;
}
?><option value="<?php echo $i; ?>"➥
1 3 - 1 1 ■ C R E AT I N G F O R M E L E M E N T S B A S E D O N T H E C U R R E N T T I M E A N D / O R D AT E 509
<?php if ($comparem == date ("i")){?> selected="selected"<?php } ?>>➥
<?php echo $i; ?></option><?php }
?>
</select> :
<select name="second">
<?php
for ($i = 1; $i <= 60; $i++){
//Deal with leading zeros.
if ($i < 10){
$compares = "0" . $i;
} else {
$compares = $i;
}
?><option value="<?php echo $i; ?>"➥
<?php if ($compares == date ("s")){?> selected="selected"<?php } ?>>➥
<?php echo $i; ?></option><?php }
?>
</select>
<br /><input type="submit" value="Submit" style="margin-top: 10px;" />
</form>
<?php }
?>
</div>
</body>
</html>
How It Works
The way this script works is by providing the selected="selected"value in the case where the current date element equals its counterpart in the select box. By being marked as selected when the proper element approaches, the form provides the ability to select the current date and time with the greatest of ease. Of course, should users want to select a different date and/or time, that is entirely up to them. This is merely meant to act as a time-saver to improve the ergonomics of the web application.
Summary
Like it or not, dealing with forms will become a common occurrence with pretty much any script you happen to be building. The opportunity to collect information from a user is limited almost entirely to form collection and is the standard for such functionality.
With this in mind, it is important to create forms based on a number of elements. While any developer can create a form to collect information, the way to single yourself out as a competent developer is to consider factors such as security, ergonomics, validation, and ease of use.
1 3 - 1 1 ■ C R E AT I N G F O R M E L E M E N T S B A S E D O N T H E C U R R E N T T I M E A N D / O R D AT E 510
A form should collect the information required and do it in such a way that the user feels as though the form flows quite easily and effectively. You should perform error handling at all times, and errors should die gracefully with helpful error messages and an intuitive return to the form with the information that was originally submitted.
Choosing the correct form element for the job is a task you should not take lightly, and each form should be designed from the ground up with ease of use in mind. Ask yourself the question, what would be the most effective? Also, what would be the easiest means of collect- ing a certain amount of information?
With a properly thought-out plan of attack, you can create forms that will do more than just serve their purpose; they will function almost as a wizard does, with the user constantly able to understand what is happening and not being allowed to perform any functionality they should not have access to do.
Looking Ahead
In the next chapter, Frank M. Kromann will guide you through the fairly modern concepts of markup and Extensible Markup Language (XML). The industry is leaning more and more toward XML as a portable and extremely valuable form of both data collection and data port- ing, and Chapter 14 will showcase some of PHP 5’s robust handling of XML.
1 3 - 1 1 ■ C R E AT I N G F O R M E L E M E N T S B A S E D O N T H E C U R R E N T T I M E A N D / O R D AT E 511
Working with Markup
PHP was originally designed as a way to use a special Hypertext Markup Language (HTML) tag to access custom-made business logic written in C. This system has since evolved to a full programming language that allows an HTML developer to add and parse code or a program- mer to create advanced scripts that generate HTML documents, images, or other forms of documents. The processing of the special PHP tag takes place on the server side, before the final document is transferred to the browser or client. This is why the language used to be called PHP Hypertext Preprocessor.
When you request that a web server serve a document, the document is usually read from a disk or other storage device and transferred directly to the client. You can instruct the web server to preprocess the document before sending it to the client. This is how PHP documents or scripts are handled. It is not the document but the output from the preprocessor that is sent to the client when a browser requests a PHP script. The script can define the document type—or, as it is called in the web world, the content type—before any content is sent to the client. This makes it possible for a PHP script to return a simple text file, an HTML document, or even binary images files generated on the fly.