This information is in part taken from the O'Reilly book XForms Essentials. Used with permission.
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.
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.
|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.
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,
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>
In the next lesson, you will learn about submitting your carefully-collected data.