XForms/Input Field Width

From Wikibooks, open books for an open world
< XForms
Jump to: navigation, search


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 Image[edit]

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

Sample Program[edit]

      <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}
         <xf:instance xmlns="">
      <legend>Name and Address</legend>
       <xf:input class="PersonGivenName" ref="/Data/PersonGivenName" incremental="true">
       <xf:input class="PersonMiddleName"  ref="/Data/PersonMiddleName" incremental="true">
       <xf:input class="PersonSurName" ref="/Data/PersonSurName" incremental="true">
       <xf:input class="LocationCityName" ref="/Data/LocationCityName" incremental="true">
       <xf:input class="LocationStateCode" ref="/Data/LocationStateCode" incremental="true">
       <xf:input class="LocationPostalID" ref="/Data/LocationPostalID" incremental="true">

       <xf:output ref="/Data/PersonGivenName">
         <xf:label>First Name:</xf:label>
       <xf:output ref="/Data/PersonMiddleName">
         <xf:label>Middle Name:</xf:label>
       <xf:output ref="/Data/PersonSurName">
         <xf:label>Last Name:</xf:label>
        <xf:output ref="/Data/LocationCityName">
         <xf:label>City Name:</xf:label>
       <xf:output ref="/Data/LocationStateCode">
         <xf:label>State Code:</xf:label>
       <xf:output ref="/Data/LocationPostalID">
         <xf:label>Postal Code:</xf:label>


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.

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