Re: Bells and whistles for form

[blue642]

I uploaded one version, but quickly decided I’d rather try harder, best way to learn is by doing right?
So here is the new version (v.2 if you will.)

Demo: http://dingledoodle.com/Project1/start.html

Html:

Code:

First Name

What is your First Name?

Last Name

What is your Last Name?

Address

Where should we send your Free Trial package?

Zip

Which zip code do you want us to send your Free Trial package?

City

Type your City here.

Phone

Should we have more questions regarding the shipment, we will contact you.

Email

Should we have more questions regarding the shipment, we will contact you.

The form follows a structure just like the one in the link you posted.
CSS:

Code:

/* Styles */

body {
background: #595959;
color: #ffffff;
font-family: “georgia”, serif;
font-size: 14px;
}

fieldset {
border: none;
padding: 10px;
height: 29px;
overflow: hidden;
position: relative;
}

label {
display: block;
width: 80px;
position: absolute;
left: 70px;
line-height: 29px;

}

input {
height: 29px;
width: 170px;
border: none;
position: absolute;
left: 150px;
line-height: 29px;
font-size: 20px;
font-family: “georgia”, serif;
}

.check {
float: left;
}

.highlight {
background: #00FF7F;
color: #000000;
}

.hint {
position: absolute;
left: 395px;
line-height: 29px;
}

Some positioning to setup the form layout, and allow for the image to be plopped in front. (probably a better way to accomplish this, but it works. (I tested it in Firefox Win/Mac, Safari Mac, and IE Win. In IE it works but it the fields droop when focused, not sure why….)

JQuery:

Code:

$(function (){

$(“.hint”).hide();

$(“input”).focus(function() {
$(this).parent().addClass(“highlight”);
$(“img.check”).remove();
$(this).prev().before(‘‘);
$(this).siblings(“span.hint”).animate({opacity: “show”}, “slow”);
});

$(“input”).blur(function() {
$(“img.check”).remove();
$(this).parent().removeClass(“highlight”);
$(this).siblings(“span.hint”).animate({opacity: “hide”}, “fast”);
});

});

Here’s how it works,

It starts by hiding any hint elements that may be showing (just to be safe.)

It waits for the user to focus on an input field, once found it does the following:

-Adds a "highlight" class to the parent (fieldset in this case)
-removes any lingering check-mark images (just to be safe)
-Adds an image before the label of the input that is focused.
-displays the "hint" via an animation (this could be styled to look like a box, pop-up bubble, sticker, or anything you want really.)

It also checks for a blur event (when the user click out of the focused input) and runs the following:

-removes and lingering check-mark images. (double safe here)
-removes the parent’s "highlight class"
-hides the "hint" span

Also, it degrades much nicer than my previous attempt. (all the way to bare HTML in fact)

Hope I helped, I know I learned something :D .