styling xforms using css to make your forms look great date: 10/9/2008 dan mccreary president dan...
TRANSCRIPT
Styling XFormsUsing CSS to make your forms look great
Date: 10/9/2008
Dan McCrearyPresidentDan McCreary & [email protected](952) 931-9198
M
D
Metadata Solutions
Copyright 2008 Dan McCreary & Associates 2
M
D
Outline
• Why use CSS?
• XForms namespaces
• Field alignment
• Changing control dimensions
Copyright 2008 Dan McCreary & Associates 3
M
D
Why CSS?
• XForms is a w3c standard
• CSS is a w3c standard
• Don’t reinvent the wheel
Copyright 2008 Dan McCreary & Associates 4
M
D
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
Copyright 2008 Dan McCreary & Associates 5
M
D
Challenges
• One of the most difficult part about learning XForms is learning CSS
• Option: use someone else’s XForms stylesheets
Copyright 2008 Dan McCreary & Associates 6
M
D
XForms Namespace
@namespace xf url("http://www.w3.org/2002/xforms");
…
xf|input {}
Note that the “:” is already in use.
Copyright 2008 Dan McCreary & Associates 7
M
D
Terminology
• Label – the text that identifies a control
• Control Value – the area that the user enters the data
Copyright 2008 Dan McCreary & Associates 8
M
D
Simple Form Layout
• Labels• Control Values
Copyright 2008 Dan McCreary & Associates 9
M
D
Layout issues
• Wide full-text descriptions
• Selection lists
Copyright 2008 Dan McCreary & Associates 10
M
D
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.
Copyright 2008 Dan McCreary & Associates 11
M
D
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;}
Copyright 2008 Dan McCreary & Associates 12
M
D
Select1 and Inputs
• You can adjust the vertical separation
Copyright 2008 Dan McCreary & Associates 13
M
D
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; }
Copyright 2008 Dan McCreary & Associates 14
M
D
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, PresidentDan McCreary & Associates
Metadata Strategy [email protected]
(952) 931-9198