WebAppers

/ best free open source web resources /

Shopify

Display Editable Form Data As Regular Tabular Data

Posted · Category: Forms, License Free

CSS Globe has shown us a little trick that you can apply to your forms to enhance user experience. We will display editable form data (indented to be edited, updated) as regular tabular data intended for reading.

This works on most modern browsers with pure CSS, but we need a little bit of Javascript in order to make this work on Internet Explorer though, because of the lack of support for :focus pseudo-class.

tabular-form

Requirements: -
Demo: http://cssglobe.com/articles/editable_fields/
License: License Free

2 Comments
  • http://silence.regnareb.com Regnareb

    Great idea !
    And really really better than the full Js way we can see on all the websites.

  • http://www.steinhaug.com/ Kim Steinhaug

    Looks cool, to me as a programmer, but listeing to my user group I am not sure they really like this idea…

    Edit button is becomming more and more deprecated lately, but users seem to enjoy the edit button as they are not that tech – however it could depend on your userbase as I for one like it as it’s cool and interactive!

    Hmm…

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons