All Content Management Systems: Web Progress Report

February 7th, 2008

No more tables in forms!

The news that Phillip posted on 01/25/08 shows that there are many, many improvements in the works for Exponent soon.  Don't miss reading his post.  There's so much there!

I'm trying out the new Exponent and will be writing here to tell you the news.  Today I want to point out one more feature for that release which is near and dear to me - the Exponent Forms subsystem no longer uses tables!!!

Remember this default contact module?

Contact Form made with tables, up to Exponent 0.96.6

Remember trying to style it or any other form in Exponent? Of course. We're still doing it. But, 0.97 will change that.

Here is the new default view for the contact module:

Contact form for Exponent 0.97

And here is a piece of the code for the default view:

<div id="nameControl" class="control">   <label><span class="label">Your Name</span>   <input type="text" id="name" name="name" value="" size="30" /></label> </div> <br /> <div id="emailControl" class="control">   <label>     <span class="label">Your Email Address</span>     <input type="text" id="email" name="email" value="" size="30" />   </label> </div>

Looking at the code you will see that we will have easy control over how our forms, labels, inputs, buttons look.  Information is in <div>s, with <id>s and classes giving us very specific control about style.

Do you want the labels to be next to the input areas rather than on top? Change your css, add:

span.label { float: left; padding-right: 1em; }

And voilà!!!

Labels on Left of fields

You want the labels and the inputs to be centered, with the labels text right justified?  Yes, change your css.

span.label { float: left; padding-right: 1em; width: 28%; text-align: right; }

Labels and Inputs centered

I have gotten carried away with this topic.  It is, like I said before, near and dear to me.  Next time I'll try to give you news, rather than a tutorial... ;-)

I'm looking forward to the 0.97 release and I'm sure that if you are all reading the news here, you will also be happy to see it happen soon.

Related CMS news:

  •