%META:TOPICINFO{author="BaseUserMapping_333" comment="reprev" date="1275342449" format="1.1" reprev="4" version="4"}%
---+!! Form Plugin Examples
See [[%SYSTEMWEB%.FormPlugin]]

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

%TOC%

---++ Form elements

---+++ Multi-select items

%STARTFORM{
name="multiform"
action="view"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%
%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 <br />"
titleformat=" *$t* %BR%"
mandatory="on"
hint="Select one person"
default="annabel"
}%
%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 <br />"
mandatory="on"
hint="Select at least one 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="Your name:"
default="%WIKIUSERNAME%"
}%
%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<br />"
disabled="on"
default="peter"
}%
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
disabled="on"
}%
%ENDFORM%



---+++ Read-only

%STARTFORM{
name="readonlyform"
action="view"
}%
%FORMELEMENT{
name="Name"
type="text"
readonly="on"
title="Your name:"
default="%WIKIUSERNAME%"
}%
%FORMELEMENT{
name="Text"
type="textarea"
readonly="on"
title="Enter text:"
default="some text..."
}%
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
}%
%ENDFORM%



---+++ Password

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



---+++ Date

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




---++ Getting form feedback
---+++ Retrieving values with URLPARAM
%STARTFORM{
name="myform"
action="view"
anchor="ResultUrlParam"
}% 
%FORMELEMENT{
name="MyName"
type="text"
title="Your name:"
mandatory="on"
value="Adam"
}% 
%FORMELEMENT{
name="MyFriends"
type="checkbox"
title="Choose option:"
mandatory="on"
options="alex,barbara,cynthia"
default="barbara"
}% 
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
}% 
%ENDFORM%

Submit form to view values:
#ResultUrlParam
   * Name = %URLPARAM{"MyName"}%
   * Friends = %URLPARAM{"MyFriends" multiple="on" separator=", "}%


---++ Formatting forms
---+++ Hints and mandatory indicators

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



---+++ Format: example of items on one line

For example setting param =elementformat=" $t $e $m $h "=:

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



---+++ Adding CSS styles

Setting:
<verbatim>
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
</verbatim>

%STARTFORM{
name="styleform"
action="view"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%
%FORMELEMENT{
name="Name"
type="text"
title="Your name:"
}%
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
}%
%ENDFORM%



---+++ Custom CSS classes

%STARTFORM{
name="customcssform"
action="view"
}%
%FORMELEMENT{
name="Name"
type="text"
title="Your name:"
cssclass="foswikiBroadcastMessage"
}%
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
cssclass="foswikiButton"
}%
%ENDFORM%





---++ Javascript enhancements
---+++ Focus
%IF{"$'URLPARAM{showfocus}'='1'" then="$percntSTARTFORM{
name=$quotfocusform$quot
action=$quotview$quot
}$percnt
$percntFORMELEMENT{
name=$quotName$quot
type=$quottext$quot
focus=$quoton$quot
title=$quotEnter your name:$quot
}$percnt
$percntENDFORM$percnt

[[%SCRIPTURL{view}%/%WEB%/%TOPIC%][Hide Focus example]]" else="This example is disabled by default, because new browsers automatically scroll the page to the input field with focus.

[[%SCRIPTURL{view}%/%WEB%/%TOPIC%?showfocus=1][Show Focus example]]"}%

Original source:
<verbatim>
%STARTFORM{
name="focusform"
action="view"
}%
%FORMELEMENT{
name="Name"
type="text"
focus="on"
title="Your name:"
}%
%ENDFORM%
</verbatim>


---+++ Default text before click
Click on the field...

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

---+++ onMouseOver, onMouseOut
Mouse over the field...

<script type="text/javascript">
//<![CDATA[
var bgImg;
function makeYellow(el) {
	bgImg = el.style.backgroundImage;
	el.style.backgroundColor = '#ffc';
	el.style.backgroundImage = 'none';
}
function makeWhite(el) {
	el.style.backgroundColor = '#fff';
	el.style.backgroundImage = bgImg;
}
//]]>
</script>

%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...

<script type="text/javascript">
//<![CDATA[
function makeBold(el) {
	el.style.fontWeight = 'bold';
}
function makePlain(el) {
	el.style.fontWeight = 'normal';
}
//]]>
</script>

%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)

<script type="text/javascript">
//<![CDATA[
function giveFeedback(el) {
	var feedbackElement = document.getElementById('changeformFeedback');
	feedbackElement.innerHTML = el.value;
}
//]]>
</script>

<div id="changeformFeedback" class="foswikiSmall">Change output will be written here...</div>

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

---+++ onClick
Click a checkbox...

<script type="text/javascript">
//<![CDATA[
function clickFeedback(el) {
	alert("checkbox: " + el.value + " clicked");
}
//]]>
</script>

%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 <br />"
onClick="clickFeedback(this)"
}%
%ENDFORM%

---+++ onSubmit
Give a warning before submitting the form...

<script type="text/javascript">
//<![CDATA[
function notify(inForm) {
	return confirm("Do you really want to send this form?");
}
//]]>
</script>

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







---++ Validation

If the form is filled in correctly you will be redirected to %WEB%.FormPluginExamplesFeedback.

%STARTFORM{
name="validationTestForm"
action="view"
topic="%WEB%.FormPluginExamplesFeedback"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
}%
%FORMELEMENT{
name="Your name"
type="text"
title="Your name:"
default=""
mandatory="on"
validate="nonempty"
hint="You cannot post anonymously"
}%
%FORMELEMENT{
name="Estimated team earnings"
type="text"
title="Estimated team earnings:"
default=""
mandatory="on"
validate="float"
hint="You may use a decimal number"
}%
%FORMELEMENT{
name="Team members"
type="checkbox"
title="Team members:"
options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J"
fieldformat="$e<br />"
mandatory="on"
validate="nonempty"
hint="Select at least one person"
}%
%FORMELEMENT{
name="action"
type="submit"
default="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:
<verbatim>
%FORMELEMENT{
name="CarbonCopy"
type="hidden"
default="$Name earns $Salary"
}%
</verbatim>

%STARTFORM{
name="substitutionform"
action="view"
formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"
anchor="CarbonCopy"
topic="%WEB%.FormPluginExamplesFeedback"
}%
%FORMELEMENT{
name="Name"
type="text"
title="Your name:"
mandatory="on"
}%
%FORMELEMENT{
name="Salary"
type="text"
title="Your salary:"
mandatory="on"
validate="float"
}%
%FORMELEMENT{
name="CarbonCopy"
type="hidden"
default="$Name earns $Salary"
}%
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Submit"
}%
%ENDFORM%



---++ Real world examples
---+++ Save topic text to another topic

%STARTFORM{
name="savenew"
action="save"
topic="%WEB%.FormPluginNewTestTopic"
}%
%FORMELEMENT{
type="textarea"
name="text"
title="Topic text:"
value="ABC"
}%
%FORMELEMENT{
type="hidden"
name="topicparent"
value="%TOPIC%"
}%
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Save topic text"
}%
%ENDFORM%



---+++ Upload

%STARTFORM{
name="uploadform"
action="upload"
topic="%WEB%.%TOPIC%"
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{
name="action"
type="submit"
buttonlabel="Upload file"
}%
%ENDFORM%



---++ Working together with <nop>CommentPlugin to create <nop>HolidaylistPlugin entries

We want to create a form to enter holiday data: a 'from' date and a 'until' date. The default date format from <nop>HolidaylistPlugin is:
<verbatim>
   * from_date - until_date - wikiusername
</verbatim>

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 <nop>WikiGuest entries
   
<verbatim style="display:none;">
%TMPL:DEF{PROMPT:holiday_data}%
<div class="foswikiFormSteps">
<div class="foswikiFormStep">
%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='WikiGuest'" then="on"}%"
validate="nonempty"
}%
%FORMELEMENT{
name="Until"
type="date"
dateformat="%Y/%m/%d"
size="9"
title="Until:"
disabled="%IF{"$WIKINAME='WikiGuest'" 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{
name="action"
type="submit"
buttonlabel="Add my dates"
disabled="%IF{"$WIKINAME='WikiGuest'" then="on"}%"
}% %IF{"$WIKINAME='WikiGuest'" 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%
</verbatim>

Try it out:
#NewData
%COMMENT{type="holiday_data" noform="on" templatetopic="%WEB%.%TOPIC%"}%
   * 2010/05/19 - Main.AdminUser




---+++ Working together with <nop>CommentPlugin: filling a table

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

#NewArticles
%STARTFORM{
name="new_article_prependtotable"
action="save"
topic="%WEB%.%TOPIC%"
anchor="NewArticles"
validate="on"
onsubmit="return (foswiki.Form.makeSafeForTableEntry) ? foswiki.Form.makeSafeForTableEntry(this) : true;"
}%
<!-- <nop>CommentPlugin attributes -->
<input type="hidden" name="comment_action" value="save"  />
<input type="hidden" name="comment_type" value="new_article_prependtotable"  />
<input type="hidden" name="comment_templatetopic" value="%WEB%.%TOPIC%"  />
<input type="hidden" name="comment_location" value="&lt;!--InsertPoint--&gt;"  />
<div class="foswikiFormSteps">
<div class="foswikiFormStep">
---++!! Enter a new article

Attach a file first, then enter the data below.
</div><div class="foswikiFormStep">
%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"
}%
%FORMELEMENT{
type="date"
name="date"
default="%DATE%"
title="Publishing date"
}%
%FORMELEMENT{
type="hidden"
name="entry_date"
default="%DATE%"
}%
</div><div class="foswikiFormStep foswikiLast">
%FORMELEMENT{
name="action"
type="submit"
buttonlabel="Save"
}%
</div>
</div>
%ENDFORM%


---++!! Article data
%EDITTABLE{}%
%TABLE{id="datatable"}%
| *Title* | *Source name* | *Source url* | *Publishing date* | *Entry date* |
| a | asasdasd | source | 31 May 2010 | 31 May 2010 |
<!--InsertPoint-->


<verbatim style="display:none;">
%TMPL:DEF{OUTPUT:new_article_prependtotable}%%POS:BEFORE%| %URLPARAM{"title"}% | %URLPARAM{"source"}% | %URLPARAM{"source_url"}% | %URLPARAM{"date"}% | %URLPARAM{"entry_date"}% |
%TMPL:END%
</verbatim>




---+++ !SendEmailPlugin form

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

%SENDEMAIL%

%STARTFORM{
name="mailForm"
action="%SCRIPTURL{sendemail}%/%WEB%/%TOPIC%"
}%
%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)"
}%
%FORMELEMENT{
name="action"
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 [[%SCRIPTURL{"configure"}%][configure]].

%STARTFORM{
name="flickr"
action="http://www.flickr.com/photos/tags/$SearchName/$Netherlands"
}%
%FORMELEMENT{
name="SearchName"
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{
name="action"
type="submit"
buttonlabel="Show me pictures"
}%
%ENDFORM%
