---+!! Form Plugin Examples See [[%SYSTEMWEB%.FormPlugin]] Please view the raw text of this topic to learn how these forms are created. %TOC% ---++ Form elements ---+++ Format %STARTFORM{ name="formatform" action="view" elementformat="<div class=\"formPluginField\"> $m $t $h <br />$e </div>" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" validate="required" mandatory="on" hint="Enter your wiki name" default="%WIKINAME%" }%%FORMELEMENT{ name="Team" type="radio" title="Favorite team member:" options="mary=Mary M, peter=Peter P, annabel=Annabel A, nicky=Nicky N, jennifer=Jennifer J" validate="required" mandatory="on" hint="Select one person" }%%ENDFORM% ---+++ Multi-select items %STARTFORM{ name="multiform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%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="required" elementformat="$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="required" elementformat="$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" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%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" elementformat="$e<br />" disabled="annabel,nicky" default="peter" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" disabled="on" }%%ENDFORM% ---+++ Read-only %STARTFORM{ name="readonlyform" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%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..." }%%ENDFORM% ---+++ Password %STARTFORM{ name="passwordform" action="viewauth" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Password" type="password" title="Enter a password:" mandatory="on" }%%ENDFORM% ---+++ Date %STARTFORM{ name="date" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%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" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="MyName" type="text" title="Your name:" mandatory="on" value="Adam" }%%FORMELEMENT{ name="MyFriends" type="checkbox" title="Choose friends:" 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" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" mandatory="on" hint="Or just anything" }%%FORMELEMENT{ name="Anything" type="text" title="Enter something else:" mandatory="on" }%%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 " validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" }%%ENDFORM% ---+++ Adding CSS styles Setting: <verbatim> formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" </verbatim> %STARTFORM{ name="styleform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" }%%ENDFORM% ---+++ Custom CSS classes %STARTFORM{ name="customcssform" action="view" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" cssclass="foswikiBroadcastMessage" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Cancel" cssclass="foswikiButtonCancel" }%%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" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" focus="on" title="Your name:" }%%ENDFORM% </verbatim> ---+++ Placeholder text Click on the field... %STARTFORM{ name="placeholderform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name" type="text" placeholder="Your name..." }%%ENDFORM% ---+++ Spellcheck %STARTFORM{ name="spellckeckform" action="view" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name1" type="text" default="naj" spellcheck="on" }%%FORMELEMENT{ name="Name2" type="text" default="naj" spellcheck="off" }%%ENDFORM% ---+++ onMouseOver, onMouseOut Mouse over the field... %ADDTOZONE{ "script" id="%TOPIC%_example_onMouseOver" text="<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" 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... %ADDTOZONE{ "script" id="%TOPIC%_example_onSelect" text="<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" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%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) %ADDTOZONE{ "script" id="%TOPIC%_example_onKeyUp" text="<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" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="Name" type="text" default="Change this text" onKeyUp="giveFeedback(this)" }%%ENDFORM% ---+++ onClick Click a checkbox... %ADDTOZONE{ "script" id="%TOPIC%_example_onClick" text="<script type=\"text/javascript\"> //<![CDATA[ function clickFeedback(el) { alert(\"checkbox: \" + el.value + \" clicked\"); } //]]> </script>" }% %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 <br />" onClick="clickFeedback(this)" }%%ENDFORM% ---+++ onSubmit Give a warning before submitting the form... %ADDTOZONE{ "script" id="%TOPIC%_example_onSubmit" text="<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)" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" validate="off" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" }%%ENDFORM% #OnChange ---+++ 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 %WEB%.FormPluginExamplesFeedback. %STARTFORM{ name="validationTestForm" action="view" topic="%WEB%.FormPluginExamplesFeedback" anchor="FormValidation" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="Name" type="text" title="Your name:" default="" mandatory="on" validate="required" hint="You cannot post anonymously" }%%FORMELEMENT{ name="Goal" type="text" title="Team goal:" default="" mandatory="on" validate="number" }%%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<br />" mandatory="on" validate="required" 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" validate="required" }%%FORMELEMENT{ name="Salary" type="text" title="Your salary:" mandatory="on" validate="number" }%%FORMELEMENT{ name="CarbonCopy" type="hidden" default="$Name earns $Salary" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Submit" }%%ENDFORM% ---++ Rest call 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" }%%FORMELEMENT{ name="topicparent" type="hidden" default="%TOPIC%" }%%FORMELEMENT{ name="substituted" type="hidden" default="Topic parent is: $topicparent" }%%FORMELEMENT{ name="show" type="hidden" default="substituted" }%%FORMELEMENT{ name="action" type="submit" format="$e" buttonlabel="Test REST" }%%ENDFORM% ---++ Real world examples ---+++ Create a new AUTOINC page %STARTFORM{ name="CreatePage" action="save" topic="TestAUTOINC000000" method="post" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="topicparent" type="hidden" default="%TOPIC%" }%%FORMELEMENT{ name="action" type="submit" format="$e" buttonlabel="Create" }%%ENDFORM% ---+++ Save topic text to another topic %STARTFORM{ name="savenew" action="save" topic="%WEB%.FormPluginNewTestTopic" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%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% ---+++ Save field value to another topic %STARTFORM{ name="savefield" action="save" topic="%WEB%.TopicTest" validate="off" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ type="text" name="Title" title="Title:" value="ABC" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Save field value" }%%ENDFORM% ---+++ Upload %STARTFORM{ name="uploadform" action="upload" topic="%WEB%.%TOPIC%" 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 <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;" strictverification="off" }% <!-- <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="<!--InsertPoint-->" /> <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* | <!--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> ---+++ 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}% %STARTFORM{ name="holiday_data" action="save" topic="%WEB%.%TOPIC%" anchor="NewData" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }% %FORMELEMENT{ name="comment_action" type="hidden" default="save" }%%FORMELEMENT{ name="comment_type" type="hidden" default="holiday_data" }%%FORMELEMENT{ name="comment_templatetopic" type="hidden" default="%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{ type="submit" name="send" buttonlabel="Add my dates" disabled="%IF{"$WIKINAME='WikiGuest'" then="on"}%" }% %IF{"$WIKINAME='WikiGuest'" then="<em>Log in to add your dates</em>"}% %ENDFORM% %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%"}% ---+++ !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%" 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)" }%%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/$Where" formcssclass="foswikiFormSteps" elementcssclass="foswikiFormStep" }%%FORMELEMENT{ name="SearchName" title="Search name on Flickr:" type="text" default="Gabriela" hint="Enter a first name, such as Gabriela, Anna or Susanne" validate="nonempty" }%%FORMELEMENT{ name="Where" type="checkbox" options="clusters/portrait" labels="Show portraits" default="clusters/portrait" }%%FORMELEMENT{ name="action" type="submit" buttonlabel="Show me pictures" }%%ENDFORM%
主题: Sandbox
>
FormPluginExamples
主题版本:
2011-05-01,
AdminUser
(检示源码)
版权所有 © 作者 在合作平台上的所有资料归于内容贡献者所有。
请
回馈
有关 HEPG 的建议、需求及问题。