blogfreakz.com » Forms

Make Blinking Neon Forms with CSS3 and jQuery

Keith@Blogfreakz — Mon, 23 Jan 2012 13:12:25 +0000

This cool form effect has the usual attributes we enjoy — rounded corners, stroke edges and other CSS-generated qualities. But thanks to web developer Rakesh Menon, this one’s got another thing up its sleeve: it’s got a glowing neon border that pulsates!

Here’s the demo for you to really appreciate it. Click here for the source files (/zip).

Now let’s start the tutorial with the xHTML to setup the layout.

xHTML

Form Tutorial

If you would rather use Google’s API instead of downloading a copy of jQuery, you can just replace this part of the code “” with the one below:

Once you’ve decided where to get the source for your jQuery, let’s move on to CSS.

CSS

margin:0;

padding:0;

}

textarea, input{

outline:none;

}

body{

background:#3D3D3D;

}

#page-wrap{

width:350px;

min-height:500px;

height:auto;

margin:0 auto;

position:relative;

padding-top:50px;

font:15px Arial;

}

#myform{

width:375px;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

margin:0 auto;

position:relative;

}

#myform label{

top:10px;

position:relative;

color:white;

}

.field{

background:gray;

padding:15px 15px 0 10px;

height:50px;

width:350px;

}

#myform div:first-child{

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

#myform div:last-child{

-moz-border-radius-bottomleft: 8px;

-moz-border-radius-bottomright: 8px;

-webkit-border-bottom-left-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

.area{

padding:15px 15px 0 10px;

min-height:195px;

}

.inputfield{

padding:0 10px 0 10px;

float:right;

width:200px;

font:15px Arial;

border:2px aqua inset;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

}

.textfield{

height:25px;

padding-top:5px;

}

.textarea1{

padding-top:10px;

padding-bottom:10px;

height:150px;

max-height:200px;

max-width:250px;

}

If you take a look at the result at this point you’ll notice that you still have the default look for the submit button. If you want to change it, just copy/paste and add this code in your CSS.

.submitbutton{

border: 0px;

float:right;

width:75px;

height:40px;

font:20px Arial;

position:relative;

top:20px;

right:10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

-webkit-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’); /* IE6,IE7 */

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’)”; /* IE8 */

}

.submitbutton:hover{

background: #3cdfdf;

color:white;

}

The last piece of CSS code below will add the glowing effect to the neon edges of your input boxes. This part (@-webkit-keyframes) by the way, only works in browsers using the Webkit layout engine like Chrome and Safari:

@-webkit-keyframes pulsate {

0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }

25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }

50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }

75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }

100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }

}

.inputfield:focus{

-webkit-animation-name: pulsate;

-webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count: infinite;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

}

And lastly, we’ll work on the jQuery. This part of the tutorial can actually be considered as optional since it simply adds a black background to set off the highlighted input field (see comparison image below).

If you’d like to include it in your design then just copy/paste this code in to your .js file:

$(document).ready(function(){

var globalParent=null;

var mouse_is_inside=false;

/*The snippet below is activated when an inputfield is focused*/

$(‘.inputfield’).focus(function(){

globalParent=$(this).parent(‘div’);

globalParent.click();

});

/*This following part will be activated when the inputfield loses focus*/

$(‘.inputfield’).blur(function(){

globalParent.click();

});

/*Following part will be activated when the user clicks anywhere inside

the container div of the inputfield*/

$(‘.field’).click(function(){

if(!($(this).is(‘.dummy’))){

$(‘.dummy’).css(‘background-color’,'gray’);

$(‘.dummy label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

$(this).css(‘background-color’,'black’);

$(this).children(‘label’).css(‘color’,'#3cdfdf’);

$(this).addClass(‘dummy’);

}

});

/*The following code checks time and again whether the mouse is inside the form or not*/

$(‘form’).hover(function(){

mouse_is_inside=true;

function(){

mouse_is_inside=false;

}

);

/*If user clicks anywhere outside the form, all highlighting is removed*/

$(‘body’).click(function(){

if(!mouse_is_inside)

{

$(‘.field’).css(‘background-color’,'gray’);

$(‘.field label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

}

});

And that concludes this tutorial. Try to run or open your HTML and see if it’ll work on your browser. I personally have only tested it in the latest version of Chrome and IE9, and the blinking effect doesn’t work in IE9. Yet. Still, I hope you enjoy this one!

Incoming search terms for the article:

9 Highly Useful Form & Validation jQuery Plugins

Keith@Blogfreakz — Thu, 12 Jan 2012 08:00:59 +0000

It’s been another very productive year for web designers and developers this past 2011, which was brimming with jQuery plugins. And according to my observation, many of them are content sliders.

So to start off this year, we’ll focus on another particular set of plugins that have made 2011 a bit easier for web developers. This is my list of the Most Helpful New Form & Validation Plugins of 2011, in random order:

1. Recurly.js – This plugin allows you to create secure, PCI compliant transaction forms with fully customizable CSS.

Demo

2. Ideal Forms – This deceptively small framework is used to build powerful and beautiful online forms. It is highly customizable because it’s all CSS, and also supports the latest browser versions.

Demo

3. In-Field Labels – This plugin turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focused and disappear when text entry begins. Clearing a field and leaving brings back the label into view. It supports old browsers (i.e. IE6 and Firefox 2+) though it is worth noting that IE6 requires a background-color be set on the label to match the field background. Also, there’s a minor issue about the autocomplete function, which I suggest you read about in their documentation.

Download1 (@Github), Download2 (.zip)

4. Sisyphus – Just like Gmail, this plugin periodically saves form entries while you’re composing messages. So when your visitors accidentally close the tab or browser while filling out your form, all the changes they made are restored once it’s reopened.

Demo, Download1 (.zip), Download2 (.tar)

5. Smart Validate – This jQuery credit card validation plugin ensures that the user has entered a valid credit card number before making the actual transaction. It supports all major credit cards (American Express, Mastercard, Visa, Discover, Diners Club) but it can also easily be extended to support other credit cards as well.

Demo, Download (.zip)

6. MotionCAPTCHA – Now this is a totally different approach in verifying human interaction. jQuery CAPTCHA is a plugin that requires users to sketch the shape they see in the canvas instead of typing a series of random text in order to submit a form.

Demo

7. Power PWChecker – This is a free jQuery plugin that helps users determine the strength of their password. This plugin can be integrated seamlessly with any online form and it also gives users hints on creating more secure passwords.

Demo

8. DropKick – This extremely light plugin lets you easily create custom dropdown menus. It also degrades gracefully for visitors on older browsers. It even works on IE7 and 8!

Demo, Download (.zip)

9. TagBox Plugin – This jQuery plugin helps the user add tags like input in your forms.

Demo, Download (.zip)

Incoming search terms for the article:

Valid8 – Feature Rich Form Validation Plugin For jQuery

Mufti Ali — Sun, 10 Apr 2011 03:25:46 +0000

Valid8 is form validation plugin for jQuery that features support for three types of validation techniques; Regular expressions, custom javascript functions and Ajax requests. The three techniques can be combined in any way you want. For example, in a very extreme case, you can use two regular expressions, one javascript function and three ajax requests for validating a single input field.

Valid8 ranges from super simple ‘making an input field required’ to an near endless possibility of complexity. To implement Valid8 is pretty simple, for example, calling the valid8 method without any arguments will show the default validation error message ‘Required’ if the input field is left empty. Other example is by calling the valid8 method with a string as an argument will show the string as an a validation error message if the input field is left empty.

Requirements: jQuery Framework
Demo: http://unwrongest.com/projects/valid8/
License: MIT License

Incoming search terms for the article:

Snow – A Slick And Modern Web UI Kit

Mufti Ali — Sat, 02 Apr 2011 06:03:33 +0000

This set of user interface elements was created specifically for light, modern websites and applications. Each of these elements will fit beautifully with subtle textured or solid backgrounds, making your site rich with design elements and beauty.

Each individual element has been hand-crafted with attention to detail for a truly pixel perfect result, and all layers are grouped and organized for ease of use. This UI kit was designed for spyrestudios by MediaLoot.

Website: http://spyrestudios.com/freebies/snow-modern-ui-kit/

Incoming search terms for the article:

jFormer – jQuery Form Framework

Mufti Ali — Sat, 05 Mar 2011 08:29:54 +0000

jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that validate client-side, validate server-side and without changing pages (using AJAX).

Features

Painless form validation
Easily customizable using CSS
User controlled field duplication
Bot prevention (no need for CAPTCHAs)
Users can save and resume forms
Form triggers lock or unlock form fields
One file for form generation and processing
Templates for common forms

At 18K gzipped, jFormer is one of the first frameworks that comes closure compiled with Google’s latest JavaScript compression technology.

Requirements: jQuery Framework
Demo: http://www.jformer.com/
License: MIT , GPL License

Incoming search terms for the article:

Textarea Counter Plugin for jQuery

Mufti Ali — Tue, 28 Dec 2010 04:23:44 +0000

Textarea Counter is plugin for jQuery that allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events. The extra div is displayed under the textarea, which shows the current number of input characters and words.

You can set your own styles and customise the text counter information. You can also easily define the maximum number of characters by maxCharacterSize. If number of characters of user input is over the warning number, the information style will be changed to warning style.

Demo : http://roy-jin.appspot.com/jsp/textareaCounter.jsp
Download : http://roy-jin.appspot.com/jsp/textareaCounter.jsp
License : MIT License

Incoming search terms for the article:

New Form Features in HTML5

Mufti Ali — Sun, 19 Dec 2010 17:14:50 +0000

HTML5 includes many new features to make web forms a lot easier to write, and a lot more powerful and consistent across the Web. Opera is sharing article that gives a brief overview of some of the new form controls and functionalities that have been introduced. The article includes new form controls, new form attributes, new output mechanisms, validation, styling with CSS3, and cross browser compatibility.

To illustrate some of the new features, the article comes with a basic HTML5 forms example. Note: the look and feel of the new form controls and validation messages differs from brower to browser, so styling your forms to look reasonably consistent across browsers will still need careful consideration.

Source: http://dev.opera.com/articles/view/new-form-features-in-HTML5

Incoming search terms for the article:

SheepIt – Clone Form Elements Dynamically With jQuery

Mufti Ali — Sun, 05 Dec 2010 12:48:44 +0000

SheepIt is a jQuery plugin that allows you to clone form elements dynamically. It is very useful to develop advanced forms that require the same type of load data multiple times. In addition, for ease of use, sheepIt added advanced controls that allow the user to modify the form dynamically adding or removing clones.

It has configuration options for cuztomization such as limit the number of forms, form controls, number of initial forms, delete confirmation etc. SheepIt allow us to add multiple forms at the same time, remove the last one and remove all are some of the advanced controls that sheepIt provides.

Requirements: jQuery Framework
Demo: http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&sec=demos
License: MIT License

Incoming search terms for the article:

Vanadium – Simple Yet Powerful Client Side Validation

Mufti Ali — Sun, 05 Dec 2010 12:04:37 +0000

Vanadium is JavaScript validation toolkit that makes client-side validation easy. Validation rules are applied to HTML elements by adding special markup classes. E.g. adding ‘:required’ to element’s classes. Vanadium makes the element being validated against provided value. Instead of markup, one can use external definition provided as json structure. It is Ajax enabled in that sense one can declare particular field being validated by the result of the server response.

E.g. adding ‘:ajax;/path_on_serve/user_exists.json’ to element’s classes will cause any change to value of that element being sent to server as request. The response is expected to be json structure in the form of: {success: (true/false), [message: (MESSAGE_TEXT)], [advice_id: (ID_OF_THE_HTML_ELEMENT_USED_FOR_INJECTING_THE_MESSAGE)]}.

Vanadium is compatible with JQuery 1.3.2 (will be using other JS toolkits as well soon) and have been tested in: Firefox 3.5 (PC/Mac), Safari 2 (Mac), IE 6+, Opera 9 (PC/Mac).

Requirements: jQuery Framework
Demo: http://vanadiumjs.com
License: Free License

Incoming search terms for the article:

h5Validate – HTML5 Form Validation For jQuery

Mufti Ali — Fri, 15 Oct 2010 15:04:52 +0000

h5Validate is jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don’t yet support HTML5. In browsers that do support HTML5, h5Validate adds some much-needed features, such as the ability to customize the user interface when an input fails validation.

This HTML5 form validation is support for various validation rule such as required attribute and pattern attribute. Sometimes, you’ll want to re-use the same validation pattern for several elements on a page.

You could copy and paste the same pattern over and over again to a bunch of different form fields. h5validate offer better solution which is to attach the pattern with a class selector. Use $.h5Validate.addPatterns() to add your pattern, make sure the class Prefix variable is set correctly (it’s h5- by default), and add the class to the input fields.

There are a ton of options you can override by passing key: value pairs when you call .h5Validate(). For example, we can change the CSS class that indicates validation errors.

Requirements: jQuery framework
Demo: http://ericleads.com/h5validate
License: MIT License