FORMfields, the premiere web framework
Login
Support Home | Knowledge Base | Documentation | Forums | Contact Us
FORMfields v3 Tutorials
FORMfields Tutorials
FORMfields Lib Installation
FORMgen Installation
Manually Creating a Form
Load/Unload From a DB
Emailing a Form
Forms on Your Webpage
Creating Tables
Pagifying Data
Using CSS to Format Forms 1
Using CSS to Format Forms 2
Other Tutorials
Manually Creating a Form
Last Updated: September 18th, 2007
Info
We suggest that before you read this tutorial you check out FORMgen, the FORMfields generator that requires no programming.
The Form
Here is a simple example of a new contact form constructed with the FORMfields framework. Play around with it and see what you think. You will notice that all field data is validated (server side) when you click the "Create" button.

New Contact:

- - x
- -
Believe it or not, the source code for displaying and processing this form is as short as what follows:
<?
    
// Include the FORMfields library
    
require_once($_SERVER["DOCUMENT_ROOT"] . "/FORMfields/FORMfields.php"); // Absolute path

    ////////// FORM STRUCTURE - START //////////

    
$ffForm = new FfForm();
    
$ffForm->addField(new PersonNameField("name""Full Name"FORM_FIELD_REQUIRED));
    
$ffForm->addField(new EmailAddrField("email""Email"FORM_FIELD_REQUIRED));
    
$ffForm->addField(new PhoneNumberField("phone""Phone"FORM_FIELD_REQUIRED));
    
$ffForm->addField(new FaxNumberField("fax""Fax"FORM_FIELD_REQUIRED));
    
$ffForm->addField(new SubmitField("ff_submit""Create"));
    
$ffForm->addField(new SubmitField("ff_clear""Clear"));
    
$ffForm->addField(new SubmitField("ff_cancel""Cancel"));

    
////////// FORM STRUCTURE - END //////////

    
$ffForm->getParameters();

    if (!
$ffForm->isEmpty("ff_submit")) {
        if (
$ffForm->checkValues()) {
            
// INSERT CODE TO CREATE CONTACT
        
}
    } else if (!
$ffForm->isEmpty("ff_cancel")) {
        
// INSERT CODE FOR CANCEL OPERATION
    
} else if (!$ffForm->isEmpty("ff_clear")) {
        
$ffForm->clearAllData();
    }

?>
<html>

<head>
<title>New Contact Form</title>
<? require_once(FF_SRC "/FfIncludes.php"); ?>
</head>

<body>
    <? if (!$ffForm->isEmpty("ff_submit") && !$ffForm->getError()) { ?>
        <h1>Contact Created</h1>
    <? } else if (!$ffForm->isEmpty("ff_cancel")) { ?>
        <h1>Contact Creation Cancelled</h1>
    <? } else { ?>
        <form action="<?= $_SERVER["PHP_SELF"?>" method="get">
            <h1>New Contact:</h1>
            <?= $ffForm->getTableTag() ?>
        </form>
    <? ?>
</body>

</html>
Whether you're an expert or beginner web developer, you're probably aware that the source code for creating this form in the conventional way would be a lot longer and more complicated.

Now that we have your attention, please allow us to explain the details of the above source code.
Part 1: Form Structure
A FfForm is a container class that is used to encapsulate form fields. In the following code snippet, we instantiate a FfForm and add fields for a person's name, email address, phone number and fax number. In addition, we add submit fields for submitting the data and canceling the submission. Complete list of fields.
<?

    $ffForm 
= new FfForm(); // Instantiate a FfForm

    // Add a field to the FfForm for retrieving a person's name.
    
$ffForm->addField(new PersonNameField("name""Full Name"FORM_FIELD_REQUIRED));

    
$ffForm->addField(new EmailAddrField("email""Email"FORM_FIELD_REQUIRED));
    
$ffForm->addField(new PhoneNumberField("phone""Phone"FORM_FIELD_REQUIRED));
    
$ffForm->addField(new FaxNumberField("fax""Fax"FORM_FIELD_REQUIRED));

    
// Add a submit button for submitting the form.
    
$ffForm->addField(new SubmitField("ff_submit""Create"));

    
$ffForm->addField(new SubmitField("ff_clear""Clear"));
    
$ffForm->addField(new SubmitField("ff_cancel""Cancel"));

?>
Part 2: Retrieve Submitted Form Data
Since the FfForm encapsulates all the form fields and data, we only have to make one function call to retrieve the form data from the HTML request object.
<?
    $ffForm
->getParameters();
?>
Part 3: Validate the Form Data and Process the Data
When the user clicks the submit button, $ffForm->isEmpty("ff_submit") will return false. When this happens we want to check the form data for errors. If there are no errors then we execute code to create the contact. Typically, this create operation would be an insert into a database. (In the tutorial, Load/Unload from a DB, we will discuss how this can be easily done using FORMfields).

If the user clicks the cancel button, the code for canceling the form is executed. Typically, this cancel operation would be a redirect to another page.

If the user clicks the clear button, all the form data is cleared.
<?
    
if (!$ffForm->isEmpty("ff_submit")) {
        if (
$ffForm->checkValues()) {
            
// INSERT CODE TO CREATE CONTACT
        
}
    } else if (!
$ffForm->isEmpty("ff_cancel")) {
        
// INSERT CODE FOR CANCEL OPERATION
    
} else if (!$ffForm->isEmpty("ff_clear")) {
        
$ffForm->clearAllData();
    }
?>
Part 4: Include the CSS and JavaScript Files
The following code includes the FORMfields CSS and JavaScript files. The CSS files control the look and feel of your forms and tables and the JavaScript files provide functions to dynamically manipulate your forms.
<? require_once(FF_SRC "/FfIncludes.php"); ?>
Part 5: Display the Form
If the user has clicked "Create" and there is no error, then we display a message saying "Contact Created." Otherwise, if the user has clicked "Cancel," we display a message saying "Contact Creation Cancelled." Otherwise, we just display the form.

    <? if (!$ffForm->isEmpty("ff_submit") && !$ffForm->getError()) { ?>
        <h1>Contact Created</h1>
    <? } else if (!$ffForm->isEmpty("ff_cancel")) { ?>
        <h1>Contact Creation Cancelled</h1>
    <? } else { ?>
        <form action="<?= $_SERVER["PHP_SELF"?>" method="get">
            <h1>New Contact:</h1>
            <?= $ffForm->getTableTag() ?>
        </form>
    <? ?>

Note: Typically the cancel and submit operations would cause a redirect to another page, however in this example these operations leave us on the same page. This is why the above code snippet displays more than just the form.
Info
Support | Earn Money
Copyright © 2005-2018 Brain Book Software LLC.
Built with FORMfields, the premiere web framework.