Difference: FormPluginExamples ( vs. 1)

Revision 12022-03-01 - TWikiGuest

Line: 1 to 1
Added:
>
>

Form Plugin Examples

See TWiki.FormPlugin

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

Form elements

Multi-select items

<--FormPlugin form start-->
<--//-->

Nice persons with custom titleformat:






* Select one person

<--//-->

Not-so-nice persons with selected defaults:






* Select at least one person

<--//-->

Multiselect is selectmulti:

<--/FormPlugin form end-->

Disabled

<--FormPlugin form start-->
<--//-->

Your name:

<--//-->

Choose a name:






<--//-->

<--/FormPlugin form end-->

Read-only

<--FormPlugin form start-->
<--//-->

Your name:

<--//-->

Enter text:

<--//-->

<--/FormPlugin form end-->

Password

<--FormPlugin form start-->
<--//-->

Enter a password:
*

<--//-->

<--/FormPlugin form end-->

Date

<--FormPlugin form start-->
<--//-->

Publishing date

<--/FormPlugin form end-->

Getting form feedback

Retrieving values with URLPARAM

<--FormPlugin form start-->
<--//-->

Your name:
*

<--//-->

Choose option:

*

<--//-->

<--/FormPlugin form end-->

Submit form to view values:

  • Name =
  • Friends =

Formatting forms

Hints and mandatory indicators

<--FormPlugin form start-->
<--//-->

Your name:
* Or just anything

<--//-->

Enter something else:
*

<--//-->

<--/FormPlugin form end-->

Format: example of items on one line

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

<--FormPlugin form start-->
<--//-->
Your name:
<--//-->
<--/FormPlugin form end-->

Adding CSS styles

Setting:

formcssclass="foswikiFormSteps"
elementcssclass="foswikiFormStep"

<--FormPlugin form start-->
<--//-->

Your name:

<--//-->

<--/FormPlugin form end-->

Custom CSS classes

<--FormPlugin form start-->
<--//-->

Your name:

<--//-->

<--/FormPlugin form end-->

Javascript enhancements

Focus

This example is disabled by default, because new browsers automatically scroll the page to the input field with focus.

Show Focus example

Original source:

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

Default text before click

Click on the field...

<--FormPlugin form start-->
<--//-->

<--/FormPlugin form end-->

onMouseOver, onMouseOut

Mouse over the field...

<--FormPlugin form start-->
<--/FormPlugin form end-->

onSelect, onBlur

Doubleclick on the text to select it...

<--FormPlugin form start-->
<--/FormPlugin form end-->

onKeyUp

Change the text...

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

Change output will be written here...

<--FormPlugin form start-->
<--/FormPlugin form end-->

onClick

Click a checkbox...

<--FormPlugin form start-->
<--//-->






<--/FormPlugin form end-->

onSubmit

Give a warning before submitting the form...

<--FormPlugin form start-->
<--/FormPlugin form end-->

Validation

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

<--FormPlugin form start-->
<--//-->

Your name:
* You cannot post anonymously

<--//-->

Estimated team earnings:
* You may use a decimal number

<--//-->

Team members:






* Select at least one person

<--//-->

<--/FormPlugin form end-->

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"
}%

<--FormPlugin form start-->
<--//-->

Your name:
*

<--//-->

Your salary:
*

<--//-->

<--/FormPlugin form end-->

Real world examples

Save topic text to another topic

<--FormPlugin form start-->
<--//-->

Topic text:

<--//-->

<--/FormPlugin form end-->

Upload

<--FormPlugin form start-->
<--//-->

Attach new file

<--//-->

Comment

<--//-->

<--//-->

<--//-->

<--/FormPlugin form end-->

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 WikiGuest entries

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

Try it out:

<--FormPlugin form start-->
<--//-->

I am on holidays from:

<--//-->

Until:

<--//-->

<--/FormPlugin form end-->

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.

<--FormPlugin form start-->
<-- CommentPlugin attributes -->

Enter a new article

Attach a file first, then enter the data below.

<--//-->

Title
* Link will have this label

<--//-->

Source name

<--//-->

Source url

<--//-->

Publishing date

<--/FormPlugin form end-->

Article data

Title Source name Source url Publishing date Entry date
a asasdasd source 31 May 2010 31 May 2010
<-- /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%

<--FormPlugin form start-->
<--//-->

To:
* Enter an e-mail address

<--//-->

Subject:
(optional)

<--//-->

Message:
(optional)

<--//-->

<--/FormPlugin form end-->

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.

<--FormPlugin form start-->
<--//-->

Search name on Flickr:
Enter a first name, such as Sander, Johan or Annemieke

<--//-->

Shows pictures from the Netherlands only if these are geo-tagged

<--//-->

<--/FormPlugin form end-->
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback