To see how this is used return to this tutorial index.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- This is the smarty template that goes with Qf2ValidTypesSm.php
Return to the tutorial index to see a demonstration of what this does.
Copyright (c) 2009, Parliament Hill Computers (www.phcomp.co.uk). Author: Alain D D Williams (addw@phcomp.co.uk).
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: @(#)Qf2ValidTypesByElement.tpl 1.4 10/21/13 15:08:34
-->
<html>
<head>
<title>Smarty template demonstration</title>
<link rel="stylesheet" type="text/css" href="/DefaultStyle.css">
<link rel="stylesheet" type="text/css" href="Qf2StyleSm.css">
{* Emit any javascript from quickform *}
{if $FormData.javascript}
{$FormData.javascript}
{/if}
<style type="text/css">
p {
clear:both;
padding-top:10px;
padding-bottom:0;
}
div + p, p.intro {
font-weight:bold;
}
</style>
</head>
<body>
<!-- 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>
<div style='top:0px;margin:0px auto;text-align: center; font-size:40pt; '>
{$FormData.DemoHeader}
</div>
<p>
<!-- The date and time substitution on the line below is done entirely in smarty -->
The current date and time is {$smarty.now|date_format:"%Y-%m-%d %H:%M:%S"}
<p>
View this using a different Smarty template that iterates over the fields in the form by clicking <a href="?">here</a>
<p>
<b>This uses Smarty specific code for each element</b><p>
<!-- The form attributes are: is it a GET or POST form, the URL to action -->
<form {$FormData.attributes}>
{if isset($FormData.hidden)}{foreach from=$FormData.hidden item=head}
{$head}
{/foreach}{/if}
{* Generate for every field in the form.
* $FormData contains more than just form fields, this other stuff is ignored.
* Form fields are arrays that contain the following elements of interest:
* id Always exists, generated by QF but can be set by the 'id' element
* of the 3rd argument to addElement().
* name This is the field name that will be used in $_GET/$_POST.
* This is usually the same as $key set by {foreach}, but see group below.
* label This some text that should be used to tell the user what the field is for,
* eg 'Age'. This is set by 'label' element of the 4th argument to addElement()
* or with the setLabel() method. It might not be set at all.
* html The html for the input field, you generate this.
* type text, image, textarea, ... If you were clever you could look at this.
* Note that this is not set for: fieldset or group.
* attribs An array of field attributes, some generated by QuickForm2 others
* that were given to addElement().
* error This will be present if there is a validation error associated with this field.
* If the option group_errors is set this will not be generated, any error
* will be in a pseudo field called 'errors', this is what happens in this example.
* value The element value.
* elements If a fieldset or group, the contained elements.
* If a checkbox an array keyed by fieldname index (eg '0' from 'vegetable[0]')
* value is the form field.
* If a radio button an array keyed by the field 'value' (the 'value' from the attributes)
* value is the form field.
*
* Often you will generate the fields in the form and place them where you want them,
* to do this use the fields, eg: {$FormData.Age.html}
*
* What is going on here is complicated because it searches $FormData, it ignores anything
* that is not an input field (is_array($Field) && $Field.id != '').
* Look towards the bottom of the loop for ''Normal case''.
*
* The rest of this deals with a 'group' within a 'group' this is more complicated,
* these appear to smarty as an array, loop through it in the same way as the outer loop
* works, looking for arrays with a member 'id'. Thus you end up with 3 nested loops.
*
* The {foreach gets the key, more by way of interest than need.
*
* If $FormData.debug is true then generate some tracing.
*
* Not everything has a label, so generate to keep the columns aligned.
*
* This generates far too many blank lines in the HTML, it also looks horrible on the web page - but this is demo code!
*}
<p class="intro">Text fields of various sorts:</p>
<div class="row">
<label class="element">{$FormData.Age.label}</label>
<div class="element">{$FormData.Age.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.Msg.label}</label>
<div class="element">{$FormData.Msg.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.Passwd.label}</label>
<div class="element">{$FormData.Passwd.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.pass2.label}</label>
<div class="element">{$FormData.pass2.html}</div>
</div>
<p><br />Select — one only:</p>
<div class="row">
<label class="element">{$FormData.Title.label}</label>
<div class="element">{$FormData.Title.html}</div>
</div>
<p>Select — multiple option:</p>
<div class="row">
<label class="element">{$FormData.MultTitle.label}</label>
<div class="element">{$FormData.MultTitle.html}</div>
</div>
{* Iterate over a checkbox *}
<p>Vegetables — checkbox:</p>
{foreach from=$FormData.vegetable.elements item=veg key=vegNum name=veggies}
{if $smarty.foreach.veggies.first}
<!-- We could have some first time through code here -->
{/if}
<div class="row">
<label class="element">{$veg.label}</label>
<div class="element">{$veg.html}</div>
</div>
{/foreach}
{* Colours - this is another checkbox, but with a word as the key, access the members by name *}
<p>Colours — checkbox:</p>
<div class="row">
<label class="element">{$FormData.hue.elements.lime.label}</label>
<div class="element">{$FormData.hue.elements.lime.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.hue.elements.pink.label}</label>
<div class="element">{$FormData.hue.elements.pink.html}</div>
</div>
{* Iterate over a radio *}
<p>Week days — radio:</p>
{foreach from=$FormData.Weekdays.elements item=wday name=days}
<div class="row">
<label class="element">{$wday.label}</label>
<div class="element">{$wday.html}</div>
</div>
{/foreach}
<p>Buttons — reset & submit:</p>
<div class="row">
<label class="element">{$FormData.Clear.label} </label>
<div class="element">{$FormData.Clear.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.Submit.label} </label>
<div class="element">{$FormData.Submit.html}</div>
</div>
{* Next we have another submit button with the same form field name.
* Note how it is referred to as SubmitP, this is the SmartyKey value.
*}
<div class="row">
<label class="element">{$FormData.SubmitP.label} </label>
<div class="element">{$FormData.SubmitP.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.click.label} </label>
<div class="element">{$FormData.click.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.Enter.label} </label>
<div class="element">{$FormData.Enter.html}</div>
</div>
<div class="row">
<label class="element">{$FormData.Click.label}</label>
<div class="element">{$FormData.Click.html}</div>
</div>
<p>Hidden — there are 3 here.</p>
<p>Can't see them ? - get some spectacles :-)
They are generated at the top of the form.</p>
<p class="intro">Image:</p>
<div class="row">
<label class="element">{$FormData.grid.label}</label>
<div class="element">{$FormData.grid.html}</div>
</div>
<p>File to upload:</p>
<div class="row">
<label class="element">{$FormData.picture.label}</label>
<div class="element">{$FormData.picture.html}</div>
</div>
<p>This template does not generate the fieldsets, which would be just more of the above.</p>
</form>
{if $FormData.required_note and not $FormData.frozen}
{$FormData.required_note}
{/if}
<!-- Display any errors, loop over what there is in the errors array -->
<div style="color:red">
{foreach from=$FormData.errors item=error}
{$error}<br>
{/foreach}
</div>
<p>
This is a simple form, fill in some values and press <i>Submit</i>.
<p>
This is a quickform that has been rendered with smarty.
<p style="font-size: x-large; font-weight: bold;">
Return to this <em><a href='index.php'>tutorial index</a></em>.
</p>
</body>
</html>
Return to this tutorial index.