Quick Tip: Make Your Forms Appear More Web 2.0

Anybody who has left a comment on this site recently might have noticed the form for doing so has changed ever so slightly. In line with the recent spate of changes I've made to this site I tweaked the comment form a little. Mainly I made the "body" field bigger, which I've been meaning to do for ages now.

While I was at it I added some padding to the fields. Here's the form before adding padding:


And here's the form with some padding:


It's a subtle change but I hope you agree it has a beneficial effect? To me it just seems much nicer. You wouldn't have the text of the page butted right up next to the edge of the screen would you? Most text deserves a little white-space around it to make it easier to read. Input fields never have any padding though, which seems a shame.

Adding the padding is so simple I'm not even sure I need to say how, but here goes. Add the following to your master stylesheet:

    padding: 2px;
    padding: 5px;

From now on I think I'll make it a part of the global CSS of all sites I work on.


  1. Jake, I like the changes. Just some suggestions:

    - Make text fields (Name, E-mail and Website) wider so that we can see the entire Name while typing.

    - Add <label> to fields, specially to the checkbox.


    • avatar
    • Jake Howlett
    • Wed 13 Aug 2008 04:12 PM

    Hi Marcos. Your wish is my command...

  2. As we're talking about web-dev the following link might help some of us: {Link} (Top 10 CSS Table Designs - Smashing Magazine)

  3. Nice one Jake....Funny how sometimes the simplest tips are the best.

    I read this, and immediately set about adding padding to the thousands of fields I've written over the years.

  4. The padding does make it easier to read. Other Web 2.0 resources you might want to read.

    Web 2.0 is not a design aesthetic


    How to Size Text in CSS by Richard Rutter


    Styling form controls with CSS, revisited


    The Elements of Typographic Style Applied to the Web


    There are a few good links in the Richard Rutter article that are recommend reading. The most important tip I came away with from that article is "the importance of ensuring that the text on your page maintains a 'vertical rhythm'." It really makes the whole site more readable.

Your Comments


About This Page

Written by Jake Howlett on Wed 13 Aug 2008

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content