Accessible Compact Forms | JavaScriptSource

Accessible Compact Forms

Mike Brittain Dec 22, 2006

General

Tight on space? Use this script to create a compact form that is accessible and works even when JavaScript and CSS are turned off.


Notes

A full explanation of the script can be found here.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: accessibleForms.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(6 comments)

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Dec 4, 2007

How can I put a customer rating type thing on this?

simon Nov 27, 2007

Hi! This is simply superb! This will also help a lot of folks who are fighting their life to creat multipage forms with the likes of PHP etc.! Amazing!![br /][br /]What is the browser compatibility of this? I saw it working stupendously in IE 6...is it cool with opera, firefox and netscape as well?

Bob Jun 10, 2007

I believe it has a title if you hover over it.[p]Very nice code!

M.P. Apr 21, 2007

Nice thinking;[br /]just to add up to this idea; would be great to add a layer popup message when the field is focus()ed so you allways have a label of what type of data is required

Jorge Papadopolo Jan 4, 2007