Form Plugin Examples

Please view the raw text of this topic to learn how these forms are created.

Javascript enhancements

Focus

%STARTFORM{ name="focusform" action="view" }% %FORMELEMENT{ name="Name" type="text" focus="on" title="Enter your name:" }% %ENDFORM%

Default text before click

%STARTFORM{ name="beforeclickform" action="view" }% %FORMELEMENT{ name="Name" type="text" beforeclick="Your name..." }% %ENDFORM%

onMouseOver, onMouseOut

%STARTFORM{ name="mouseoverform" action="view" }% %FORMELEMENT{ name="Name" type="text" onMouseOver="makeYellow(this)" onMouseOut="makeWhite(this)" }% %ENDFORM%

onSelect, onBlur

%STARTFORM{ name="selectform" action="view" }% %FORMELEMENT{ name="Name" type="text" default="Doubleclick this text" onSelect="makeBold(this)" onBlur="makePlain(this)" }% %ENDFORM%

onKeyUp

(in fact, onChange can be used as well, but that tends to react slower)

%STARTFORM{ name="changeform" action="view" }% %FORMELEMENT{ name="Name" type="text" default="Change this text" onKeyUp="giveFeedback(this)" }% %ENDFORM%

onClick

%STARTFORM{ name="clickform" action="view" }% %FORMELEMENT{ name="OnClickCheckboxes" type="checkbox" options="mary, peter, annabel, nicky, jennifer" labels="Mary M, Peter P, Annabel A, Nicky N, Jennifer J" fieldformat="$e
" onClick="clickFeedback(this)" }% %ENDFORM%

onSubmit

%STARTFORM{ name="submitform" action="view" onSubmit="return notify(this)" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" }% %ENDFORM%

Hints and mandatory indicators

%STARTFORM{ name="hintform" action="view" }% %FORMELEMENT{ name="Name" type="text" title="Enter your name:" mandatory="on" hint="Or just anything" }% %FORMELEMENT{ name="Anything" type="text" title="Enter something else:" mandatory="on" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" }% %ENDFORM%

Adding styles

Setting:

formcssclass="twikiFormSteps"
elementcssclass="twikiFormStep"

%STARTFORM{ name="styleform" action="view" formcssclass="twikiFormSteps" elementcssclass="twikiFormStep" }% %FORMELEMENT{ name="Name" type="text" title="Enter your name:" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" }% %ENDFORM%

Custom CSS classes

%STARTFORM{ name="customcssform" action="view" }% %FORMELEMENT{ name="Name" type="text" title="Enter your name:" cssclass="twikiBroadcastMessage" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" cssclass="twikiButton" }% %ENDFORM%

Items on one line

Using elementformat=" $t $e ":

%STARTFORM{ name="onelineform" action="view" elementformat=" $t $e $m $h " }%%FORMELEMENT{ name="Name" type="text" title="Enter your name:" }%%FORMELEMENT{ type="submit" buttonlabel="Submit" }% %ENDFORM%

Multi-select items

%STARTFORM{ name="multiform" action="view" formcssclass="twikiFormSteps" elementcssclass="twikiFormStep" }% %FORMELEMENT{ name="Nice_persons" type="radio" title="Nice persons with custom titleformat:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" validate="nonempty" fieldformat="$e
" titleformat=" $t
" mandatory="on" hint="Select one person" }% %FORMELEMENT{ name="Not_so_nice_persons" type="checkbox" title="Not-so-nice persons with selected defaults:" options="mary, peter, annabel, nicky, jennifer" labels="Mary M, Peter P, Annabel A, Nicky N, Jennifer J" default="mary,peter" validate="nonempty" fieldformat="$e
" mandatory="on" hint="Select any person" }% %FORMELEMENT{ name="And_even_more_persons" type="checkbox" title="And even more persons without custom fieldformat:" options="mary, peter, annabel, nicky, jennifer" labels="Mary M, Peter P, Annabel A, Nicky N, Jennifer J" validate="nonempty" mandatory="on" hint="Select any person" }% %FORMELEMENT{type="selectmulti" title="Multiselect is selectmulti:" name="subject" options="work,freetime,not important" labels="Work, Freetime, Not important" default="not important" size="3"}% %ENDFORM%

Disabled

%STARTFORM{ name="disabledform" action="view" }% %FORMELEMENT{ name="Name" type="text" disabled="on" title="Enter your name:" default="Public.TWikiGuest" }% %FORMELEMENT{ name="ChecknameDisabled" type="checkbox" title="Choose a name:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" fieldformat="$e
" disabled="on" default="peter" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" disabled="on" }% %ENDFORM%

Read-only

%STARTFORM{ name="readonlyform" action="view" }% %FORMELEMENT{ name="Name" type="text" readonly="on" title="Enter your name:" default="Public.TWikiGuest" }% %FORMELEMENT{ name="ChecknameReadonly" type="checkbox" title="Choose a name:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" fieldformat="$e
" readonly="on" default="peter" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" readonly="on" }% %ENDFORM%

Password

%STARTFORM{ name="passwordform" action="view" }% %FORMELEMENT{ name="Password" type="password" title="Enter a password:" mandatory="on" }% %ENDFORM%

Validation

If the form is filled in correctly you will be redirected to WebHome.

%STARTFORM{ name="validationTestForm" action="view" topic="Sandbox.WebHome" method="POST" formcssclass="twikiFormSteps" elementcssclass="twikiFormStep" }% %FORMELEMENT{ name="Name" type="text" title="Enter your name:" default="" mandatory="on" hint="You cannot post anonymously" }% %FORMELEMENT{ name="Your salary" type="text" title="Your salary:" default="" mandatory="on" validate="float" hint="You may include decimal numbers" }% %FORMELEMENT{ name="Checkname" type="checkbox" title="Who earns more than you:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" fieldformat="$e
" mandatory="on" validate="nonempty" hint="Just point the finger" }% %FORMELEMENT{ type="submit" default="Try me" }% %ENDFORM%

Substitution of field references

Reference field values as variables. In hidden field 'CarbonCopy' we are creating a combined entry of Name and Password fields:

%FORMELEMENT{
name="CarbonCopy"
type="hidden"
default="$Name earns $Salary"
}%

The CarbonCopy form field:

%STARTFORM{ name="substitutionform" action="view" anchor="SubstitutionReferences" formcssclass="twikiFormSteps" elementcssclass="twikiFormStep" }% %FORMELEMENT{ name="Name" type="text" title="Enter your name:" mandatory="on" }% %FORMELEMENT{ name="Salary" type="text" title="Enter your salary:" mandatory="on" validate="float" }% %FORMELEMENT{ name="CarbonCopy" type="hidden" default="$Name earns $Salary" }% %FORMELEMENT{ type="submit" buttonlabel="Submit" }% %ENDFORM%

Upload

%STARTFORM{ name="uploadform" action="upload" topic="Sandbox.FormPluginExamples" method="POST" validate="off" }% %FORMELEMENT{ type="upload" name="filepath" title="Attach new file" size="70" }% %FORMELEMENT{ name="filecomment" type="text" title="Comment" }% %FORMELEMENT{ name="hidefile" type="checkbox" options="on=Do not show attachment in table" }% %FORMELEMENT{ name="createlink" type="checkbox" options="on=Create a link to the attached file" }% %FORMELEMENT{ type="submit" buttonlabel="Upload file" }% %ENDFORM%

Date

%STARTFORM{{}% %FORMELEMENT{ type="date" name="publishing_date" default="02 Oct 2006" title="Publishing date" }% %ENDFORM%

Working together with CommentPlugin to create HolidaylistPlugin entries

We want to create a form to enter holiday data: a 'from' date and a 'until' date. The default date format from HolidaylistPlugin is:

   * from_date - until_date - wikiusername

We want an easy entry form, but the data must not get corrupted. So:

• The 'From' field must be filled in
• The 'Until' field will not be displayed if not filled in, so no dash will be displayed
• Entering data is only possible if logged in, otherwise we would get TWikiGuest entries

%TMPL:DEF{PROMPT:holiday_data}%
<div class="twikiFormSteps">
<div class="twikiFormStep">
%STARTFORM{
name="holiday_data"
action="save"
topic="%WEB%.%TOPIC%"
anchor="NewData"
}%
<input type="hidden" name="comment_action" value="save" />
<input type="hidden" name="comment_type" value="holiday_data" />
<input type="hidden" name="comment_templatetopic" value="%WEB%.%TOPIC%"  />
%FORMELEMENT{
name="From"
type="date"
dateformat="%Y/%m/%d"
size="9"
title="I am on holidays from:"
disabled="%IF{"$WIKINAME='TWikiGuest'" then="on"}%"
validate="nonempty"
}%
%FORMELEMENT{
name="Until"
type="date"
dateformat="%Y/%m/%d"
size="9"
title="Until:"
disabled="%IF{"$WIKINAME='TWikiGuest'" then="on"}%"
}%
%FORMELEMENT{
name="comment_from_date"
type="hidden"
default="$From"
condition="$From=nonempty"
}%
%FORMELEMENT{
name="comment_to_date"
type="hidden"
default=" - $Until"
condition="$Until=nonempty"
}%
%FORMELEMENT{
type="submit"
buttonlabel="Add my dates"
disabled="%IF{"$WIKINAME='TWikiGuest'" then="on"}%"
}% %IF{"$WIKINAME='TWikiGuest'" then="<em>Log in to add your dates</em>"}%
%ENDFORM%
</div>
</div>
%TMPL:END%
%TMPL:DEF{OUTPUT:holiday_data}%   * %URLPARAM{"comment_from_date"}%%URLPARAM{"comment_to_date"}% - %WIKIUSERNAME%
%POS:AFTER%%TMPL:END%

Try it out:

Working together with CommentPlugin: filling a table

This form uses TWiki.CommentPlugin to write submitted values to a table. A user-friendly display of table data is not included in the example.

%STARTFORM{ name="new_article_prependtotable" action="save" topic="Sandbox.FormPluginExamples" anchor="NewArticles" method="POST" validate="on" onSubmit="return (twiki.Form.makeSafeForTableEntry) ? twiki.Form.makeSafeForTableEntry(this) : true;" }%

<-- CommentPlugin attributes -->

Article data

<-- /editTable -->

<--InsertPoint-->

%TMPL:DEF{OUTPUT:new_article_prependtotable}%%POS:BEFORE%| %URLPARAM{"title"}% | %URLPARAM{"source"}% | %URLPARAM{"source_url"}% | %URLPARAM{"date"}% | %URLPARAM{"entry_date"}% |
%TMPL:END%

SendEmailPlugin form

E-mail form for SendEmailPlugin - form works if the plugin is installed and enabled.

%SENDEMAIL%

%STARTFORM{ name="mailForm" action="http://dayawane.ihep.ac.cn/twiki/bin/sendemail/Sandbox/FormPluginExamples" method="POST" }% %FORMELEMENT{ name="To" type="text" title="To:" validate="email" mandatory="on" default="arthur@visiblearea.com" hint="Enter an e-mail address" }% %FORMELEMENT{ name="Subject" type="text" title="Subject:" hint="(optional)" }% %FORMELEMENT{ name="body" type="textarea" title="Message:" rows="5" cols="80" hint="(optional)" }% %FORMELEMENT{ type="submit" default="Send" }% %ENDFORM%

Accessing other sites: Flickr

Note: for this example to work, add http://www.flickr.com/ to {PermittedRedirectHostUrls} in configure.

%STARTFORM{ name="flickr" action="http://www.flickr.com/photos/tags/$Name/$Netherlands" method="POST" }% %FORMELEMENT{ name="Name" title="Search name on Flickr:" type="text" default="Sander" hint="Enter a first name, such as Sander, Johan or Annemieke" }% %FORMELEMENT{ name="Netherlands" type="checkbox" options="clusters/netherlands-amsterdam-geotagged/" labels="In the Netherlands" default="clusters/netherlands-amsterdam-geotagged/" hint="Shows pictures from the Netherlands only if these are geo-tagged" }% %FORMELEMENT{ type="submit" buttonlabel="Show me photos!" }% %ENDFORM%