XForms/Address Aligned

Using CSS to Align Form Fields

Forms are much easier to use if they are aligned. This example uses CSS table structures to align our form. It turns groups into tables, inputs into rows and labels and values into cells.

Screen Image

Link to XForms Application

Address Aligned

Program

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Address Form Aligned Using CSS</title>
      <style type="text/css"><![CDATA[
      /* a stylesheet for X-Forms input field alignment */

@namespace xf url("http://www.w3.org/2002/xforms");

/* give the input form labels and the fieldset legend a bold sans-serif font */
label, legend {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
}

/* give the fieldset some breathing room */
fieldset {
   padding: 5px;
   width: 260px;
}

/* the labels are right-aligned in a 150px wide column */
xf|label {
   width: 150px;
   margin: 3px;
   text-align: right;
}

/* the input values are left aligned */
xf|value {
   text-align: left;
}

/* vertical area between input boxes */
input {
   margin: .2em;	
}

/* each group is our table */
xf|group {
   display: table;
}

/* each input is a row in the group table */
xf|input {
   display: table-row;
}

/* each label within an input is a cell in the input row */
xf|input xf|label {
   display: table-cell;	
}

/* each value (pseudo-element) is also a cell in the input row */
xf|input::value {
   display: table-cell;
}
]]>
</style>
      <xf:model>
         <xf:instance xmlns="">
            <Address>
               <LocationStreetFullText />
               <LocationStreetFullText2 />
               <LocationCityName />
               <LocationStateName />
               <LocationPostalID />
            </Address>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <xf:group>
         <fieldset>
            <legend>Mailing Address</legend>
            <xf:input ref="LocationStreetFullText">
               <xf:label>Street: </xf:label>
            </xf:input>
            <xf:input ref="LocationStreetFullText2">
               <xf:label />
            </xf:input>
            <xf:input ref="LocationCityName">
               <xf:label>City:</xf:label>
            </xf:input>
            <xf:input ref="LocationStateName">
               <xf:label>State:</xf:label>
            </xf:input>
            <xf:input ref="LocationPostalID">
               <xf:label>Postal Code:</xf:label>
            </xf:input>
         </fieldset>
      </xf:group>
   </body>
</html>

Discussion

This style sheet only covers the XForms <xf:input> tags. It will need additions if you want to align select, select1, textarea and other controls. A full CSS file for doing this is described later on in this cookbook.

Note that you MUST put inputs inside of a group element for this stylesheet to work.

Also note that the table can grow if the labels get too long.

Note that the display: table properties work in FireFox but may not work in older browsers that do not support table layout.

Alternative layout strategy using float:left

You can control the width of the label column by the odd interaction of the float:left CSS control and the block display. Basically if you try to control the width of a block it may not work unless you also add the float:left to label.

Here is the CSS that works for this:

/* This line ensures all the separate input controls appear on their own lines */
xf|input, xf|select, xf|select1, xf|textarea {display:block; margin:5px 0;}

/* Makes the labels right aligned in a 250px wide column that floats to the left of the input controls. */
xf|input > xf|label, xf|select > xf|label, xf|select1 > xf|label, xf|textarea > xf|label 
{text-align:right; padding-right:10px; width:250px; float:left; text-align:right;}

Note that some older browsers do not support the child (greater than) selector correctly.

Next Page: Input Field Width | Previous Page: Address
Home: XForms