Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
24 Dec

Display Editable Form Data As Regular Tabular Data

  • Forms, License Free
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Makes IE Capable of Rendering CSS3 Decoration Features

Makes IE Capable of Rendering CSS3 Decoration Features

Impressive and Beautiful CSS Styling Mootools Calendar

Impressive and Beautiful CSS Styling Mootools Calendar

Create Stacked Images with CSS3 Pseudo-Elements

Create Stacked Images with CSS3 Pseudo-Elements

fValidator Validate input data in HTML forms with iMask

fValidator Validate input data in HTML forms with iMask

Windows Internet Explorer 8 for Web Developers

Windows Internet Explorer 8 for Web Developers

CSS3 Selectors: Structural Pseudo-Classes Part 1

CSS3 Selectors: Structural Pseudo-Classes Part 1

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…

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • Free Responsive HTML5 + CSS3 Site Templates
  • 35 Creative Twitter Covers for Web Designers
  • FROONT: Responsive Web Design in the Visual Way
  • Designing Experiences for Responsive Web Sites
  • jQuery Unveil: The Lightweight Version of Lazy Load
  • What are HTML5 Datalists and When to Use Them
  • Easy Responsive Tabs jQuery Plugin for Web & Mobile
  • jQuery.Swatches Turns Div into a Sweet Color Swatch
  • Pure: A Set of Small & Responsive CSS Modules
  • Create Sexy Android-like UI with Fries
Sponsors
Plugins
  • Advertisement15
  • Calendar48
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour17
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup50
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons27
  • Color Schemes25
  • Fonts47
  • Forms115
  • Icons110
  • Patterns24
  • PS Tutorials17
  • Stock Photos21
  • Tables25
Others
  • Announcement104
  • Best Collections6
  • Code57
  • eCommerce25
  • Framework217
  • Hosting13
  • Information244
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools302
  • Webmail14
Licesnes
  • BSD License69
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free749
  • MIT License422
Sponsors
Advertise Here
Partners
MaxCDN