Blogfreakz - Web Design and Web Development resources » Forms http://blogfreakz.com A site dedicated to keeping up with the latest trends on Web Design Thu, 24 May 2012 01:59:08 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Gravity Registration Form With jQuery http://blogfreakz.com/tutorial/gravity-registration-form-with-jquery/ http://blogfreakz.com/tutorial/gravity-registration-form-with-jquery/#comments Wed, 28 Mar 2012 01:53:32 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26477 Jazz up your online form by adding eye-catching effects to it with  this jQuery tutorial!

Gravity Registration Gravity Registration Form With jQuery

This jQuery code is known as the “Gravity Registration Form” because it shows the next hidden field for the user to fill up by making it drop down below the preceding one. Click on the image above for the demo.

Here’s the JavaScript code:

Contains javascipt code. $(“#email”).keyup(function(){}- email is the ID name of input field. Using $(this).attr(“id”) calling input field value. Fields validating using regular expressions.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"   src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(function()
{
// Displaying first list email field
$("ul li:first").show();
// Regular Expressions
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_email =   /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
// Email validation
$('#email').keyup(function()
{
var email=$(this).val();
if (!ck_email.test(email))
{
$(this).next().show().html("Enter valid email");
}
else
{
$(this).next().hide();
$("li").next("li.username").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});
// Username validation
$('#username').keyup(function()
{
var username=$(this).val();
if (!ck_username.test(username))
{
$(this).next().show().html("Min 3 charts no space");
}
else
{
$(this).next().hide();
$("li").next("li.password").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});
// Password validation
$('#password').keyup(function()
{
var password=$(this).val();
if (!ck_password.test(password))
{
$(this).next().show().html("Min 6 Charts");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});
// Submit button action
$('#submit').click(function()
{
var email=$("#email").val();
var username=$("#username").val();
var password=$("#password").val();
if(ck_email.test(email) && ck_username.test(username)   && ck_password.test(password) )
{
$("#form").show().html("<h1>Thank   you!</h1>");
}
return false;
});
})
</script>

Now here’s the simple HTML code:

<form method="post" >
<ul>
<li>
<label>Email: </label><br/>
<input type="text" name="email"   id="email" />
<span></span>
</li>
<li>
<label>Username: </label><br/>
<input type="text" name="username"   id="username" />
<span></span>
</li>
<li>
<label>Password: </label><br/>
<input type="password" name="password"   id="password" />
<span></span>
</li>
<li>
<input type="submit" value=" Register "   id='submit'/>
</li>
</ul>
</form>

In case you want to put in an additional field, just follow the 2 short steps below:

For example, you want to add “City” in the list of fields you insert this in the HTML code:

<li>
<label>City: </label><br/>
<input type="text" name="city"   id="city" />
<span></span>
</li>

And then go to the JavaScript and replace this:

$("li").next("li.submit") to   $("li").next("li.city")

With this:

// Regular Expression
var ck_city = /^[A-Za-z0-9 -]{3,20}$/;
// City validation
$('#city').keyup(function()
{
var email=$(this).val();
if (!ck_city.test(email))
{
$(this).next().show().html("Enter valid city");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});

And now for the final CSS code, where li {display:none} while page loading jquery displaying first list li:first email field.:

ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900;
font-size:14px;
padding:4px;
width:180px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:350px;
margin:0 auto;
margin-top:30px;
}

Download the full script here (.zip, 30.3KB).

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/gravity-registration-form-with-jquery/feed/ 0 Password Strength Verification with jQuery http://blogfreakz.com/tutorial/password-strength-verification-with-jquery/ http://blogfreakz.com/tutorial/password-strength-verification-with-jquery/#comments Thu, 01 Mar 2012 03:10:22 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=25668 When creating a site with user accounts, you will need enough security to ensure that user passwords are strong and can’t be hacked easily. Factors like length, adding alphanumeric characters, unpredictability and complexity should be considered well.

PW Password Strength Verification with jQuery

Jim Nielsen shares a jQuery and CSS3 tutorial on making a form that will give users live feedback if the password they enter meet the necessary complexity requirements. Click on the image above to launch the tutorial now!

 

 

 

 

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/password-strength-verification-with-jquery/feed/ 0 Make Blinking Neon Forms with CSS3 and jQuery http://blogfreakz.com/tutorial/make-blinking-neon-forms-with-css3-and-jquery/ http://blogfreakz.com/tutorial/make-blinking-neon-forms-with-css3-and-jquery/#comments Mon, 23 Jan 2012 13:12:25 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=24484 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!

114 285x175 Make Blinking Neon Forms with CSS3 and jQuery

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head>

<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />

<title>Form Tutorial</title>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>

<script type=”text/javascript” src=”highlight.js”></script>

</head>

<body>

<div id=”page-wrap”>

<form id=”myform” method=”post” action=”#”>

<div>

<div >

<label for=”personname” >Name</label>

<input name=”personname” type=”text” />

</div>

<div >

<label for=”email” >E-mail</label>

<input name=”email” type=”text” />

</div>

<div >

<label for=”website” >Website</label>

<input name=”website” type=”text” />

</div>

<div >

<label for=”details” >Details</label>

<textarea name=”details” ></textarea>

</div>

</div>

<!–div ></div–>

<input type=”submit” value=”Submit” />

</form>

</div>

</body>

</html>

If you would rather use Google’s API instead of downloading a copy of jQuery, you can just replace this part of the code “<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>” with the one below:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

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).

28 e1327323930229 300x33 Make Blinking Neon Forms with CSS3 and jQuery

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:

]]> http://blogfreakz.com/tutorial/make-blinking-neon-forms-with-css3-and-jquery/feed/ 2 jQuery forms: Best plugins and tutorials for developers http://blogfreakz.com/news/jquery-forms-best-plugins-and-tutorials-for-developers/ http://blogfreakz.com/news/jquery-forms-best-plugins-and-tutorials-for-developers/#comments Mon, 04 Apr 2011 17:20:06 +0000 Mufti Ali http://blogfreakz.com/news/jquery-forms-best-plugins-and-tutorials-for-developers/ On this article our attention focuses on forms, an essential part of any website and how jQuery can be truly resourceful for improving them both in terms of functionality and aesthetic; throughout this post you are about to see some of the most helpful plugins and tutorials that can give you some guide for working with forms.

]]> http://blogfreakz.com/news/jquery-forms-best-plugins-and-tutorials-for-developers/feed/ 0 Snow – A Slick And Modern Web UI Kit http://blogfreakz.com/form/snow-%e2%80%93-a-slick-and-modern-web-ui-kit/ http://blogfreakz.com/form/snow-%e2%80%93-a-slick-and-modern-web-ui-kit/#comments Sat, 02 Apr 2011 06:03:33 +0000 Mufti Ali http://blogfreakz.com/?p=18178 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.

snow ui kit Snow – A Slick And Modern Web UI Kit

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:

]]> http://blogfreakz.com/form/snow-%e2%80%93-a-slick-and-modern-web-ui-kit/feed/ 0 jFormer – jQuery Form Framework http://blogfreakz.com/jquery/jformer-jquery-form-framework/ http://blogfreakz.com/jquery/jformer-jquery-form-framework/#comments Sat, 05 Mar 2011 08:29:54 +0000 Mufti Ali http://blogfreakz.com/?p=17175 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).

jformer 600x250 jFormer – jQuery Form Framework

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:

]]> http://blogfreakz.com/jquery/jformer-jquery-form-framework/feed/ 2 Vintage typewriter: The sexiest jQuery contact form ever http://blogfreakz.com/news/vintage-typewriter-the-sexiest-jquery-contact-form-ever/ http://blogfreakz.com/news/vintage-typewriter-the-sexiest-jquery-contact-form-ever/#comments Wed, 02 Feb 2011 15:02:45 +0000 Mufti Ali http://blogfreakz.com/news/vintage-typewriter-the-sexiest-jquery-contact-form-ever/ A fancy typewriter contact form powered with jQuery, CSS and PHP along with a nice vector illustration

]]> http://blogfreakz.com/news/vintage-typewriter-the-sexiest-jquery-contact-form-ever/feed/ 0 New Form Features in HTML5 http://blogfreakz.com/form/html5-form/ http://blogfreakz.com/form/html5-form/#comments Sun, 19 Dec 2010 17:14:50 +0000 Mufti Ali http://blogfreakz.com/?p=13771 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.

html5 form New Form Features in HTML5

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:

]]> http://blogfreakz.com/form/html5-form/feed/ 0 SheepIt – Clone Form Elements Dynamically With jQuery http://blogfreakz.com/jquery/sheepit-clone-form-dynamically/ http://blogfreakz.com/jquery/sheepit-clone-form-dynamically/#comments Sun, 05 Dec 2010 12:48:44 +0000 Mufti Ali http://blogfreakz.com/?p=13230 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.

sheepit SheepIt Clone Form Elements Dynamically With jQuery

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:

]]> http://blogfreakz.com/jquery/sheepit-clone-form-dynamically/feed/ 0 h5Validate – HTML5 Form Validation For jQuery http://blogfreakz.com/jquery/h5validate-html5-form-validation-for-jquery/ http://blogfreakz.com/jquery/h5validate-html5-form-validation-for-jquery/#comments Fri, 15 Oct 2010 15:04:52 +0000 Mufti Ali http://blogfreakz.com/?p=11377 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.

h5validate h5Validate HTML5 Form Validation For jQuery

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

Incoming search terms for the article:

]]> http://blogfreakz.com/jquery/h5validate-html5-form-validation-for-jquery/feed/ 0