Uni-Form - One Form to Rule Them All 2007-03-23 13:44
Maybe it’s a little pretentious to say „One Form to Rule Them All”, but that is definitely the goal of this project – to make a form template with xhtml and css that most people will be able to use – both developers and those not so familliar with these technologies – and get decent (or even great) results in return.
*24. April 2007:* Due to large amount of comment spam I am forced to close the comments on this entry, for all Uni-Form related questions please use the community site. Thanks.
What’s the Idea Behind Uni-Form?
Uni-Form is an attempt to standardize form markup (xhtml) and css, „modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.
The main goal is to make the whole thing as much „plug ‘n’ play” as possible, literally reduce the whole process of form creation to copy and paste technique. The result currently works in the following browsers:
- IE6
- IE7
- Fx1.5.x, Fx2.x
- Opera9
- Safari2
(probably needs work, need feedback or a Mac) ;)Works fine, thanks sibran - Konqueror
How Does it Work?
The whole idea came from the Microformats movement and Andy „Malarkey” Clarke’s and Doug Bowman’s ideas for standardizing markup and it’s nomenclature. Forms in html are somewhat specific and kind of a „gray area” for developers, designers especially, elements are inflexible, crude, and basically it is the „soft spot” of html. Not many people know how to mark up their forms properly and semantically, so hopefully this will be of help to them.
Uni-Form Units
As every page has it’s elements (e.g. a header, a footer, a sidebar…) so do the forms, and I have chosen to call them „units”. There is a unit for a text input, for a text area, for a check box, etc. All you need to do is copy and paste these units in the order your form requires and apply some classes to them and you’re all set!
Here is an example of a Uni-Form unit used to display a text input field:
<div class="ctrlHolder">
<span>
<label for="password"><em>*</em> Choose Password</label>
<input name="password" id="password" value="" size="35" maxlength="25" type="password" class="textInput" />
</span>
</div>
Uni-Form Layout
First you need to apply a class .uniForm to the form element itself. The layout of your form is then specified by two classes:
.inlineLabels– produces a layout in which the labels are in line with their input fields, and form hints are below the input fields.blockLabels– produces a layout where the label element goes above the input field and form hints are to the right of the label and input fields
These classes can be applied to the form element, or to it’s respective fieldsets (or even the control holder .ctrlHolder div), in case you want different layouts for particular parts of the form for some reason whatsoever.
The inline labels layout is best suited for wider layouts, where you’d want to save vertical space, and the block labels layout – you guessed it – serves best for narrow layouts.
The form hints and required field markers are completely optional and can be safely left out if they are not needed.
Extras
To aid the usability and accessibility of the form itself a little bit of JavaScript is added thanks to my friend Ilija. That JavaScript is used to highlight the entire rows of the currently focused field, and does a better job than a regular :focus pseudo css class. In case you don’t want this functionality in your form just leave out the js files from the head of your document, remove the onload event from the opening body tag and optionally remove all instances of the .highlighter class. I don’t really know what Ilija did there since I am JavaScript illiterate, but I know some code was borrowed from wufoo.com forms.
That’s it for now people, I hope you use this technique and find it useful, go ahead and download the .zip file and play around with it, maybe even you’ll be so kind to report some bugs if you find them, or contribute to the project in any way you see fit.
26.03.2007 13:40 (GMT+1): A big, big thank you to CSS Help Pile, CSS Globe.com, CSS Beauty and everybody else who supported the project. You rock!
26.03.2007 15:30 (GMT+1): A version 1.1 rolled out with added readme file and a user manual inside it. Contains Uni-Form units ready for copy-pasting and examples.
2007-03-23 13:44; 29 comments
Ivan Minic on 23/03/07 04:39 PM comments:
Dugg :)
Andrew on 24/03/07 01:05 PM comments:
That sounds like a great idea.
Standardising forms gives users to option to apply their own stylesheets, and greater options for additional javascript functions based on standard classes.
yderf on 26/03/07 01:04 PM comments:
great idea, great work…thank you
mikewhy on 26/03/07 01:32 PM comments:
Very nice, but it would truly „rule” if you included a validation scheme.
Dragan Babić on 26/03/07 01:44 PM comments:
@ mikewhy:
Could you please be more specific? I’m can’t really say I am sure what you mean by „validation scheme”.
Thanks guys for all of your support!
sibran on 26/03/07 05:12 PM comments:
Hi,
I have tested it on safari, and it works, also the active background.
I have uploaded an screenshot: http://www.e-ss.be/uni-form-safari.jpg
Grtz
Sibran
Dragan Babić on 26/03/07 05:56 PM comments:
Thank you very much sibran! It’s good to know it works in Safari as well.
AlmostAlive on 27/03/07 12:47 AM comments:
Unfortunately, all these CSS form designs lack the one feature I really need: multiple columns. Having a single column of form fields is useful for only really simple forms.
Otherwise, I think it’s a great idea.
Shakakai on 27/03/07 12:58 AM comments:
Very nice work. I’m working on a ColdFusion MVC framework and I think I’m going to build your Uni-Form into my View layer.
I agree with AlmostAlive to a certain extent but the CSS can definitely be tweaked to accommodate a dual column layout.
Cheers.
Dragan Babić on 27/03/07 01:13 AM comments:
Well that is definitely falls under the „design” part of the form, that in respect to the original idea the user should take care of. As you can see in the main example, the form is almost completely styleless, the only css rules that are applied by default are the ones used for layout.
I’m not saying it is a bad idea, it’s just that I don’t see this being included in the core of the Uni-Form, but delivered as separate snippets of css and xhtml – definitely.
Thanks for the suggestions guys.
Richard@Home on 27/03/07 12:23 PM comments:
A very good start, and spookily similar to the markup I have developed over the years. As mentioned by mikewhy, there’s one thing missing for a ‘complete’ solution however: Errors.
In my case, after validation, any fields which have errors have a the class ‘error’ appended to the (to become ) so I can highlight the error fields and the validation error message is appended under the field control.
Your solution to the inline and block labels is much more elegant than my kludgy method however. I shall be incorporating that into my future forms.
Dragan Babić on 27/03/07 01:07 PM comments:
Hi Richard, thanks for your feedback.
The error and confirmation messages are being worked on and will be implemented along with some nifty new features very soon. I wasn’t sure whether to include them in because I would then force markup onto them, and some CMSs just don’t allow customization of error and confirmation messages, so I thought they shouldn’t be a part of Uni-Form. However after some discussion with people, I have realized that they indeed should be included in it.
Anne on 27/03/07 11:51 PM comments:
This is the main problem with this form:
in IE6 the input font does NOT resize. If a user needs the bigger font size to read the label, they also need to see what they type in!
I’ve used relative fonts for this purpose, however, they tend to make the field larger too, thus breaking it out of it’s div box… I’ll post a fix when I have one.
a-
Anne on 28/03/07 02:20 AM comments:
Ok. It would appear that you have to target the acutal tag. Like this: #form .inputClass input, #form .inputClass select {font-size:1em;}
tested on IE6&7 FF and Safari, will resize font of text typed into each field. Use individual classes to target individual input fields.
Let me know if this works for everybody.
Dragan Babić on 28/03/07 09:36 AM comments:
Thanks Anne, I’ll definitely look into that asap.
NoName on 28/03/07 02:53 PM comments:
citation
Very nice, but it would truly „rule” if you included a validation scheme.
Could you please be more specific? I’m can’t really say I am sure what you mean by „validation scheme”.
/citation
Meaning:
Form validation logic, for validating data inputs.For example, if you ask for e-mail address, make sure that user provide e-mail address and not some meaningless string.
Dragan Babić on 28/03/07 03:37 PM comments:
@ NoName and mikewhy on the validation issue:
Well, I guess it can be included for client side validation with JavaScript, but you shouldn’t rely on client side validation alone. I’m definitely gonna add that to my ToDo list.
Nate Cavanaugh on 03/04/07 05:46 PM comments:
Hi Dragan,
I really really love this, and it’s about time someone standardized this, BUT, I have a tiny problem, and that is that I would love to use this in our Enterprise portal, but the classnaming convention is too different from our current nomenclature.
What do you think about standardizing three different versions of the classnames (though I can see why you wouldn’t do to confusion)?
But if you could have one set that uses camel casing, like it is now (.ctrlHolder), and one that did something like .ctrl-holder and another that did .ctrl_holder this would make it so people who are stuck with a current method for class naming can utilize the standardization without having to fork off on their own.
Just a thought :)
Cristian on 03/04/07 11:45 PM comments:
I would be in for standardising forms. Creating forms is always a painful experience for me at the moment, it takes so much time to build nice forms.
Dragan Babić on 04/04/07 10:30 AM comments:
@ Nate:
I am aware of the class names issue and the naming convention differences, but I don’t think having three separate packages won’t solve anything. I have chosen to go with camel case, because I think it is the best case for CSS, and that’s why I use it in all my CSS coding. If your sec strictly states that a naming convention must be followed – and the convention happens to not be in camel case – I guess you could just search and replace all class names in the CSS files and in the form units for that specific project. It shouldn’t be too hard, just use the search and replace all function, that should do the trick since there aren’t many things to change anyway.
Thanks for taking interest people, more improvements coming soon.
Shimon on 11/04/07 04:54 PM comments:
Could you add please some explanations why did you used these elements and not those?
For example, why did you use span { display:block; overflow:hidden; width:100%; }
instead of for example div?
Franck on 12/04/07 08:43 AM comments:
Great job !!!
I miss an upload file field – useful in a contact form when a client send document to describe its needs (word, txt, pdf, html, etc..)
Nate Cavanaugh on 12/04/07 07:38 PM comments:
Thanks for your response, Dragan. A simple search and replace is simple enough, and in fact that’s what we’ve done, but I do have one suggestion:
Could you create a „Custom Modifications” area in the CSS after the main code? I have a feeling there will be updates to this, as it is gaining popularity, and instead of someone having to manually port all of their changes to future versions, they can simply override the core stuff, and their overrides can be left in place.
For instance, instead of having something like this:
.uni-form{
margin:0; padding:0;
position:relative;
width:100%;
/* your rules below */
}
You could have this:
/* Core styles */
.uni-form{
margin:0; padding:0;
position:relative;
width:100%;
}
... The rest of the css rules…
/* Custom modifications */
.uni-form{
}
... The rest of the css rules…
That will make going forward a LOT easier.
For instance, you may add the ability to style multiple columns, etc, or a you may add a fix to a specific rule, and updating would be much easier if the customizations were outside of the core rules.
Just a thought :)
Nate Cavanaugh on 12/04/07 07:45 PM comments:
Also, for anyone who wants the regex pattern to easily convert the class names to your particular naming convention here they are (most decent text editors support regular expressions).
To convert camelCase to dashes (eg. .ctrlHolder -> .ctrl-holder):
Find: \.([a-z]+)([A-Z]{1})([a-z]+)(\s|\{|:)
Replace: .$1-\L$2$3$4
To convert camelCase to underscores( eg. .ctrlHolder -> .ctrl_holder):
Find: \.([a-z]+)([A-Z]{1})([a-z]+)(\s|\{|:)
Replace: .$1_\L$2$3$4
Hope that helps someone :)
Matt on 14/04/07 10:51 AM comments:
Hey Dragan and everyone else :)
In the CSS, there are some images referenced, that don’t exist in the download. Namly:
uf_focused.png – Line 259
icon_alert.png – Line 317
IE 7 continually tries opening these when the form is refocused (ie. You move to a different input)
If you don’t have the images (or a replacement), make sure you comment out that part of the css.
Nobuyaki on 16/04/07 04:47 PM comments:
I think this is for those who DON’T do pro design, but hobbist and similiar. In other words, for lazy ppl.
It is always better to do it yourself then to use out-of-the-box solutions.
This is situation when coder(author of this) tries to become celebrity. When there is nothing to make new, you create anything.
There are alistapart and many more sites that covered this issue hundred times.
Lame. But thumb up for effort ;)
Dragan Babić on 16/04/07 07:32 PM comments:
Hi guys, sorry for the late reply, I was out of town last week. Thanks for all the ideas!
@ Franck: There actually is a unit for a file field, I now see I have missed to include it tot he readme file. Just rip the one from the demo page.
@ Nate: Great suggestions man, thanks for the regexps too! I will definitely consider your proposals. I am planing an update to Uni-Form but I can’t seem to get to work on it this last few weeks.
@ Matt: Are you talking about the demo page? You should be using the files from the .zip. They don’t refer to any images.
fred on 20/04/07 06:39 PM comments:
i had download uni-form1.1 but i want the same code used on your demo…
can you share it ?
The images on active background are cool…
Dragan Babić on 21/04/07 08:22 AM comments:
@ Fred: Sure, just note that those two CSS files are a bit different, so my advice to you is to use the original CSS from the .zip and copy into it the needed rules for design from the Uni-Form demo.
There are definitely lots of people wanting to reuse that design (which is one thing I don’t get, because I did the design of that page in about 30 minutes). :)