Click on the field...
%STARTFORM{
name="beforeclickform"
action="view"
}%
%FORMELEMENT{
name="Name"
type="text"
beforeclick="Your name..."
}%
%ENDFORM%
onMouseOver, onMouseOut
Mouse over the field...
%STARTFORM{
name="mouseoverform"
action="view"
}%
%FORMELEMENT{
name="Name"
type="text"
onMouseOver="makeYellow(this)"
onMouseOut="makeWhite(this)"
}%
%ENDFORM%
onSelect, onBlur
Doubleclick on the text to select it...
%STARTFORM{
name="selectform"
action="view"
}%
%FORMELEMENT{
name="Name"
type="text"
default="Doubleclick this text"
onSelect="makeBold(this)"
onBlur="makePlain(this)"
}%
%ENDFORM%
onKeyUp
Change the text...
(in fact, onChange can be used as well, but that tends to react slower)
Click a checkbox...
%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%
%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="Main.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="Main.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%
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:
%STARTFORM{
name="holiday_data"
action="save"
topic="Sandbox.FormPluginExamples"
anchor="NewData"
}%
%FORMELEMENT{
name="From"
type="date"
dateformat="%Y/%m/%d"
size="9"
title="I am on holidays from:"
disabled="on"
validate="nonempty"
}%
%FORMELEMENT{
name="Until"
type="date"
dateformat="%Y/%m/%d"
size="9"
title="Until:"
disabled="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="on"
}% Log in to add your dates
%ENDFORM%
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;"
}%
E-mail form for SendEmailPlugin - form works if the plugin is installed and enabled.
%SENDEMAIL%
%STARTFORM{
name="mailForm"
action="http://twiki.ihep.ac.cn/twiki/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
This form lets you search for Flickr photos that have been tagged with a name.
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%