Source code in Qf2ValidTypes.php

To see how this is used return to this tutorial index.

    // This is a form that demonstrates one of every type of input field that QuickForm2 knows about.
    // It prints out what results from the form being filled in, the form is not pretty and the
    // data doesn't make a lot of sense.

    // This is QuickForm2 - without any attempt at QF1 compatability.

    // This should be considered work in progress since there are things about QF2 that I don't
    // fully understand.

    // It would be nice to do something similar that shows one of every type of input validation.

    // Copyright (c) 2009, Parliament Hill Computers ( Author: Alain D D Williams (
    // You may used this file as the basis your own (or organisation's/company's) project (under whatever
    // licence that you see fit), but may not claim ownership or copyright of the substantially unmodified file.
    // This file is made available in the hope that it is useful, there is no warranty at all, use at your own risk.

    // SCCS: @(#)Qf2ValidTypes.php	1.6 10/21/13 15:08:34
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <title>Quickform Demo</title>
    <link rel="stylesheet" type="text/css" href="/DefaultStyle.css">
    <link rel="stylesheet" type="text/css" href="Qf2Style.css">

  <!-- A standard page header -->
  <div style='position : absolute;text-align: left;top:10px;'>
   <a href='/'><img src='/Images/kite_40_83_trans.gif' width="40" height="83" alt="Parliament Hill Computers Ltd" style="border-width: 0;"></a>
  <div style='top:0px;margin:0px auto;text-align: center; font-size:40pt; '>
   Simple Quickform

    require_once "HTML/QuickForm2.php";

    // Create a GET form with the name QfDemo:
    $form = new HTML_QuickForm2('QfDemo', 'post');
    $form->setAttribute('enctype', 'multipart/form-data');    // Needed for 'file' upload

    // When the form has been filled in, trim spaces from all fields:

    // Elements are added to the form with:
    //    addElement(elementOrType, elementName, attributes, data)
    // this returns an object, you only need to assign it if you want to call a method.
    // attributes are put directly into the html, things like 'value', 'size', 'width', 'onclick',
    //    what works depends on the input field, see:
    // data is interpretted by QF2, generic ones:
    //    'label'    A lable to the left of the input field '<label class=element'
    //                this can also be set with ->setLabel('Lable Text')
    //    'content'  Aka label to the right of the input field '<label' - containing div is class=element, after '<input'
    //               This is shown in a few cases below
    //    'name' & 'id' are in here (getName setName getId setId), also 'type' (of input field)
    //    ?? 'selected' 'disabled'

    // Text - one line of text
    // attributes:
    //    'size' how big the box is
    //    'maxlength' max # chars that can be entered, will scroll if greater than 'size'
    //    'value' an initial value, or use addDataSource()
    //    'class' optional CSS class for the element
    //    'id' optional CSS id for the element, the label will have the attribute 'for="p_age"', if
    //    an 'id' was not given, the 'for' would have a value 'Age-0' - ie field name and number
    // Returned as a string keyed by the field name ('Age') in the array $res from getValue()
    // $age = $form->addElement('text', 'Age', array('maxlength' => 3, 'size' => 3, 'value'=> 99), array('label' => 'Age'));
    $age = $form->addElement('text', 'Age', array('maxlength' => 3, 'size' => 3, 'class' => 'num', 'id' => 'p_age'),
        array('label' => 'Age'));

    // Text area - multiple line text box
    // attributes:
    //    'rows' - number of lines, can be exceeded
    //    'cols' - columns wide, can be exceeded
    // This gets returned as a string with embedded newlines
    // Set an initial value with addDataSource() as shown below
    $msg = $form->addElement('textarea', 'Msg', array('cols' => 30, 'rows' => 3), array('label' => 'Message'));

    // Password - like text, but the text does not show when typed
    // attributes and return value as with Text
    $form->addElement('password', 'Passwd', null, array('label' => 'Password'));
    $form->addPassword('pass2')->setLabel('Another password');

    // Add a drop down select list, one value may be chosen:
    // This generates <select> with several <option>
    // attributes:
    // data:
    //    'options'  a list of drop down values
    // Returned value as a number indexing from 0. Set default with addDataSource() as shown below
    $Titles = array('Please select', 'Mr', 'Mrs', 'Miss', 'Dr');
    $title = $form->addElement('select', 'Title', null, array('label' => 'Title', 'options' => $Titles));

    // If you want to initialise or set a value then the **keys** of $Titles seem to need to be the
    // values ???

    // You can addOptgroup() - I don't understand

    // Multiple select - several values may be chosen:
    // attributes:
    //    'multiple' allow multiple to be selected
    //    'size'     number displayed at one time
    // See select above.
    // Returned value an array of numbers with values indexing from 0.
    $mtit = $form->addElement('select', 'MultTitle', array('multiple' => 'multiple', 'size' => 3),
        array('label' => 'Multiple Title', 'options' => $Titles));

    // Checkbox - several can have the same name and are set/unset independently
    // attributes:
    //    'value'   the value returned when this checkbox is selected
    //    'checked' box will be initialised with a tick in it
    // data:
    //    'label' - OK it is a generic one, but you really need it here
    // Doesn't seem to work, just get the last one, this may be fixed, for now specify
    // the element names in arrray syntax
    //  $form->addElement('checkbox', 'vegetable', array('value' => 1), array('label' => 'carrot'));
    $form->addElement('checkbox', 'vegetable[0]', array('value' => 1), array('label' => 'carrot'));
    // pea is checked when the form is first displayed:
    $form->addElement('checkbox', 'vegetable[1]', array('value' => 2, 'checked' => 'checked'), array('label' => 'pea'));
    $form->addElement('checkbox', 'vegetable[2]', array('value' => 3), array('label' => 'bean', 'content' => 'baked ?'));

    // Radio buttons, choose only one value - the others are unset when a new one is chosen
    // attributes:
    //    'value' is what is returned - need to give
    //    'checked' may be set to (eg) '1' to specify the one that is initially checked,
    // Can also use setAttribute() - both are shown here
    // data:
    //    'label' appears to the left of the clickable radio button, optional - but you ought to have
    //    'content' appears to the right, is optional
    $Wdays = array('Mon' => 'Monday', 'Tue' => 'Tuesday', 'Wed' => 'Wednesday', 'Thu' => 'Thursday',
        'Fri' => 'Friday', 'Sat' => 'Saturday', 'Sun' => 'Sunday');
    // Generate a radio button for every day of the week, Tuesday's will be pre set:
    foreach($Wdays as $d => $day)
        if($d == 'Tue')
            $tue = $form->addElement('radio', 'Weekdays', array('value' => $d,'checked'=>'checked'),
                array('label' => "Day $day", 'content' => "content: $d"));
            $form->addElement('radio', 'Weekdays', array('value' => $d),
                array('label' => "Day $day", 'content' => "content: $d"));
    // This will always make it checked, even when processing the form, don't do it:
    //    $tue->setAttribute('checked');

    // Buttons - reset (sets the form back to initial state) and submit (send form to server)
    // attributes:
    //    'value' - the text that will appear inside the button, can't use setValue()
    //    'onsubmit' - you prob don't want to do this as QF will use this once client
    //            side validation is implemented
    // data:
    //    'label' - you probably don't want to set this
    $form->addElement('reset', 'Clear');
    $form->addElement('submit', 'Submit', array('value' => 'Press to Submit'));

    // This is an alternate way of creating a 'reset' or 'submit' button, you will want to
    // use this if you want something more complicated than just text as the button,
    // eg an image. You can also have a 'button' that you tie javascript to with 'onclick'
    // attributes:
    //    'type' to be values 'reset', 'submit' or 'button' (the latter does nothing innate)
    // data:
    //    'content' what appears inside the button, this is any HTML that you wish

    // This button shows a javascript alert when it is pressed.
    // This generates the '<button' tag, not an '<input' field.
    $form->addElement('button', 'click', array('onclick' => 'alert("you pressed me");', 'type' => 'button'),
        array('content' => 'Go on: <b>press&nbsp;me!</b>'));

    // A submit button with HTML as a lable, you could include an image here:
    $form->addElement('button', 'Enter', array('type' => 'submit'),
        array('content' => 'To submit: <b>press&nbsp;me!</b>'));

    // inputbutton - generates an input field of type button.
    // attributes:
    //    'value'    contents of the button - straight text, not general HTML
    //    'onclick'  what happens when it is pressed
    $form->addElement('inputbutton', 'ClickMe',
        array('value' => 'Press me please', 'onclick' => 'alert("You did it");'))->setLabel('Generate popup');

    // hidden - a way of getting an extra value to the script after submission, if not using sessions
    // attributes:
    //    'value'    the value for the next script, or use setValue()
    $form->addElement('hidden', 'invis', array('value' => 'invisible value'));
    $form->addElement('hidden', 'unseen')->setValue('unseen value');
    $form->addHidden('not_seen')->setValue('not seen value');

    // image - when this is clicked the form is submitted & coordinates returned
    // attributes:
    //    'src'    URL of the image
    //    'alt'    Describe the image - for accessibility
    // data:
    //    'label'  Perhaps tell the user what to do
    // The x and y coordinates (in pixels) of where the user clicked are returned in $res as an array,
    // indicies ['x'] and ['y']. NB: in $_GET and $_POST they are ['grid_x'] and ['grid_y'].
    $form->addElement('image', 'grid', array('src' => 'GridImage.jpg', 'alt' => 'click on coordinates'),
        array('label' => '200x100 image<br>Click to submit the form returning the x &amp; y coordinates' .
            ' of where you clicked the image'));

    // file - upload a file from the user (client)
    // data:
    //    'label'  Perhaps tell the user what the file is for
    // The form must me a 'post' form -- not 'get' (ie when you instantiate the $form object)
    // For this to work you must have: setAttribute('enctype', 'multipart/form-data')
    // The file will be read in to a temp file and the 'picture' member of $res will
    // have the elements:
    //    'name'     File name on the user's PC
    //    'type'     Mime type
    //    'tmp_name' the name of the temp file on the server
    // also 'error' and 'size'.
    $form->addElement('file', 'picture', null, array('label' => 'Give me a picture'));

    // Fieldset - fields visually grouped, ebmedded in <fieldset id="bank"> tag
    // This contains any of the other fields with their normal attributes and return
    // The idea is to provide some grouping on the web page, use it to contain related items
    $bank = $form->addElement('fieldset', 'bankDets', array('id' => 'bank'))->setLabel('Bank Details');
    // Each element added is within its own <div class="row">
    $bank->addElement('text', 'ac_name')->setLabel('Account name');
    $bank->addElement('text', 'sort')->setLabel('Sort code');
    $bank->addElement('text', 'account', array('class' => 'acnum'))->setLabel('Account number');
    // Fieldsets nest:
    // The field names don't have to start 'bank_', but it might help understandig
    $bank_addr = $bank->addElement('fieldset')->setLabel('Bank Address');
    $bank_addr->addElement('text', 'bank_street_addr')->setLabel('Street Address');
    $bank_addr->addElement('text', 'bank_town')->setLabel('Town');
    $bank_addr->addElement('text', 'bank_postcode')->setLabel('Post Code');

    // group -- this sets up a <fieldset id="grpFset">
    // Within that there is one <div class="row"> that contains all the fields
    // setSeparator() is put between the elements of the group, the 'id' here seems to be ignored
    $group = $form->addElement('group', 'inGrp', array('id' => 'igrp'))->setSeparator("<br class=\"foo\"/>\n");
    // The fields will be given names like 'inGrp[F1]'
    $F1 = $group->addElement('text', 'F1');    // 'id' will be F1-0
    $F2 = $group->addElement('text', 'F2', array('id' => 'F2'));    // 'id' will be 'F2'
    $F3 = $group->addElement('text', 'F3');
    $F4grp = $group->addElement('group', 'F4grp'); // A group within a group
    $F5 = $group->addElement('text', 'F5');
    $F4_1 = $F4grp->addElement('text', 'F4_1');    // The separator set above is not applied to these
    $F4_2 = $F4grp->addElement('text', 'F4_2');

    // First time round this results in false, remember that, as is common in php, this
    // script is used both to generate the form and to process the results.
    if ($form->validate()) {
        # Get here when the form has been filled in and validation checks passed
        // $form->freeze();	// If we want the form redisplayed in the way that the user entered it
				// but you need to do another display()
        $res = $form->getValue();
	echo "Title = " . htmlspecialchars($res['Title']) . " = '" . $Titles[$res['Title']] . "'<br>\n";

        echo "<pre>\n";
        echo "<p>Contents of <b>\$res</b>\n";   echo htmlspecialchars(print_r($res, 1));
        echo "<p>Contents of <b>\$_POST</b>\n"; echo htmlspecialchars(print_r($_POST, 1));
        echo "<p>Contents of <b>\$_FILE</b>\n"; echo htmlspecialchars(print_r($_FILE, 1));
        echo "</pre>\n";
    } else {
        $form->addDataSource(new HTML_QuickForm2_DataSource_Array(
                'Msg' => "how\nnow brown\ncow",
                'Age' => 123,
                'Title' => 2))); // only does something with empty form

	echo $form;


Return to this tutorial index.