< XForms

Here is a simple address form. Note that HTML is the default namespace. We interleave both XForms and HTML tags but the XForms tags have xf as a prefix. We use the HTML fieldset and legend tags to put related form elements in a group. We use the XForms group element to tell us where in the model to get our instance data.

Load XForms Application

Program

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Address Form</title>
      <xf:model>
         <xf:instance>
            <Address xmlns="">
               <LocationStreetFullText />
               <LocationCityName />
               <LocationStateName />
               <LocationPostalID />
            </Address>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <xf:group ref="/Address">
         <fieldset>
            <legend>Mailing Address</legend>
            <xf:input ref="LocationStreetFullText">
               <xf:label>Street: </xf:label>
            </xf:input>
            <br />
            <xf:input ref="LocationCityName">
               <xf:label>City:</xf:label>
            </xf:input>
            <br />
            <xf:input ref="LocationStateName">
               <xf:label>State:</xf:label>
            </xf:input>
            <br />
            <xf:input ref="LocationPostalID">
               <xf:label>Postal Code:</xf:label>
            </xf:input>
         </fieldset>
      </xf:group>
   </body>
</html>

Discussion

The form labels are not lined up very nicely. This can be done by adding a few lines of cascading style sheet to the program.

Note that the data uses an upper camel case naming convention used in ebXML, ACORD, UBL, GMXDM, NIEM and other US federal naming and design conventions.


This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.