Form Layout

Currently, the control components on the form are arranged vertically with no spaces between them. Now we add spacer and hgroup components to enhance the form layout.

First, place the final two text components, representing the State and Zip Code text controls, inside an hgroup component. Then place a spacer component between them. The result looks like this:

<hgroup>
 <text label="State:" dataBinding = "State" size="2"/>
 <spacer width="5"/>
 <text label="Zip Code:" dataBinding = "Zip"  size="10"/>
</hgroup>

Next, add spacer components after each of the first four control components on the form. The result looks like this:


<text label="Name:" dataBinding="Name" size="25" />
<spacer height=".5"/>  
<dataCombo label="Type" name="ContactType" id="ContactType" size="25"
              dropdownHeight="150px" editable="false" unrestricted="true"
              dataBinding="ContactType" />                                
<spacer height=".5"/>
<text label="Street:" dataBinding = "Street" size="25"/>
<spacer height=".5"/>
<text label="City:" dataBinding = "City" size="25"/>
<spacer height=".5"/>