Describes how to create dynamic HTML forms using php.
Terms of Agreement:
By using this article, you agree to the following terms...
1) You may use
this article in your own programs (and may compile it into a program and distribute it in compiled format for langauges that allow it) freely and with no charge.
2) You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3) You may link to this article from another website, but ONLY if it is not wrapped in a frame.
4) You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.
How do you build html form objects to make them dynamic? Why would you want to? What are examples of dynamic form objects scripted in php? We'll answer these questions and more, and provide you with simple, usable code in the pages ahead. By the time you've finished reading you will be able to create these dynamic form objects yourself and build better and smarter forms.
Background - It all starts at the Form
Our look at 'Building Dynamic Form Controls' is based on the understanding that you know html form objects and how to use html form objects in a web page. Briefly, these objects include text box, textarea, checkbox, radio, select, hidden, reset, submit, button and image objects and the form element itself. Each form object should be given a name. Each named object will have a value. The combination of name and value attributes are known as name=value pairs. Here's a plain text input type example of a name=value pair:
Text
/* the name=value pair is firstName=*/
<input type="text" name="firstName" value="">
Using the standard form attribute called "action" is the way we decide what process or file will do something with our form data.
Alternatively - and frequently - we want a script to handle our form, and not simply email the data as in the form code above. It is here, in handling form objects after they are parsed by php, that we begin our discussion.
Dynamic Scripting of Form Objects
Remember filling out that web form, clicking on submit - but you missed something and got an error message instead? So you clicked on the 'Back' button, the form page loaded and ... all your entries were gone and you had to start from scratch again? Here's code to use instead. By using dynamic handling of any name=value pair we can avoid 'dead end' forms, and make it easy for the user to provide us data. We do this by building a form containing these objects. The objects themselves contain the values that we need. Here's how you code some of the more common objects on that form to retrieve the values you need:
Build a Dynamic Text Input Type
/* The current value for $firstName will reappear in the text input type */
<input type="text" name="firstName" value="<?php echo $firstName;?>">
When the form is submitted and then redisplayed it will contain the current value for the form object. Note that these values are not available forever! Unless otherwise handled, the values persist only while processing the form. If any another page is loaded without our form variables then we lose our $firstName variable value - and all our other variables. We will see one way to make variable values persist when we consider the hidden input type a bit later. But first let's take a simpler case - the textarea input type:
Build a Dynamic Textarea Input Type
Textarea - Simple example
/* Outcome: the textarea box is repopulated with the original input */
<textarea name="query" cols="75" rows="5" wrap="soft"><?php echo $query;?></textarea>
This is one of my favorite uses of dynamic form controls. It just makes sense to automatically offer data that you will need, rather than re-enter it. If you have a long-winded sql statement that you will often need to retype then regenerating it with dynamic controls makes perfect sense. We can also use the 'if' decision structure to test if the user has chosen the functionality, in this case to 'reuse' the last query:
Textarea - example with Decision
/* Outcome: the textarea box is repopulated with the original input - if chosen */
<textarea name="query" cols="75" rows="5" wrap="soft"><?php if ($showLastQuery == "reuse") {echo $query;}?></textarea>
The user can make a choice to 'show the last query' by using the radio input type:
Build a Dynamic Radio Input Type
/* Outcome: the radio input type chosen by the user remains checked */
<input type="radio" name="showLastQuery" value="reuse"
<?php if($showLastQuery == 'reuse'){echo " CHECKED";}?>> Reuse Query
<input type="radio" name="showLastQuery" value="blank"
<?php if($showLastQuery == 'blank'){echo " CHECKED";}?>> Blank
This code needs to make a decision in order to know if it should be ' CHECKED', or not. If no radio input type has been checked then there is no change to the ' CHECKED' indicator. Again, our code is simply maintaining the status quo for our form - we're wanting to display another form exactly like the one the user just filled out... and we can if we replicate each object with its correct value. And now on to checkboxes, which are just like radio input types, but with a little twist...
Build a Dynamic Checkbox Input Type
/* Outcome: the checkbox input type chosen by the user remains checked */
<input type="checkbox" name="showSummary"<?php if($showSummary == "on"){echo " CHECKED";}?>> Summary
This example code uses a 'showSummary' object - but the named object could be any of your checkboxes too. In order to test for the existence of a choice in the checkbox we test for the named object's value, and if the value is set then indicate so in our code as above. To put this another way, we look to see if our checkbox variable is "on". If it is, we dynamically render this in the form checkbox object. Because each checkbox should have its own name and value then we can test for and recreate any number of additional checkboxes as needed. To use the code above all you need to do is replace:
1. the form object name with your own,
2. the text label for the object, in this case it is called 'Summary'. Use your own.
Now that we can build single form controls, let's move on to the multi faceted select list:
Build a Dynamic Select List
/* Outcome: the select option chosen by the user remains selected */
Category <select name="snack">
<option value="<?php echo $snack;?>" SELECTED><?php echo $snack;?></option>
<option value="1">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Kiwis">Kiwis</option>
</select>
What it looks like:
Category
The distinguishing feature of this object is the use of the word ' SELECTED' which causes the option value associated with the label to be displayed to the user. Note that ' SELECTED' is a different word than ' CHECKED' - you need to use ' SELECT' with the select form object. While this code will return us the original form values and it is what we will use in our form, you should know that it also has unwanted side effects. One side effect is that NO text will show as the default value. It is nice to be able to see some choices. I haven't found a workable solution for this, other than using one form to add data with and another for updating the data. But it is really nice to just use the one form everywhere, including it where needed:
/* Outcome: myForm.php is parsed and inserted at the current page location */
<?php include("myForm.php");?>
The included file could be an 'Add User Data' form or perhaps a database search form. By making the form available again - retaining user set values - we make it easy for the user to make corrections or refine their search.
A Second Select Side Effect
The second and not so obvious side effect concerns the selected object value. Look at the 'Apples' line. The value for this selection is actually "1". If you were to insert that value into a database and later retrieve it, then 'Apples' would NOT show as the selected value, instead the character "1" would display. Accordingly, we need to be careful in choosing the value so as to replicate or at least closely match the related label in order to maintain some semblance of interface continuity. Overall, using a dynamic select list means compromising 'perfect' functionality in order to achieve better efficiency in form design and usage - but still it's worth it.
Build a Dynamic Hidden Input Type
Next we look at an input type with more obscure utility - the hidden input type:
Hidden
/* Outcome: the name=value pair is passed along to the next script, but may be seen with 'View Source' */
<input type="hidden" name="goal" value="<?php echo $goal;?>">
I use $goal frequently in forms. It can act as the trigger in a switch() decision control construct, like this:
/* attain the goal - insert, update, delete, select, password lookup */
switch ($goal) {
case "Add" // offer the insert form - user adds a new listing
include("addForm.php");
break;
}
Thus we use a hidden variable which tells our processing script exactly what our goal is - and we could dynamically regenerate the hidden variable for use in the next page too. Sometimes I make this variable do double duty by using it as the page heading, which saves a bit of coding and correctly reports the purpose of the page.
The last singular input type we'll look at is the submit input type:
Build a Dynamic Submit Input Type
Submit - Simple
/* Outcome: the submit button will display a variable as its value */
<input type="submit" name="submit" value="<?php echo $goal;?>">
Submit - more than one variable used in label
/* Outcome: the submit button will display more than one variable as its value */
<input type="submit" name="submit" value="<?php echo"$goal #$diagramid - $buildingname";?>">
This submit button indicates its purpose to the user with $goal. We will know if it's a delete, update or other operation we're about to launch, because it's written right on the button! Furthermore, we reuse the database unique key and 'buildingname' to clearly establish the data we're working with. It's to the point. It lessens the chances of user error after too many cups of coffee and or too late in the morning...
That pretty well arrives at the end of the standard form controls most used - but what about combination controls? What are they, how can they help us and what does their code look like?
Build a Combination Control
/* Outcome: the combo control will pass the embedded hidden value of a unique id */
<form name="Manage-Yellow-Listings" action="adminResult.php" method="post" target="_blank">
<input type="hidden" name="recordNumber" value="<?php echo $recordNumber;?>">
This simple piece of code is REALLY handy. It gives you point and click database administration by bringing in the record index number as a hidden variable and offering a choice of radio buttons to trigger either the update or the delete process. Essentially all you need to do is look at the data for the record, click on 'Process' or keep scrolling down to the next record, which contains a similar dynamic control. What could be easier for a database administrator?
Build a Javascript Back Control
Our knowledge of building dynamic forms would not be complete without some mention of Javascript. Javascript, a language from the folks at Netscape - but also supported in Internet Explorer - gives us at least one useful control:
Back Button
/* Outcome: makes a navigation control to go back, apparently faster than browser controls. */
<input type="button" name="goBack" value="<== Back" onclick="history.back(1)">
With this control you need to be aware that 'Back' means to the page last loaded in your browser, and not necessarily the logical previous page on the website. Care must be taken if using Javascript to build other controls because the Javascript language and its versions are unevenly supported in all browsers - or perhaps not supported at all. The Back history.location method was first introduced in Navigator 2 and Internet Explorer 3. If your users have one of those browsers or newer, then this control is fairly safe to use.
Looking at More Source Code
You can see most of these controls in live action at http//www.dreamriver.com/phpYellow/ . You can also download the php source code for phpYellow and see how these controls all fit and flow together, as well as observing the password and username secured backend Administration pages and source code in the distribution files. The distribution files may be found at http//www.dreamriver.com/software/ . Please note, the source code for phpYellow is not up for discussion here - there remains lots of room for improvement and there is another forum for that - rather it is the dynamic rendering of form objects described herein which I will be happy to answer your questions on at any time.
Build a Control - Summary
We've looked at almost every html form object input type. We've shown sample code, with comments, detailing how the object behavior is dynamically rendered. We learned that it's really just name=value pairs, and that we use php as the provider of the value. Along the way we learned a few tricks and techniques in handling these controls. We even saw a useful combination control and got our first glimpse at Javascript enhanced controls. Overall, we now know how to dynamically script form objects in php by approaching them one object at at time. Building dynamic controls makes our forms smarter, improves the user surfing experience and can reduce the amount of time you spend developing static html forms. One dynamic form will often do the job much better!
