Last modified on 24 March 2011, at 18:30

XForms/Input Field Width

MotivationEdit

Sometimes you want to be able to control the field width, even though the default input text scrolls. This can be done for the entire form or for on a field-by-field basis for all input fields within a form. For example if you have three places that a person's last name occurs they can all be controlled by changing a single CSS file that is imported into the form. This CSS file can also be generated directly from an XML Schema or metadata registry using XML transforms.

Screen ImageEdit

Screen Image of CSS controled field widths using the FireFox XForms extension and the .xf-value selector

Sample ProgramEdit

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <head>
      <title>Controlling Input Field Width</title>
      <style type="text/css"><![CDATA[
   @namespace xf url("http://www.w3.org/2002/xforms");
   body {
      font-family: Helvetica;sans-serif;
   }
 
   label, legend {
      font-weight: bold;
   }
 
   /* The default field width for all inputs */
   .xf-value {
      width: 100px
   }
 
   /* custom field width overrides relative to current font size */
   /* ex is the size of the current lowercase 'x' in pixels */
   /* em is the size of the current "M" character in pixels */
   .PersonGivenName .xf-value {width:20ex}
   .PersonMiddleName .xf-value {width:15ex}
   .PersonSurName .xf-value {width:25ex}
   .LocationCityName .xf-value {width:20ex}
   .LocationStateCode .xf-value {width:2em}
   .LocationPostalID .xf-value {width:10ex}
]]>
   </style>
      <xf:model>
         <xf:instance xmlns="">
            <Data>
               <PersonGivenName>John</PersonGivenName>
               <PersonMiddleName>George</PersonMiddleName>
               <PersonSurName>Doe</PersonSurName>
               <LocationCityName>Anytown</LocationCityName>
               <LocationStateCode>MM</LocationStateCode>
               <LocationPostalID>55123-1234</LocationPostalID>
            </Data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <fieldset>
      <legend>Name and Address</legend>
       <xf:input class="PersonGivenName" ref="/Data/PersonGivenName" incremental="true">
         <xf:label>First:</xf:label>
       </xf:input>
       <xf:input class="PersonMiddleName"  ref="/Data/PersonMiddleName" incremental="true">
         <xf:label>Middle:</xf:label>
       </xf:input>
       <xf:input class="PersonSurName" ref="/Data/PersonSurName" incremental="true">
         <xf:label>Last:</xf:label>
       </xf:input>
       <br/>
       <xf:input class="LocationCityName" ref="/Data/LocationCityName" incremental="true">
         <xf:label>City:</xf:label>
       </xf:input>
       <xf:input class="LocationStateCode" ref="/Data/LocationStateCode" incremental="true">
         <xf:label>State:</xf:label>
       </xf:input>
       <xf:input class="LocationPostalID" ref="/Data/LocationPostalID" incremental="true">
         <xf:label>Postal:</xf:label>
       </xf:input>
       </fieldset>
 
       <xf:output ref="/Data/PersonGivenName">
         <xf:label>First Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/PersonMiddleName">
         <xf:label>Middle Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/PersonSurName">
         <xf:label>Last Name:</xf:label>
       </xf:output>
        <br/>
        <xf:output ref="/Data/LocationCityName">
         <xf:label>City Name:</xf:label>
       </xf:output>
        <br/>
       <xf:output ref="/Data/LocationStateCode">
         <xf:label>State Code:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/LocationPostalID">
         <xf:label>Postal Code:</xf:label>
       </xf:output>
       <br/>
   </body>
</html>

DiscussionEdit

There are many tradeoffs as to where to put form width information. Ideally it would be generated by a script from a metadata registry. One of the questions concerns if a data element length should only have a default recommended value in a semantic registry and the actual constraints be stored in a constraint schema. We all know that zip codes should be 5 or 9 digits and that a 12 digit zip code may only have meaning in a specific context.

This example has been tested using the FireFox browser. The use of the .xf-value class selector may not work on other systems.

Note:
Inline styles within an input field:

<xf:input style=".xf-value {width: 10em}">

does not work.

Next Page: Secret | Previous Page: Address Aligned

Home: XForms