| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <meta name="Date-Revision-yyyymmdd" content="20140918"/> |
| <meta http-equiv="Content-Language" content="en"/> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| |
| <title>Tag Developers Guide</title> |
| |
| <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css"> |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> |
| <link href="/css/main.css" rel="stylesheet"> |
| <link href="/css/custom.css" rel="stylesheet"> |
| <link href="/highlighter/github-theme.css" rel="stylesheet"> |
| |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> |
| <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script> |
| <script type="text/javascript" src="/js/community.js"></script> |
| </head> |
| <body> |
| |
| <a href="http://github.com/apache/struts" class="github-ribbon"> |
| <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"> |
| </a> |
| |
| <header> |
| <nav> |
| <div role="navigation" class="navbar navbar-default navbar-fixed-top"> |
| <div class="container"> |
| <div class="navbar-header"> |
| <button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle"> |
| Menu |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a> |
| </div> |
| <div id="struts-menu" class="navbar-collapse collapse"> |
| <ul class="nav navbar-nav"> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Home<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/index.html">Welcome</a></li> |
| <li><a href="/download.cgi">Download</a></li> |
| <li><a href="/releases.html">Releases</a></li> |
| <li><a href="/announce.html">Announcements</a></li> |
| <li><a href="http://www.apache.org/licenses/">License</a></li> |
| <li><a href="https://www.apache.org/foundation/thanks.html">Thanks!</a></li> |
| <li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Support<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/mail.html">User Mailing List</a></li> |
| <li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li> |
| <li><a href="/security.html">Reporting Security Issues</a></li> |
| <li class="divider"></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Migration+Guide">Version Notes</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Security+Bulletins">Security Bulletins</a></li> |
| <li class="divider"></li> |
| <li><a href="/maven/project-info.html">Maven Project Info</a></li> |
| <li><a href="/maven/struts2-core/dependencies.html">Struts Core Dependencies</a></li> |
| <li><a href="/maven/struts2-plugins/modules.html">Plugin Dependencies</a></li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Documentation<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/birdseye.html">Birds Eye</a></li> |
| <li><a href="/primer.html">Key Technologies</a></li> |
| <li><a href="/kickstart.html">Kickstart FAQ</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li> |
| <li class="divider"></li> |
| <li><a href="/getting-started/">Getting Started</a></li> |
| <li><a href="/security/">Security Guide</a></li> |
| <li><a href="/core-developers/">Core Developers Guide</a></li> |
| <li><a href="/tag-developers/">Tag Developers Guide</a></li> |
| <li><a href="/maven-archetypes/">Maven Archetypes</a></li> |
| <li><a href="/plugins/">Plugins</a></li> |
| <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li> |
| <li><a href="/tag-developers/tag-reference.html">Tag reference</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/FAQs">FAQs</a></li> |
| <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Contributing<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/youatstruts.html">You at Struts</a></li> |
| <li><a href="/helping.html">How to Help FAQ</a></li> |
| <li><a href="/dev-mail.html">Development Lists</a></li> |
| <li><a href="/contributors/">Contributors Guide</a></li> |
| <li class="divider"></li> |
| <li><a href="/submitting-patches.html">Submitting patches</a></li> |
| <li><a href="/builds.html">Source Code and Builds</a></li> |
| <li><a href="/coding-standards.html">Coding standards</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Contributors+Guide">Contributors Guide</a></li> |
| <li class="divider"></li> |
| <li><a href="/release-guidelines.html">Release Guidelines</a></li> |
| <li><a href="/bylaws.html">PMC Charter</a></li> |
| <li><a href="/volunteers.html">Volunteers</a></li> |
| <li><a href="https://gitbox.apache.org/repos/asf?p=struts.git">Source Repository</a></li> |
| <li><a href="/updating-website.html">Updating the website</a></li> |
| </ul> |
| </li> |
| <li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </nav> |
| </header> |
| |
| |
| <article class="container"> |
| <section class="col-md-12"> |
| <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/form-tags.md" title="Edit this page on GitHub">Edit on GitHub</a> |
| |
| <h1 class="no_toc" id="form-tags">Form Tags</h1> |
| |
| <ul id="markdown-toc"> |
| <li><a href="#form-tag-themes" id="markdown-toc-form-tag-themes">Form Tag Themes</a></li> |
| <li><a href="#simple-theme-caveats" id="markdown-toc-simple-theme-caveats">Simple theme caveats</a></li> |
| <li><a href="#common-attributes" id="markdown-toc-common-attributes">Common Attributes</a></li> |
| <li><a href="#template-related-attributes" id="markdown-toc-template-related-attributes">Template-Related Attributes</a></li> |
| <li><a href="#javascript-related-attributes" id="markdown-toc-javascript-related-attributes">Javascript-Related Attributes</a></li> |
| <li><a href="#tooltip-related-attributes" id="markdown-toc-tooltip-related-attributes">Tooltip Related Attributes</a></li> |
| </ul> |
| |
| <p>Please make sure you have read the <a href="tag-syntax">Tag Syntax</a> document and understand how tag attribute syntax works.</p> |
| |
| <p>Within the form tags, there are two classes of tags: the form tag itself, and all other tags, which make up |
| the individual form elements. The behavior of the form tag is different than the elements enclosed within it.</p> |
| |
| <h2 id="form-tag-themes">Form Tag Themes</h2> |
| |
| <p>As explained in <a href="themes-and-templates">Themes and Templates</a>, the HTML Tags (which includes Form Tags) are all driven |
| by templates. Templates are grouped together to create themes. The framework bundles three themes in the distribution.</p> |
| |
| <table> |
| <thead> |
| <tr> |
| <th>simple</th> |
| <th>Sometimes <em>too</em> simple</th> |
| <th> </th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>xhtml</td> |
| <td>Extends simple</td> |
| <td>(default)</td> |
| </tr> |
| <tr> |
| <td>ajax</td> |
| <td>Extends xhtml</td> |
| <td> </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>The predefined themes can be used “as is” or customized.</p> |
| |
| <blockquote> |
| <p>The <code class="highlighter-rouge">xhtml</code> theme renders out a two-column table. If a different layout is needed, do <em>not</em> write your own HTML. |
| Create a new theme or utilize the simple theme.</p> |
| </blockquote> |
| |
| <h2 id="simple-theme-caveats">Simple theme caveats</h2> |
| |
| <p>The downside of using the simple theme is that it doesn’t support as many of the attributes that the other themes do. |
| For example, the <code class="highlighter-rouge">label</code> attribute does nothing in the simple theme, and the automatic display of error messages |
| is not supported.</p> |
| |
| <h2 id="common-attributes">Common Attributes</h2> |
| |
| <p>All the form tags extend the UIBean class. This base class provides a set of common attributes, that can be grouped |
| in to three categories: <em>templated-related</em>, <em>javascript-related</em>, and <em>general</em> attributes. The individual attributes |
| are documented on each tag’s reference page.</p> |
| |
| <p>In addition to the common attributes, a special attribute exists for all form element tags: <code class="highlighter-rouge">form</code> (<code class="highlighter-rouge">${parameters.form}</code>). |
| The <code class="highlighter-rouge">form</code> property represents the attributes used to render the form tag, such as the form’s id. In a template, |
| the form’s ID can be found by calling <code class="highlighter-rouge">${parameters.form.id}</code>.</p> |
| |
| <h2 id="template-related-attributes">Template-Related Attributes</h2> |
| |
| <table border="1" summary=""> |
| <thead> |
| <tr> |
| <td>Attribute</td> |
| <td>Theme</td> |
| <td>Data Types</td> |
| <td>Description</td> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>templateDir</td> |
| <td>n/a</td> |
| <td>String</td> |
| <td>define the template directory</td> |
| </tr> |
| <tr> |
| <td>theme</td> |
| <td>n/a</td> |
| <td>String</td> |
| <td>define the theme name</td> |
| </tr> |
| <tr> |
| <td>template</td> |
| <td>n/a</td> |
| <td>String</td> |
| <td>define the template name</td> |
| </tr> |
| <tr> |
| <td>themeExpansionToken</td> |
| <td>n/a</td> |
| <td>String</td> |
| <td>special token (defined with struts.ui.theme.expansion.token) used to search for template in parent theme |
| (don't use it separately!)</td> |
| </tr> |
| <tr> |
| <td>expandTheme</td> |
| <td>n/a</td> |
| <td>String</td> |
| <td>concatenation of themeExpansionToken and theme which tells internal template loader mechanism |
| to try load template from current theme and then from parent theme (and parent theme, and so on) |
| when used with <#include/> directive</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2 id="javascript-related-attributes">Javascript-Related Attributes</h2> |
| |
| <table border="1" summary=""> |
| <thead> |
| <tr> |
| <td>Attribute</td> |
| <td>Theme</td> |
| <td>Data Types</td> |
| <td>Description</td> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>onclick</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onclick attribute</td> |
| </tr> |
| <tr> |
| <td>ondblclick</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript ondbclick attribute</td> |
| </tr> |
| <tr> |
| <td>onmousedown</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onmousedown attribute</td> |
| </tr> |
| <tr> |
| <td>onmouseup</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onmouseup attribute</td> |
| </tr> |
| <tr> |
| <td>onmouseover</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onmouseover attribute</td> |
| </tr> |
| <tr> |
| <td>onmouseout</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onmouseout attribute</td> |
| </tr> |
| <tr> |
| <td>onfocus</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onfocus attribute</td> |
| </tr> |
| <tr> |
| <td>onblur</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onblur attribute</td> |
| </tr> |
| <tr> |
| <td>onkeypress</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onkeypress attribute</td> |
| </tr> |
| <tr> |
| <td>onkeyup</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onkeyup attribute</td> |
| </tr> |
| <tr> |
| <td>onkeydown</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onkeydown attribute</td> |
| </tr> |
| <tr> |
| <td>onselect</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onselect attribute</td> |
| </tr> |
| <tr> |
| <td>onchange</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>html javascript onchange attribute</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2 id="tooltip-related-attributes">Tooltip Related Attributes</h2> |
| |
| <table border="1" summary=""> |
| <tr> |
| <td>Attribute</td> |
| <td>Data Type</td> |
| <td>Default</td> |
| <td>Description</td> |
| </tr> |
| <tr> |
| <td>tooltip</td> |
| <td>String</td> |
| <td>none</td> |
| <td>Set the tooltip of this particular component</td> |
| </tr> |
| <tr> |
| <td>jsTooltipEnabled</td> |
| <td>String</td> |
| <td>false</td> |
| <td>Enable js tooltip rendering</td> |
| </tr> |
| <tr> |
| <td>tooltipIcon</td> |
| <td>String</td> |
| <td>/struts/static/tooltip/tooltip.gif</td> |
| <td>The url to the tooltip icon</td> |
| <tr> |
| <td>tooltipDelay</td> |
| <td>String</td> |
| <td>500</td> |
| <td>Tooltip shows up after the specified timeout (miliseconds). A behavior similar to that of OS based tooltips.</td> |
| </tr> |
| <tr> |
| <td>key</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>The name of the property this input field represents. This will auto populate the name, label, and value</td> |
| </tr> |
| </table> |
| |
| ## General Attributes |
| |
| <table border="1" summary=""> |
| <thead> |
| <tr> |
| <td>Attribute</td> |
| <td>Theme</td> |
| <td>Data Types</td> |
| <td>Description</td> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>cssClass</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>define html class attribute</td> |
| </tr> |
| <tr> |
| <td>cssStyle</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>define html style attribute</td> |
| </tr> |
| <tr> |
| <td>cssErrorClass</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>error class attribute</td> |
| </tr> |
| <tr> |
| <td>cssErrorStyle</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>error style attribute</td> |
| </tr> |
| <tr> |
| <td>title</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>define html title attribute</td> |
| </tr> |
| <tr> |
| <td>disabled</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>define html disabled attribute</td> |
| </tr> |
| <tr> |
| <td>label</td> |
| <td>xhtml</td> |
| <td>String</td> |
| <td>define label of form element</td> |
| </tr> |
| <tr> |
| <td>labelPosition</td> |
| <td>xhtml</td> |
| <td>String</td> |
| <td>define label position of form element (top/left), default to left</td> |
| </tr> |
| <tr> |
| <td>requiredPosition</td> |
| <td>xhtml</td> |
| <td>String</td> |
| <td>define required label position of form element (left/right), default to right</td> |
| </tr> |
| <tr> |
| <td>errorPosition</td> |
| <td>xhtml</td> |
| <td>String</td> |
| <td>define error position of form element (top|bottom), default to top</td> |
| </tr> |
| <tr> |
| <td>name</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>Form Element's field name mapping</td> |
| </tr> |
| <tr> |
| <td>requiredLabel</td> |
| <td>xhtml</td> |
| <td>Boolean</td> |
| <td>add * to label (true to add false otherwise)</td> |
| </tr> |
| <tr> |
| <td>tabIndex</td> |
| <td>simple</td> |
| <td>String</td> |
| <td>define html tabindex attribute</td> |
| </tr> |
| <tr> |
| <td>value</td> |
| <td>simple</td> |
| <td>Object</td> |
| <td>define value of form element</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| > Some tag attributes may not be utilized by all, or any, of the templates. For example, the form tag supports |
| > the tabindex attribute, but none of the themes render the tabindex. |
| |
| ## Value/Name Relationship |
| |
| In many of the tags (except for the form tag) there is a unique relationship between the `name` and `value` attributes. |
| The `name` attribute provides the name for the tag, which in turn is used as the control attribute when the form |
| is submitted. The value submitted is bound to the `name`. In most cases, the `name` maps to a simple JavaBean property, |
| such as "postalCode". On a submit, the value would be set to the property by calling the `setPostalCode` mutator. |
| |
| Likewise, a form control could be populated by calling a JavaBean accessor, like `getPostalCode`. In the expression l |
| anguage, we can refer to the JavaBean property by name. An expression like "%{postalCode}" would in turn call `getPostalCode`. |
| |
| ```ftl |
| <@s.form action="updateAddress"> |
| <@s.textfield label="Postal Code" name="postalCode" value="%{postalCode}"/> |
| ... |
| </@s.form> |
| ``` |
| |
| However, since the tags imply a relationship between the `name` and `value`, the `value` attribute is optional. |
| If a `value` is not specified, by default, the JavaBean accessor is used instead. |
| |
| ```ftl |
| <@s.form action="updateAddress"> |
| <@s.textfield label="Postal Code" name="postalCode"/> |
| ... |
| </@s.form> |
| ``` |
| |
| While most attributes are exposed to the underlying templates as the same key as the attribute (`${parameters.label}`), |
| the `value` attribute is not. Instead, it can be accessed via the `nameValue` key (`${parameters.nameValue}`). |
| The `nameValue` key indicates that the value may have been generated from the `name` attribute rather than explicitly |
| defined in the `value` attribute. |
| |
| ## ID Name Assignment |
| |
| All form tags automatically assign an ID to the control, but the ID can be overridden if needed. |
| |
| |Forms|The default ID is the action name. For example, "updateAddress".| |
| |-----|------------------------------------------------------------------| |
| |Controls|The default ID is the form's name concatenated with the tag name. For example, "updateAddress_postalCode".| |
| |
| ## Form labelposition propagation |
| |
| When `labelposition` attribute was defined for `<s:form>` tag it will be propagated to all form elements, but if form |
| element defines its own `labelposition` it will take precedence over `<s:form>`'s attribute. Since 2.3.17. |
| |
| ## Required Attribute |
| |
| The `required` attribute on many UI tags defaults to true only if you have client-side validation enabled, |
| and a validator is associated with that particular field. |
| |
| ## Tooltip |
| |
| > **NOTE**: tooltipConfig is deprecated, use individual tooltip configuration attributes instead |
| |
| Every Form UI component (in xhtml / css_xhtml or any other that extends them) can have tooltips assigned to them. |
| The Form component's tooltip related attribute, once defined, will be applied to all form UI components that are created |
| under it unless explicitly overridden by having the Form UI component itself defined with their own tooltip attribute. |
| |
| In Example 1, the textfield will inherit the tooltipDelay and tooltipIconPath attribute from its containing form. |
| In other words, although it doesn't define a tooltipIconPath attribute, it will have that attribute inherited from its |
| containing form. |
| |
| In Example 2, the textfield will inherit both the tooltipDelay and tooltipIconPath attribute from its containing form, |
| but the tooltipDelay attribute is overridden at the textfield itself. Hence, the textfield actually will have its |
| tooltipIcon defined as /myImages/myIcon.gif, inherited from its containing form, and tooltipDelay defined as 5000. |
| |
| Example 3, 4 and 5 show different ways of setting the tooltip configuration attribute. |
| - Example 3: Set tooltip config through the body of the param tag |
| - Example 4: Set tooltip config through the value attribute of the param tag |
| - Example 5: Set tooltip config through the tooltip attributes of the component tag |
| |
| ```jsp |
| <!-- Example 1: --> |
| <s:form |
| tooltipDelay="500" |
| tooltipIconPath="/myImages/myIcon.gif" .... > |
| .... |
| <s:textfield label="Customer Name" tooltip="Enter the customer name" .... /> |
| .... |
| </s:form> |
| |
| <!-- Example 2: --> |
| <s:form |
| tooltipDelay="500" |
| tooltipIconPath="/myImages/myIcon.gif" .... > |
| .... |
| <s:textfield label="Address" tooltip="Enter your address" tooltipDelay="5000" /> |
| .... |
| </s:form> |
| |
| <-- Example 3: --> |
| <s:textfield label="Customer Name" tooltip="One of our customer Details"> |
| <s:param name="tooltipDelay"> |
| 500 |
| </s:param> |
| <s:param name="tooltipIconPath"> |
| /myImages/myIcon.gif |
| </s:param> |
| </s:textfield> |
| |
| <-- Example 4: --> |
| <s:textfield label="Customer Address" tooltip="Enter The Customer Address"> |
| <s:param name="tooltipDelay" value="500" /> |
| </s:textfield> |
| |
| <-- Example 5: --> |
| <s:textfield label="Customer Telephone Number" tooltip="Enter customer Telephone Number" tooltipDelay="500" tooltipIconPath="/myImages/myIcon.gif" /> |
| ``` |
| </tr></table> |
| |
| </section> |
| </article> |
| |
| |
| <footer class="container"> |
| <div class="col-md-12"> |
| Copyright © 2000-2018 <a href="http://www.apache.org/">The Apache Software Foundation </a>. |
| All Rights Reserved. |
| </div> |
| <div class="col-md-12"> |
| Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are |
| trademarks of The Apache Software Foundation. |
| </div> |
| <div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div> |
| </footer> |
| |
| <script>!function (d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0]; |
| if (!d.getElementById(id)) { |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "//platform.twitter.com/widgets.js"; |
| fjs.parentNode.insertBefore(js, fjs); |
| } |
| }(document, "script", "twitter-wjs");</script> |
| <script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script> |
| |
| <div id="fb-root"></div> |
| |
| <script>(function (d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0]; |
| if (d.getElementById(id)) return; |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; |
| fjs.parentNode.insertBefore(js, fjs); |
| }(document, 'script', 'facebook-jssdk'));</script> |
| |
| |
| </body> |
| </html> |