XForms/Address

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.

Link to XForms Application

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.

Next Page: Address Aligned | Previous Page: Input
Home: XForms