posted on:December 21, 2009

UX trick display form data as tabular data


This is a little trick that you can apply to your forms to enhance user experience. We’ll display editable form data (indented to be edited, updated) as regular tabular data intended for reading.

We’re using pure CSS for this one… Actually we WOULD use pure CSS if it wasn’t for IE7’s lack of support for :focus pseudo-class. 🙁

Take a look at the demo

Overview

This trick can be useful when you have, let’s say, a profile page where your users can view and edit the data on the same page.
When users first open the page they see values for various options. You need to make sure that the data as readable as possible so we want to avoid the usual form elements styling. You’ll agree that reading content inside input fields is somewhat difficult.
This is what you’d want them to have:

By adding a small icon, it becomes obvious that the data is editable.

When user clicks on the form element, the usual styling is applied.

The Markup

We’re using regular form markup, nothing extra special there. I am using the class name editable for the form element.

<form id="" action="/" method="post" class="editable"> 
	
<fieldset>
<legend>Personal Information</legend>


 <div>
<label for="name">Full Name</label> 
<input name="name" id="name" size="30" class="field" type="text" value="Alen Grakalic" />
</div>
<div>
<label for="email">Email</label>
<input name="email" id="email" size="30" class="field" type="text" value="youremail@email.com" />
</div> 
<div>
<label for="web">Website</label>
<input name="web" id="web" size="30" class="field" type="text" value="http://cssglobe.com" />
</div> 
<div>
<label for="twitter">Twitter URL</label>
<input name="twitter" id="twitter" size="30" class="field" type="text" value="http://twitter.com/cssglobe" />
</div> 
</fieldset>

<div class="submit"><button type="submit">Edit</button></div> 

</form>

The Styling

We need to style two states for the form fields. Regular, non-acitve state and the state when form element is clicked on (focus state). First we’ll actually define how input field looks like when focused. The reason we’re styling this first is because this look will guide us to style element’s regular appearance. 

.editable .field:focus{
	border:2px solid #dfdfdf;
	padding:5px;
	background:#fff url(bg_input.gif) repeat-x;
	width:300px;
	line-height:1em;
	margin:0;
	outline:none;
}

What we do next is style element’s on focus appearance. We’re removing background colors and borders (increasing the width if needed) and adding a small background icon so it’s obvious that the element is editable. You noticed that for "on focus" style I put 2px wide border and set padding to 5px. When user focuses on the form element we don’t want any vertical shifting so we need to make sure that the height of both states of the element is the same. So, for default style we are setting vertical padding to 7px and removing the border all together.

.editable .field{
	border:none;
	background:transparent url(ico_edit.gif) no-repeat 0 50%;
	padding:7px 0 7px 20px;
	width:300px;
	line-height:1em;
	margin:0;
	font-weight:bold;
}

Damn IE

IE7 and IE6 don’t suppot :focus pseudo-class. You’ll agree that users with those browsers should really update their software or make a switch to something better.

Just in case you are into providing everyone with same user experience (as you should really) here’s a jQuery code that’ll help.

$(document).ready(function(){	
	$('.editable .field').focus(function() {
		$(this).addClass('focused');
	}).blur(function(){
		$(this).removeClass('focused');
	});
});

In addition to that you need to add one more selector to "focused" definition – .editable .focused:

.editable .field:focus, .editable .focused{
	border:2px solid #dfdfdf;
	padding:5px;
	background:#fff url(bg_input.gif) repeat-x;
	width:300px;
	line-height:1em;
	margin:0;
	outline:none;
}

Take a look at the demo

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (19 Comments)

  1. Hidayat Sagita
    December 21, 2009

    Very great tricks! I love it :D

  2. vic
    December 21, 2009

    when we are editing, to prevent submit form disable press enter, i want press enter for confirm my modifications

  3. Adam
    December 21, 2009

    Hi. Thanks for this very elegant example, and for the equally elegant explanation. One small nit that I observed in Firefox 3.5.6 on my Win XP machine: The mouse cursor does not seem to turn into a pointing hand when you point at the small pencil icons.

  4. shawnna
    December 21, 2009

    Awesome.. Great Collection. I totally love it. Am inspired, i go to try these for my works. W/ lots of love and Kiss. Shawnna

  5. edu
    December 22, 2009

    Nice Form! Perhaps it could be improved by marking somehow the fields in which the user has edited the content in any way. pace!

  6. Mark Shingleton
    December 23, 2009

    That's a nice concept Alen. Thanks for sharing.

  7. Martin LeBlanc
    December 23, 2009

    Looking nice and user friendly at the same time - good job!

  8. Chad Tomkiss
    December 23, 2009

    Alen, Great post. I would add cursor: pointer to .editable .field just to make it a bit more obvious that its clickable :) Kind regards, Chad

  9. Miguel625
    December 23, 2009

    personally I think it would be better to keep the boxes visible imo, never overestimate the intelligence of your users. The pencil makes nothing obvious, maybe better would be something like a lighter gray border without the inner-shadow the on focus you can add the thicker border and shadow. This is actually almost a anti-ux idea, there is nothing about this that makes a user's experience better, is it pretty? yes if styled well. Does it require a user to think about how it works? Well yes, and that makes for a bad UX not a good one. Great idea in terms of design idea that wows. Personally it would be cooler to have just one pencil, on maybe the fieldset background that when clicked activates the boxes on all fields within the set. Really cool looking.

  10. Maverick
    December 23, 2009

    that's quite a nice idea. looks good and works well. well done.

  11. cssglobe
    December 23, 2009

    @Miguel625: This trick was indented for those kind of pages where reading (scanning) the data has a greater value then editing it. So editing is a secondary action. I believe that edit icon makes things obvious. Many applications have only icons to communicate with users.

  12. Kai Chan Vong
    December 23, 2009

    Hey, I was reading an article about using HTML5 and using javaScript was one solution: document.createElement('myelement'); and thought to myself this could be done also... and so far have found this: http://www.xs4all.nl/~peterned/csshover.html Sadly not a one liner and relient on clientside scripting being enabled, but an alternative none the less to use jS to improve IE.

  13. PSDgator
    December 23, 2009

    do you think it's easy to integrate this form style & functionality to Easy Framework? I could love to see a Post about it.

  14. Enrique Ramírez Vélez
    December 24, 2009

    Lovely trick! The one thing I'd change is the cursor to a pointer when the user hovers over an input and it's not on :focus.

  15. paul
    December 28, 2009

    The tip is good. An information becomes more readable as well as presentable when it is organized in this way

  16. tansuk
    December 31, 2009

    that's quite a nice idea.

  17. Rifki Jones
    December 31, 2009

    A nice idea and user friendly, which is always a good thing Rifki

  18. Ravindra
    January 6, 2010

    its very cool!! site

  19. TK Pandey
    January 7, 2010

    Thanks for this very elegant example, and for the equally elegant explanation. The css code is much important for me as i am using it in my one of the site pages.

Sorry, the comment form is closed at this time.