[DAISY] Updated: Captcha Widget

Tue, 26 Dec 2006 05:07:18 -0800 

A document has been updated:

http://cocoon.zones.apache.org/daisy/documentation/1294.html

Document ID: 1294
Branch: main
Language: default
Name: Captcha Widget (unchanged)
Document Type: Cocoon Document (unchanged)
Updated on: 12/21/06 11:29:55 AM
Updated by: Helma van der Linden

A new version has been created, state: publish

Parts
=====

Content
-------
This part has been updated.
Mime type: text/xml (unchanged)
File name:  (unchanged)
Size: 2544 bytes (previous version: 2101 bytes)
Content diff:
    <html>
    <body>
    
--- <p>        &lt;!-- generate captcha image --&gt;<br/>
---         &lt;map:match pattern="**/captcha-*.jpg"&gt;<br/>
---           &lt;map:read type="captcha" src="{session-attr:captcha-{2}}"/&gt;
--- <br/>
---         &lt;/map:match&gt;</p>
+++ <h2>Concept</h2>
    
--- <h1>Concept</h1>
--- 
    <p>To prevent spammers from abusing forms, more and more sites are 
including an
    image that displays a distorted code. This is based on the CAPTCHA technique
    (see also the <a href="daisy:686">CAPTCHA</a> block).</p>
    
    <p>The Captcha widget provides a widget containing the generated image and 
an
    input field. The validation is only true if the input in the field matches 
the
--- code displayed in the image.<br/>
--- The widget defines a session attribute with a name of <tt>captcha-&lt;random
+++ code displayed in the image. Otherwise you will see a validation error.</p>
+++ 
+++ <p>The widget defines a session attribute with a name of 
<tt>captcha-&lt;random
    id&gt;</tt> and a value containing a random code. The code is also added to 
a
    <tt>secret</tt> attribute of the widget for the validation phase. The image 
has
    the same name as the session attribute with a <tt>jpg</tt> extension.</p>
    
    <h1>Definition</h1>
    
+++ <h2>Widget definition</h2>
+++ 
    <p>The definition is simply:</p>
    
    <pre>&lt;fd:captcha id="captchacheck" required="true"&gt;
(28 equal lines skipped)
       &lt;map:read type="captcha" src="{session-attr:captcha-{2}}"/&gt;
    &lt;/map:match&gt;</pre>
    
+++ <h1>Template</h1>
+++ 
+++ <p>Your template looks something like:</p>
+++ 
+++ <pre>&lt;table&gt;
+++ ...
+++ &lt;tr&gt;
+++    &lt;td class="label"&gt;
+++       &lt;ft:widget-label id="captchacheck"/&gt;
+++    &lt;/td&gt;
+++    &lt;td&gt;
+++       &lt;span 
class="legend"&gt;&lt;i18n:text&gt;captcha-explanation&lt;/i18n:text&gt;&lt;/span&gt;
+++       &lt;br/&gt;
+++       &lt;ft:widget id="captchacheck"/&gt;
+++    &lt;/td&gt;
+++ &lt;/tr&gt;
+++ ...
+++ &lt;/table&gt;</pre>
+++ 
+++ <p class="note">The image is marked with a <tt>captcha</tt> class. It is 
useful
+++ to add a width (100px) and a height (50px) to your CSS file for this class, 
to
+++ avoid display errors in Internet Explorer.</p>
+++ 
    </body>
    </html>