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 ControlIntentExamples
inputEntry of free-form valueedit box, voice prompt
textareaEntry of large amounts of free-form textemail body, weblog entry
secretEntry of sensitive informationpassword prompt
select1Choice of one-and-only-one item from a listradio buttons, drop-list
selectChoice of one or more items from a listcheckbox group, listbox
rangeSelecting a value from a rangeslider, volume control
uploadSelecting a data sourcefile picker, digital camera interface
triggerActivating a defined processbutton, hyperlink
submitActivating submission of the formsubmit button
outputDisplay-only of form datainline 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.


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.