XForms Essentials

Chapter 9. Styling XForms

“Never offend people with style when you can offend them with substance.”

—Sam Brown

A key advantage of XForms over proprietary forms systems is that content and presentation are separated. The presentation aspect fits in well with other W3C technologies, namely Cascading Style Sheets (CSS), a technology that predates even XML. As of this writing, CSS is undergoing two concurrent revisions, one labeled Level 2.1, a general clean-up of an earlier specification, as well as Level 3, which includes more advanced features. This chapter discusses aspects of CSS that XForms brings to the fore. If you are not already familiar with the fundamentals of CSS, I suggest picking up the book that taught me most of what I know about CSS, Eric Meyer’s Cascading Style Sheets: The Definitive Guide (O’Reilly).

CSS, Level 3

The XForms specification includes an example of XForms-specific CSS code in an appendix. Example 9-1 reproduces this sample:

Example 9-1. Sample CSS from the XForms specification

@namespace xforms url(http://www.w3.org/2002/xforms/); /* Display a red background on all invalid form controls */ *:invalid { background-color: red; } /* Display a red asterisk after all required form controls */ *:required::after { content: "*"; color: red; } /* Do not render non-relevant form controls */ *:disabled { visibility: hidden; } /* The following declarations cause form controls and their labels to align neatly, as if a two-column table were used */ xforms|group { display: ...