XForms Institute

XForms Institute > Lesson 4: Form Controls

This information is in part taken from the O'Reilly book XForms Essentials. Used with permission.

Choosing the right form control

The key to picking the right form control is to think about what you want to do, not how you want to do it. For example, 'choose one thing from this list' is a good example of what to do, and 'radio buttons' is a good example of how to do it. In short, you need to think about the intent of each form control.

This kind of thinking is important, since XForms is designed for use beyond conventional desktop environments. For example, the same form could be deployed across small-screen devices, perhaps a phone or PDA, or eyes-free devices, perhaps over the phone.

Form controls listed

The following list of form controls helps you focus on the intent behind each form control. After that, you'll learn how to fine-tune the presentation of form controls.

Form Control	Intent	Examples
input	Entry of free-form value	edit box, voice prompt
textarea	Entry of large amounts of free-form text	email body, weblog entry
secret	Entry of sensitive information	password prompt
select1	Choice of one-and-only-one item from a list	radio buttons, drop-list
select	Choice of one or more items from a list	checkbox group, listbox
range	Selecting a value from a range	slider, volume control
upload	Selecting a data source	file picker, digital camera interface
trigger	Activating a defined process	button, hyperlink
submit	Activating submission of the form	submit button
output	Display-only of form data	inline text

Every form control has a required label child (except output, where it's optional). This enforces the good design habit of always associating a label with a form control. Other common child elements are help for a message at the user's request, hint for a message at the user agent's request, and alert which is available for error messages.

Adjusting appearances

Each form control also accepts an attribute named appearance, allowing finer control of the appearance but without going so far as to completely break down the separation between content and style. The attribute accepts three predefined values, full, compact, and minimal.

These attributes give guidance, in general terms, of how a form control should be rendered. For example, full rendering of a select1 would attempt to show every possible choice, for example a large radio button group. On the other extreme, minimal might present only a tiny one-line list that would have to be expanded to see the choices. The third alternative, compact, would provide a happy middle ground. Keep in mind that these are only suggestions to the XForms engine--for example on a tiny screen, all select1 controls might work as pop-ups.

Examples

Carefully examine the following form control examples, then compare with the live rendering below.

<select1 ref="my:name/@title"><label>Title:</label></select1>
<input ref="my:name"><label>Name:</label></input>
<secret ref="my:password"><label>Password:</label></secret>
<textarea ref="my:address"><label>Address</label></textarea>
<trigger><label>Push Me</label></trigger>

View Source : Validate

In the next lesson, you will learn about submitting your carefully-collected data.