formArchitect

Tutorial

Create a fieldset to collect a user's name and address

This tutorial will show you the basics of grouping and laying out elements in a fieldset.

Create a form giving it any id and action you wish and a width of 300px, then create five Text Boxes with these attributes:

ID	Name	Label
fname	fname	First Name
lname	lname	Last Name
address	address	Address
city	city	City
state	state	State
zip	zip	ZIP Code

and a Fieldset with the id 'info' and label 'Your Information'.

The "Edit Existing Element" menu should like this

and the "Existing Form Elements" menu should look like this

Click 'Your Information' in the "Edit Existing Element" menu to edit the fieldset, then choose the "Add to Fieldset" pane from the tabs above the Edit Fieldset form.

Check the box next to the label of each of the Text Boxes

and click the "Add Checked" button to add these elements to this fieldset's group.

The "Messages" pane will give you feedback about what you've done.

You can also see in the "Edit Existing Element" menu that the Text Boxes are now shown as grouped under the fieldset (as indicated by the grey background color).

Click the Presentation tab in the top horizontal menu and the preview pane should show a form similar to this

Don't worry if your elements aren't in the same order as in the screenshot, we'll fix that in a minute.

Select 'Your Information' from the "Choose Parent" menu to select the fieldset for editing.

If your Text Boxes are out of order, go to the "Element Order" tab (bottom right under the preview pane and move them (by pressing the "<" and ">" buttons) until they're in the correct order.

By default, your elements will take up 100% of the space available to them in the form. We'll give them a little room to breathe by applying a margin around every Text Box container.

Click 'Child Container' from the "Choose Target Child" menu, then the 'Add' tab in the blue CSS rules window that will appear to the bottom left under the preview pane.

Select 'margin' from the top menu and enter '2px' as the value

and click "Add Rules'.

You'll see each container grouped inside the fieldset (which is all of them) now has a 2px margin around it.

In the red 'Column Definitions' tab

you'll see there's a form field (with 100 as a value) for every Text Box in the fieldset. These fields are arranged as the Text Boxes in your fieldset are arranged (six rows of one column each) and the 100 indicates that each column takes up 100% of the available space in the row that it appears.

We're now going to arrange the layout of the textboxes to put First Name and Last Name in the first row and City, State, and ZIP Code together in the last row.

Click the "+" button to the right of the field representing row one

and Last Name will move up in the layout to occupy the newly created column next to First Name and the width value for each will be set to 50 (each will occupy 50% of the available width in the row).

Create two columns next to City (by clicking the "+" next to row three twice)

and your form should look like this

Now we'll give a little more room for a user to enter their city and a little less room to enter state and zip code by changing their column widths in the "Column Definitions" pane.

When a new column is added to or taken away from a row, the widths of the columns in that row are automatically set evenly to take up 100% of the available space in the row.

As you can see, our new three column row's widths are set to 33-34-33. Change the widths to 50-20-30,

click the "Save Changes" button, and our fieldset now looks like this

and we're done, except that we probably want the label text for the Text Boxes to be a little smaller than the legend text for the fieldset.

Select 'Child Label' from the "Choose Target Child" menu, then the 'Add' pane in the blue CSS rules window. Choose 'Font Size' from the menu (it's under the Font Detail heading), enter 75% as the value, and click the "Add Rules" button.

Viola! Our completed fieldset

Feel free to play around with the fieldset until it's to your liking. You may want to add some padding to the fieldset (select 'This Fieldset' in the "Choose Target Child" menu to edit the css rules of the fieldset itself) or increase the margins around the Text Box containers, or even add a little color to the form by setting a background color on a label or two.