Examples Fancy-Fields

Fancy Fields is a jQuery plugin to create Forms with a Custom Look. It is useful for web designers, it can create Checkbox and Radio buttons, Select drop-down lists, text and textarea fields with a nice design that you can style it in CSS.

• To DOWNLOAD this script, click: (470 KB) - version: 1.2.


1. First, to use this plugin, copy the "jqfields" folder with all its files on your server. The script comes with jQuery 1.10.2 ("jquery.js" in "jqfields/" directory).
2. Include these files in the <head> zone of your web page: Fancy-Fields css styles, jQuery library, the Fancy-Fields jQuery plugin.
<script src="jqfields/jquery.js"></script>

<!-- jquery-ui is necessary only if you want to use custom scroll-bar for select drop-down lists -->
<script src="jqfields/jquery-ui.js" type="text/javascript"></script>

<link href="jqfields/fancyfields.css" rel="stylesheet" type="text/css" />
<script src="jqfields/fancyfields-1.2.min.js" type="text/javascript"></script>

"fancyfields.css" is the basic theme. There are also other predefined themes in the "jqfields" folder: "fancyfields2.css", "fancyfields_blue.css", "fancyfields_green.css" ... If you want one of these themes, just replace the "fancyfields.css" whit the name of that file.

3. Then, add the following code to the document ready.
- Every form element in a div with ID "myForm" will be transformed to a styled form element.
If you want to apply Fancy-Fields only to a specified form element, for example to a <select> element, add an ID to that <select> tag and write this code:
You can also create dinamycally select drop-down lists, by using this formula:
// defines an  array of arrays with 2 ["text","value"] values or 1 ["text and value"] value
var listOptions = [["select","0"],["option1", "val1"],["option2", "val2"], ["optionval3"]];

// or change the options of a Select list
• Fancy-Fields has a set of options to work with the custom form fields, to enable /disable form elements, custom scroll bar for select box, get the selected /checked value, and other useful options and events. Details and code examples are in the "Readme.html" file, in the archive with this script.

Examples Fancy-Fields




Select with icons:

Select with custom scroll bar:

Text fields:

• The Fancy fields home page is at: http://www.jqfancyfields.com/

Daily Test with Code Example

Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
Fancy-Fields Custom Forms Look

Last accessed pages

  1. The Rise Of Atlantis (12132)
  2. JavaScript code and PHP (19892)
  3. Insert, Select and Update NULL value in MySQL (25324)
  4. innerHTML in PHP (6400)
  5. Bubbles3 (52204)

Popular pages this month

  1. Flash Games - Free online Games (1930)
  2. Qwop (1474)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1331)
  4. Tunnel Rush (1259)
  5. Drag Racer V3 (979)