Now Reading
Nice Forms
0

Nice Forms

by Jason GreenNovember 19, 2009

Make your forms look, well nice! This is an easy one, simply include the javascript into your xhtml form and voila! Your forms look neat! Niceforms is fully compatible with most modern browsers: IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+, Mozilla1.5+, Camino1.6+, but NOT IE6. Which, we don’t care about anyway. In IE6 Niceforms will simply not load, reverting back to the original CSS-styled form. Another nice thing is that it doesn’t make use of any existing javascript libraries out there, such as jQuery or Prototype.

Nice Forms used on R4d.US

Nice Forms used on R4d.US

Check it out live on http://r4d.us I recently used Nice forms on my URL shortener, and now Image Host, http://R4D.us It’s slowly coming together nicely, and I think it added a nice touch, don’t you?

You can grab nice forms from here.

Niceforms is magically applied to any form that has the “niceform” class. You can have other classes in there as well but one of them has to be “niceform” in order for the script to work. One to remember is that this script requires a correctly coded form, including properly declared labels and values. There’s not much room for error and, if anything, it will force you to code your forms correctly.

Get your Includes on:

Correctly coded forms look like this:

<form method="post" action="" >
	<fieldset>
 		<dl>
 			<dt><label for="url">URL:</label></dt>
			<dd><input type="text" name="url" value="http://" size="48" tabindex="1" ></dd>
  		</dl>
  		<dl>
  			<dt><label for="keyword">Optional custom keyword:</label></dt>
  			<dd><input type="text" name="keyword" size="20" tabindex="2" ></dd>
  		</dl>
  		<input type="submit" value="Shorten" tabindex="3" >
  	</fieldset>
</form>

And if you want to change some folder locations, find line #10 in niceforms.js and adjust accordingly.
This is also where you would make adjustments when making your own theme…

/*#############################################################
Name: Niceforms
Version: 2.0
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/projects/niceforms/

Feel free to use and modify but please keep this copyright intact.
#################################################################*/

//Theme Variables - edit these to match your theme
var imagesPath = "img/";
var selectRightWidthSimple = 19;
var selectRightWidthScroll = 2;
var selectMaxHeight = 200;
var textareaTopPadding = 10;
var textareaSidePadding = 10;
About The Author
Jason Green
The writer and owner of Green Complex, Jason is an A+ Certified for Computer Hardware egghead and Eagle Scout since 1999 but has been building computers and programming for much longer. An enthusiast to say the least, his hobbies also include photography, video games, and reading. See his proficiencies on Smarterer.

You must log in to post a comment