1. Styling XForms Using CSS to make your forms look great Date: 10/9/2008 Dan McCreary President Dan McCreary & Associates dan@danmccreary.com (952) 931-9198 M D Metadata Solutions

2. M D Copyright 2008 Dan McCreary & Associates2 Outline Why use CSS? XForms namespaces Field alignment Changing control dimensions

3. M D Copyright 2008 Dan McCreary & Associates3 Why CSS? XForms is a w3c standard CSS is a w3c standard Don’t reinvent the wheel

4. M D Copyright 2008 Dan McCreary & Associates4 Background Web form layout is different from paper form layout Paper forms we designed to reduce the amount of paper needed Forms were “dense” Online users want clear labels, hints, examples and hints

5. M D Copyright 2008 Dan McCreary & Associates5 Challenges One of the most difficult part about learning XForms is learning CSS Option: use someone else’s XForms stylesheets

6. M D Copyright 2008 Dan McCreary & Associates6 XForms Namespace @namespace xf url("http://www.w3.org/2002/xforms"); … xf|input {} Note that the “:” is already in use.

7. M D Copyright 2008 Dan McCreary & Associates7 Terminology Label – the text that identifies a control Control Value – the area that the user enters the data

8. M D Copyright 2008 Dan McCreary & Associates8 Simple Form Layout Labels Control Values

9. M D Copyright 2008 Dan McCreary & Associates9 Layout issues Wide full-text descriptions Selection lists

10. M D Copyright 2008 Dan McCreary & Associates10 Block Controls /* All form controls appear on their own line with a 5px margin above and below between controls */ xf|input, xf|select, xf|select1, xf|textarea { display:block; width:100%; margin:5px 0; } Margin above and below.Margin left and right.

11. M D Copyright 2008 Dan McCreary & Associates11 Right Align Labels xf|input > xf|label, xf|select > xf|label, xf|select1 > xf|label, xf|textarea > xf|label { text-align:right; padding-right:10px; }

12. M D Copyright 2008 Dan McCreary & Associates12 Select1 and Inputs You can adjust the vertical separation

13. M D Copyright 2008 Dan McCreary & Associates13 Required Field Options /* Differentiate between required fields and non-required fields */ xf|input:required {font-weight: bold;} xf|input:required.xf-value {background-color: yellow;} /* This adds a red asterisk after the required input fields */ *:required::after {font-weight:bold; font-size:1.5em; content: "*"; color: red; }

14. M D Copyright 2008 Dan McCreary & Associates14 Thank You! Please contact me for more information: Native XML Databases Metadata Management Metadata Registries Service Oriented Architectures Business Intelligence and Data Warehouse Semantic Web Dan McCreary, President Dan McCreary & Associates Metadata Strategy Development dan@danmccreary.com (952) 931-9198