This example is disabled by default, because new browsers automatically scroll the page to the input field with focus.
Show Focus example
Original source:
Mouse over the field...
%STARTFORM{
name="mouseoverform"
action="view"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
validate="off"
}%%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"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
validate="off"
}%Doubleclick this text%ENDFORM%
onKeyUp
Change the text...
(in fact, onChange can be used as well, but that tends to react slower)
Change output will be written here...
%STARTFORM{
name="changeform"
action="view"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
validate="off"
}%Change this text%ENDFORM%
onClick
Click a checkbox...
%STARTFORM{
name="clickform"
action="view"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
validate="off"
}%%FORMELEMENT{
name="OnClickCheckboxes"
type="checkbox"
options="mary, peter, annabel, nicky, jennifer"
labels="Mary M, Peter P, Annabel A, Nicky N, Jennifer J"
elementformat="$e "
onClick="clickFeedback(this)"
}%%ENDFORM%
onSubmit
Give a warning before submitting the form...
%STARTFORM{
name="submitform"
action="view"
onSubmit="return notify(this)"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
validate="off"
}%%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
}%%ENDFORM%
onChange
Submit form automatically after changing the selection.
%STARTFORM{
name="grammar"
action="view"
validate="off"
method="get"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
anchor="OnChange"
}%%FORMELEMENT{
name="type"
type="dropdown"
options=", mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J"
value=""
onChange="this.form.submit()"
}%%ENDFORM%
Validation
If the form is filled in correctly you will be redirected to FormPluginExamplesFeedback.
%STARTFORM{
name="validationTestForm"
action="view"
topic="Sandbox.FormPluginExamplesFeedback"
anchor="FormValidation"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%%FORMELEMENT{
name="Team"
type="checkbox"
title="Team members:"
options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J"
elementformat="$e "
mandatory="on"
validate="required"
hint="Select at least one person"
}%Send%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:
To test rest calls with FormPlugin, the rest method test is implemented. Use param show to retrieve a value.
In this example we are testing the value of field substituted, which has a substition of Topic parent is: $topicparent: the value of field topicparent is written to substituted.
%STARTFORM{
name="resttest"
action="rest"
restaction="FormPlugin/test"
method="post"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%FormPluginExamplesTopic parent is: $topicparentsubstituted%FORMELEMENT{
name="action"
type="submit"
format="$e"
buttonlabel="Test REST"
}%%ENDFORM%
%STARTFORM{
name="uploadform"
action="upload"
topic="Sandbox.FormPluginExamples"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%%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{
name="action"
type="submit"
buttonlabel="Upload file"
}%%ENDFORM%
Working with other extensions
Working together with CommentPlugin: filling a table
This form uses System.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"
validate="on"
onsubmit="return (foswiki.Form.makeSafeForTableEntry) ? foswiki.Form.makeSafeForTableEntry(this) : true;"
strictverification="off"
}%
Enter a new article
Attach a file first, then enter the data below.
%FORMELEMENT{
type="text"
name="title"
title="Title"
hint="Link will have this label"
validate="nonempty"
mandatory="on"
}%
%FORMELEMENT{
type="text"
name="source"
title="Source name"
}%
%FORMELEMENT{
type="text"
name="source_url"
title="Source url"
}%
2024-11-01
2024-11-01
Try it out:
%STARTFORM{
name="holiday_data"
action="save"
topic="Sandbox.FormPluginExamples"
anchor="NewData"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%
saveholiday_dataSandbox.FormPluginExamples%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"
}%$From - $Until%FORMELEMENT{
type="submit"
name="send"
buttonlabel="Add my dates"
disabled="on"
}% Log in to add your dates
%ENDFORM%
SendEmailPlugin form
E-mail form for SendEmailPlugin - form works if the plugin is installed and enabled.
%SENDEMAIL%
%STARTFORM{
name="mailForm"
action="https://g-wiki.gsi.de/sendemail/Sandbox/FormPluginExamples"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%%FORMELEMENT{
name="To"
type="text"
title="To:"
validate="email"
mandatory="on"
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)"
}%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/$SearchName/$Where"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%Gabrielaclusters/portrait%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Show me pictures"
}%%ENDFORM%
This topic: Sandbox > FormPluginExamples
Topic revision: 2011-04-30, AdminUser