Form Plugin Examples

See FormPlugin

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

Javascript enhancements

Focus

Enter your name:

Default text before click

Click on the field...

onMouseOver, onMouseOut

Mouse over the field...

onSelect, onBlur

Doubleclick on the text to select it...

onKeyUp

Change the text...

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

Change output will be written here...

onClick

Click a checkbox...






onSubmit

Submit the form...

Hints and mandatory indicators

Enter your name:
* Or just anything

Enter something else:
*

Adding styles

Setting:

formcssclass="twikiFormSteps"
elementcssclass="twikiFormStep"

Enter your name:

Custom CSS classes

Enter your name:

Items on one line

Using elementformat=" $t $e ":

Enter your name:

Multi-select items

Nice persons with custom titleformat:






* Select one person

Not-so-nice persons with selected defaults:






* Select any person

And even more persons without custom fieldformat:

* Select any person

Multiselect is selectmulti:

Disabled

Enter your name:

Choose a name:






Read-only

Enter your name:

Choose a name:






Password

Enter a password:
*

Validation

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

Enter your name:
* You cannot post anonymously

Your salary:
* You may include decimal numbers

Who earns more than you:






* Just point the finger

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

The CarbonCopy form field:

Enter your name:
*

Enter your salary:
*

Upload

Attach new file

Comment

Date

Publishing date

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

%TMPL:DEF{PROMPT:holiday_data}%
<div class="twikiFormSteps">
<div class="twikiFormStep">
%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='TWikiGuest'" then="on"}%"
validate="nonempty"
}%
%FORMELEMENT{
name="Until"
type="date"
dateformat="%Y/%m/%d"
size="9"
title="Until:"
disabled="%IF{"$WIKINAME='TWikiGuest'" 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"
buttonlabel="Add my dates"
disabled="%IF{"$WIKINAME='TWikiGuest'" then="on"}%"
}% %IF{"$WIKINAME='TWikiGuest'" 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:

I am on holidays from:

Until:

Log in to add your dates

Working together with CommentPlugin: filling a table

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

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

Article data

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

To:
* Enter an e-mail address

Subject:
(optional)

Message:
(optional)

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.

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

Topic revision: r2 - 2008-09-13 - 22:13:47 - TWikiAdminUser
 
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback