View demo Download source

Today I want to share a little subtle effect with you: enhancing required fields in a form. Many web forms are designed in a minimal way, i.e. by only collecting the most necessary data from users. Just think of sign up forms where you don’t want to make your potential customer leave because there are just too many things he has to fill out. But there are also many forms where additional information is asked and the user is actually willing to or needs to fill optional fields. You can think of an order form or a classifieds form.

The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but we want to go a step further and create a little interactive effect for a better visualisation of required fields.

For that we will wrap some form labels and inputs with two divisions that will allow us to apply a variety of effect. The outer wrapper will have an additional class if the field is required (af-required):

<form class="af-form" id="af-form" novalidate>

		<div class="af-outer">
			<div class="af-inner">
				<label>Title</label>
				<input type="text" name="title">
			</div>
		</div>

		<div class="af-outer af-required">
			<div class="af-inner">
				<label>Name</label>
				<input type="text" name="fullname" required>
			</div>
		</div>

	<!-- ... -->

</form>

We’ll take a look the style of Demo 2, which will scale down the non-required fields hence make them disappear. For that, we’ll decrease the height of the other wrapper while we scale down the inner one.

We’ll add a transition to the outer wrapper, define a fixed height and set the overflow to hidden because we don’t want the content to be visible when we decrease the height:

.af-outer {
	overflow: hidden;
	height: 70px;
	box-shadow: 0 1px 0 #f5f5f5 inset;
	transition: all 0.5s linear;
}

For the inner wrapper, we’ll set the transform origin to be “center top” so that we can still see it scaling while we decrease the height of the outer one. Initially the scale is set to 1 (you don’t really have to set that):

.af-inner {
	padding: 15px 20px 15px 20px;
	transform-origin: center top;
	transform: scale(1);
	transition: all 0.5s linear;
}

At the top of the form we have a little button (a checkbox) with the id af-showreq and when we check that button, we will scale down the optional fields. We can use the :not pseudo class to get to our desired elements but you could of course give classes to the optional fields instead and access them directly with the general sibling combinator.

So, we’ll decrease the height of the outer wrappers and scale down and fade out the inner ones:

#af-showreq:checked ~ .af-form .af-outer:not(.af-required) {
	height: 0px;
	visibility: hidden;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
	transform: scale(0);
	opacity: 0;
}

Setting visibility to hidden will guarantee that we can tab through the resting fields without passing through the other ones. Here we can’t use display: none because otherwise our transition won’t work.

Hope you enjoyed this tip!

View demo Download source

View demo Download source

In this tutorial we are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target. We will style it using CSS3 and an icon font. The idea behind this demo is to show the user the login form and provide a link to “switch” to the registration form.

Note that this is for demo purpose only, it will only work in browser supporting the :target pseudo class, and you should not use this code on a live website without providing solid fallback.

In the following, we will be going through Demo 1.

The HTML

In the HTML, we will put both forms, hiding the second one with CSS. Here is the code, I’ll explain some of the interesting parts later.

<div id="container_demo" >
	<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
	<a class="hiddenanchor" id="toregister"></a>
	<a class="hiddenanchor" id="tologin"></a>
	<div id="wrapper">
		<div id="login" class="animate form">
			<form  action="mysuperscript.php" autocomplete="on">
				<h1>Log in</h1>
				<p>
					<label for="username" class="uname" data-icon="u" > Your email or username </label>
					<input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
				</p>
				<p>
					<label for="password" class="youpasswd" data-icon="p"> Your password </label>
					<input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
				</p>
				<p class="keeplogin">
					<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
					<label for="loginkeeping">Keep me logged in</label>
				</p>
				<p class="login button">
					<input type="submit" value="Login" />
				</p>
				<p class="change_link">
					Not a member yet ?
					<a href="#toregister" class="to_register">Join us</a>
				</p>
			</form>
		</div>

		<div id="register" class="animate form">
			<form  action="mysuperscript.php" autocomplete="on">
				<h1> Sign up </h1>
				<p>
					<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
					<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
				</p>
				<p>
					<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
					<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/>
				</p>
				<p>
					<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
					<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
				</p>
				<p>
					<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
					<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
				</p>
				<p class="signin button">
					<input type="submit" value="Sign up"/>
				</p>
				<p class="change_link">
					Already a member ?
					<a href="#tologin" class="to_register"> Go and log in </a>
				</p>
			</form>
		</div>

	</div>
</div>

We’ve added some HTML5 goodness here and used some of the new inputs. The input type=password automatically hides what the user is typing and replaces it with dots (depending on browser). The input type=email enables the browser to check if what the user entered has the format of a valid email address. We’ve also used the require=required attribute; browsers that support this attribute will not let the user submit the form until this field is filled, no JavaScript required.
The autocomplete=on attribute will prefill values based on earlier user input. We also used some nice placeholders for the inputs that will show some guiding value when the input is not filled.

Now the two tricky parts. You might have noticed the two <a href> links at the top of the form. This is a little trick that will make our form behave nicely when playing with anchors, so that it won’t “jump” on long pages when we click on the switching link and trigger the :target pseudo-class.

The second little trick is related to the use of the icon font. We will be using a data-attribute to display the icons. By setting data-icon=”icon_character” with the according character in the HTML we will just need one CSS attribute selector to style all the icons. Read more about this technique on 24 Ways: Displaying Icons with Fonts and Data- Attributes.

The CSS

For the clearness of the code in this tutorial, I will omit all the vendor prefixes, but you will, of course, find them in the files. Once again, I’m using some pretty advanced CSS3 tricks that might not work in all browsers. Let’s get started.

Styling both forms using CSS3

First, let’s give our two forms some general styling for the container.

#subscribe,
#login{
	position: absolute;
	top: 0px;
	width: 88%;
	padding: 18px 6% 60px 6%;
	margin: 0 0 35px 0;
	background: rgb(247, 247, 247);
	border: 1px solid rgba(147, 184, 189,0.8);
	box-shadow:
		0pt 2px 5px rgba(105, 108, 109,  0.7),
		0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	border-radius: 5px;
}
#login{
	z-index: 22;
}

We’ve added a nice box shadow that’s made of two shadows: an inset one to create the inner blue glow, and an outside shadow. We’ll explain the z-index in a bit.

In the following we will style the header with some background clipping:

/**** general text styling ****/
#wrapper h1{
	font-size: 48px;
	color: rgb(6, 106, 117);
	padding: 2px 0 10px 0;
	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 30px;
}

/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
	background:
	-webkit-repeating-linear-gradient(-45deg,
		rgb(18, 83, 93) ,
		rgb(18, 83, 93) 20px,
		rgb(64, 111, 118) 20px,
		rgb(64, 111, 118) 40px,
		rgb(18, 83, 93) 40px);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

#wrapper h1:after{
	content:' ';
	display:block;
	width:100%;
	height:2px;
	margin-top:10px;
	background:
		linear-gradient(left,
			rgba(147,184,189,0) 0%,
			rgba(147,184,189,0.8) 20%,
			rgba(147,184,189,1) 53%,
			rgba(147,184,189,0.8) 79%,
			rgba(147,184,189,0) 100%);
}

Note that at this moment only webkit browsers support background-clip: text, so we will create a stripped background only for webkit here, and clip it to the text to add the stripes to the H1 title. Since the background-clip: text property currently only works in Webkit browsers, I decided to go only with the webkit prefix. That’s the reason why I split the CSS declaration into two parts, and use a webkit prefixed gradient only. Only using the –webkit- prefix is bad practice, it’s only for demo purpose, and you should never do this on real a website! That’s also where the -webkit-text-fill-color: transparent comes in handy: it enables us to only have a transparent background on the webkit browsers, all the other ones will ignore it and give us the provided text color fallback.

We also created a fading line under the title with the help of the :after pseudo-class. We use a 2px height gradient and fade the background to 0 opacity at both ends.

Now let’s style our inputs and give them a nicer look.

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
	color: rgb(190, 188, 188);
	font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
	color: rgb(190, 188, 188);
	font-style: italic;
}
input {
  outline: none;
}

First we style the inputs, and remove the outline. But be careful here; the outline helps the user know which input is focused, so if you remove it, you should provide some :active and :focus states for the inputs.

/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
	width: 92%;
	margin-top: 4px;
	padding: 10px 5px 10px 32px;
	border: 1px solid rgb(178, 178, 178);
	box-sizing : content-box;
	border-radius: 3px;
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

Here we used the :not pseudo class, to style all inputs, except the checkbox. I provided a :focus and :active state, since I decided to remove the outline.

And now the fun part: the icon font. Since we can’t use :before and :after pseudo classes on inputs, we’ll have to cheat a little bit: we’ll add the icon to the label, and then place it in the input. I’m using the fontomas library which puts together some nice icons. You can rearrange them to set the icon to a specific letter.  Remember the data-icon attribute? It’s where you should put the letter. I used data-icon=’u’ for user, ‘e’ for email, ‘p’ for password.  Once I chose the letters, I downloaded the font, and used the fontsquirrel font generator to transform it into a @font-face compatible format.

@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** the magic icon trick ! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
	width: 30px;
}

Yeah, that’s it folks, you don’t need to have a class for each icon. We used content: attr(data-icon) to retrieve the letter from the data-icon attribute, so we only have to declare the font, choose a nice color and position it.

Now let’s style the submit button for both forms.

/*styling both submit buttons */
#wrapper p.button input{
	width: 30%;
	cursor: pointer;
	background: rgb(61, 157, 179);
	padding: 8px 5px;
	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 24px;
	border: 1px solid rgb(28, 108, 122);
	margin-bottom: 10px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	box-shadow:
		0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
		0px 0px 0px 3px rgb(254, 254, 254),
		0px 5px 3px 3px rgb(210, 210, 210);
	transition: all 0.2s linear;
}
#wrapper p.button input:hover{
	background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
	background: rgb(40, 137, 154);
	position: relative;
	top: 1px;
	border: 1px solid rgb(12, 76, 87);
	box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
	text-align: right;
	margin: 5px 0;
}

The trick here is to use the box-shadow in order to create some extra borders. You can only use one border, but as many box-shadows as you want. We will use the length value to create a “fake” second white border, 3px wide, with no blur.

Then we’ll style the checkbox, nothing very special here:

/* styling the checkbox "keep me logged in"*/
.keeplogin{
	margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
	display: inline-block;
	font-size: 12px;
	font-style: italic;
}
.keeplogin input#loginkeeping{
	margin-right: 5px;
}
.keeplogin label{
	width: 80%;
}

We will style the bottom of the form using repeating linear gradients to create a striped background.

p.change_link{
	position: absolute;
	color: rgb(127, 124, 124);
	left: 0px;
	height: 20px;
	width: 440px;
	padding: 17px 30px 20px 30px;
	font-size: 16px	;
	text-align: right;
	border-top: 1px solid rgb(219, 229, 232);
	border-radius: 0 0  5px 5px;
	background: rgb(225, 234, 235);
	background: repeating-linear-gradient(-45deg,
	rgb(247, 247, 247) ,
	rgb(247, 247, 247) 15px,
	rgb(225, 234, 235) 15px,
	rgb(225, 234, 235) 30px,
	rgb(247, 247, 247) 30px
	);
}
#wrapper p.change_link a {
	display: inline-block;
	font-weight: bold;
	background: rgb(247, 248, 241);
	padding: 2px 6px;
	color: rgb(29, 162, 193);
	margin-left: 10px;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid rgb(203, 213, 214);
	transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
	color: rgb(57, 191, 215);
	background: rgb(247, 247, 247);
	border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
	position: relative;
	top: 1px;
}

Now you’ll notice that we’ve got two nice forms, but we really want only one to show at a time. So now is time for some animations!!

Creating the switching animation

The first thing to do is to hide the second form by setting the opacity to 0:

#register{
	z-index: 21;
	opacity: 0;
}

Remember that our login form had a z-index of 22? We will give the second form a z-index of 21, to put it “under” the login form.

And now the really good part: switching the forms using the :target pseudo class. What you really have to understand about :target, is that we will use anchors to make the transition. The normal behavior of an anchor link, is to jump to the target in the page. But we don’t want to jump anywhere, we only want to switch the forms. And here comes our trick using the two links at the top of the page. Instead of directly linking to the second form, and risking getting a “jumping” effect, we actually put the two links at the top of the page and give them display: none. This will avoid any page jump. Credit where credit’s due: I found this trick on CSS3 create (in French).

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
	z-index: 22;
	animation-name: fadeInLeft;
	animation-delay: .1s;
}

So this is what happens: when we click on the Join us button, we trigger the #toregister. We then do the animation, by using the sibling selector ~ to find our #register element. We use an animation called fadeInLeft. Since we “hide” the form using zero opacity, we will use an animation that fades in, to make it appear. We’ve also changed the z-index, to make it appear on top of the other form.
The same happens for the other form.

And here is the code for the animation. We are using the CSS3 animation framework from Dan Eden and adapted it for this tutorial.

.animate{
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

The form that is “disappearing” will have another animation which will make it fade out to the left:

#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
	animation-name: fadeOutLeftBig;
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-20px);
	}
}

You can now use other animations from Dan Eden’s animate.css: just adjust your .animate class and replace the animation names. You will also find some custom animations at the end of the animate-custom.css file.

Well, that’s it folks. I hope you enjoyed the tutorial!

Please note, that in some browsers background-clip: text is not supported. In Internet Explorer 9 the transitions and animations don’t work, so there will be no fancy form switching. In Internet Explorer 8 and below the :target pseudo-class is not supported, so it won’t work at all (you’ll just see the login form).

Demos

1. Slide to left and fade
2. Slide to the left
3. Scale up/down

View demo Download source

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

Source

http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/

Demo

http://webexpedition18.com/download/signup_form_WebExpedition18/

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

We will ensure that the form switch works as well when JavaScript is disabled in which case we will simply jump to the other’s form page.

So, let’s begin by creating and styling the three forms.

The Markup

We will create three different forms, a login form, a registration form and a password reminder form with just one input field. They will all have different sizes and numbers of inputs.

First, we will create a wrapper for all three forms.

<div id="form_wrapper" class="form_wrapper">
<!-- We will add our forms here -->
</div>

Then we will add each form element to the wrapper and insert the necessary input fields. Each form is going to have a heading and a bottom box with the submit button. The registration form, which will be our first form, will have two columns that will float next to each other:

<form class="register">
	<h3>Register</h3>
	<div class="column">
		<div>
			<label>First Name:</label>
			<input type="text" />
		</div>
		<div>
			<label>Last Name:</label>
			<input type="text" />
		</div>
		<div>
			<label>Website:</label>
			<input type="text" value="http://"/>
		</div>
	</div>
	<div class="column">
		<div>
			<label>Username:</label>
			<input type="text"/>
		</div>
		<div>
			<label>Email:</label>
			<input type="text" />
		</div>
		<div>
			<label>Password:</label>
			<input type="password" />
		</div>
	</div>
	<div class="bottom">
		<div class="remember">
			<input type="checkbox" />
		</div>
		<input type="submit" value="Register" />
		<a href="index.html" rel="login" class="linkform">
			You have an account already? Log in here
		</a>
		<div class="clear"></div>
	</div>
</form>

Now we will add the login form. This form is going to be the one shown when the user visits the site. That’s why we will give it another special class “active”:

<form class="login active">
	<h3>Login</h3>
	<div>
		<label>Username:</label>
		<input type="text" />
	</div>
	<div>
		<label>Password:
			<a href="forgot_password.html" rel="forgot_password" class="forgot linkform">
				Forgot your password?
			</a>
		</label>
		<input type="password" />
	</div>
	<div class="bottom">
		<div class="remember"><input type="checkbox" />
			<span>Keep me logged in</span>
		</div>
		<input type="submit" value="Login"></input>
		<a href="register.html" rel="register" class="linkform">
			You don't have an account yet? Register here
		</a>
		<div class="clear"></div>
	</div>
</form>

And finally, we will add the password reminder form:

<form class="forgot_password">
	<h3>Forgot Password</h3>
	<div>
		<label>Username or Email:</label>
		<input type="text" />
	</div>
	<div class="bottom">
		<input type="submit" value="Send reminder"></input>
		<a href="index.html" rel="login" class="linkform">
			Suddenly remebered? Log in here
		</a>
		<a href="register.html" rel="register" class="linkform">
			You don't have an account? Register here
		</a>
		<div class="clear"></div>
	</div>
</form>

The link elements that point to another form will all share the class “linkform” and in order for us to know which form to show when a user clicks the link, we will add the reference into the “rel” attribute. For example, the link “You don’t have an account? Register here” will have a rel attribute value of “register” since we want to show the registration form when we click on the link.

As you might have noticed, the “href” attribute will point to the static HTML page with the respective form. The link from the previous example will point to the index.html which contains our login form. This link will come into use, when JavaScript is disabled.

Now, let’s spice these forms up using some neat CSS3 properties.

The CSS

Let’s start with the form wrapper. We will give it a white background color, which will be the color we see, when the form is switching:

.form_wrapper{
	background:#fff;
	border:1px solid #ddd;
	margin:0 auto;
	width:350px;
	font-size:16px;
	-moz-box-shadow:1px 1px 7px #ccc;
	-webkit-box-shadow:1px 1px 7px #ccc;
	box-shadow:1px 1px 7px #ccc;
}

The heading of each form will have the following style:

.form_wrapper h3{
	padding:20px 30px 20px 30px;
	background-color:#444;
	color:#fff;
	font-size:25px;
	border-bottom:1px solid #ddd;
}

We want the forms not be displayed initially, but we will add a class that tells us that the form is active and should be visible:

.form_wrapper form{
	display:none;
	background:#fff;
}
form.active{
	display:block;
}

We will define now the width for each form. In our JavaScript function we will animate the form wrapper to the respective dimension:

form.login{
	width:350px;
}
form.register{
	width:550px;
}
form.forgot_password{
	width:300px;
}

The columns in the registration form will be floating next to each other:

.form_wrapper .column{
	width:47%;
	float:left;
}

The links in all our forms will have the following style:

.form_wrapper a{
	text-decoration:none;
	color:#777;
	font-size:12px;
}
.form_wrapper a:hover{
	color:#000;
}

Label elements have an inline style by default. We want our labels to be block elements:

.form_wrapper label{
	display:block;
	padding:10px 30px 0px 30px;
	margin:10px 0px 0px 0px;
}

We will style the inputs with some nice CSS3 properties, giving them a gradient as background and some neat box shadow:

.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
	border: solid 1px #E5E5E5;
	margin: 5px 30px 0px 30px;
	padding: 9px;
	display:block;
	font-size:16px;
	width:76%;
	background: #FFFFFF;
	background:
		-webkit-gradient(
			linear,
			left top,
			left 25,
			from(#FFFFFF),
			color-stop(4%, #EEEEEE),
			to(#FFFFFF)
		);
	background:
		-moz-linear-gradient(
			top,
			#FFFFFF,
			#EEEEEE 1px,
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
	background:#feffef;
}

The bottom part of each form will be similar to the heading background:

.form_wrapper .bottom{
	background-color:#444;
	border-top:1px solid #ddd;
	margin-top:20px;
	clear:both;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}

The link elements will have the following style:

.form_wrapper .bottom a{
	display:block;
	clear:both;
	padding:10px 30px;
	text-align:right;
	color:#ffa800;
	text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
	float:right;
	font-style:italic;
	line-height:24px;
	color:#ffa800;
	text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
	color:#000;
}

We will make the wrapper for the remember me checkbox float:

.form_wrapper div.remember{
	float:left;
	width:140px;
	margin:20px 0px 20px 30px;
	font-size:11px;
}
.form_wrapper div.remember input{
	float:left;
	margin:2px 5px 0px 0px;
}

The submit button will have a very subtle inset shadow, nothing special:

.form_wrapper input[type="submit"] {
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding: 8px 0 9px;
	text-align: center;
	width: 150px;
	cursor:pointer;
	float:right;
	margin:15px 20px 10px 10px;
	text-shadow: 0 1px 0px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
	background: #d9d9d9;
	-moz-box-shadow: 0px 0px 2px #eaeaea inset;
	-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	box-shadow: 0px 0px 2px #eaeaea inset;
	color: #222;
}

And that’s all the style! Let’s add some Rock’n Roll with jQuery!

The JavaScript

The idea is to animate to the size of the new form and to switch to it, i.e. show it. So, first we will cache some elements:

//the form wrapper (includes all forms)
var $form_wrapper	= $('#form_wrapper'),

//the current form is the one with class "active"
$currentForm	= $form_wrapper.children('form.active'),

//the switch form links
$linkform		= $form_wrapper.find('.linkform');

We’ll get the width and height of each form to store it for later when we want to animate to it:

$form_wrapper.children('form').each(function(i){
	var $theForm	= $(this);
	//solve the inline display none problem when using fadeIn/fadeOut
	if(!$theForm.hasClass('active'))
		$theForm.hide();
	$theForm.data({
		width	: $theForm.width(),
		height	: $theForm.height()
	});
});

Now, we will call the function that sets the dimension of the wrapper to the one of the current form:

setWrapperWidth();

When we click a “switch link”, we want to hide the current form, since we know that we’ll switch to another one. We’ll animate the form wrapper’s width and height to the width and height of the new form. After the animation is done, we show the new form:

$linkform.bind('click',function(e){
	var $link	= $(this);
	var target	= $link.attr('rel');
	$currentForm.fadeOut(400,function(){
		//remove class "active" from current form
		$currentForm.removeClass('active');
		//new current form
		$currentForm= $form_wrapper.children('form.'+target);
		//animate the wrapper
		$form_wrapper.stop()
					 .animate({
						width	: $currentForm.data('width') + 'px',
						height	: $currentForm.data('height') + 'px'
					 },500,function(){
						//new form gets class "active"
						$currentForm.addClass('active');
						//show the new form
						$currentForm.fadeIn(400);
					 });
	});
	e.preventDefault();
});

The function that sets the width to the wrapper simply sets its css properties. We want to ensure that the wrapper has the right width and height set when we load the page.

function setWrapperWidth(){
	$form_wrapper.css({
		width	: $currentForm.data('width') + 'px',
		height	: $currentForm.data('height') + 'px'
	});
}

For the demo we disabled the submit buttons. If you use them, you will need to check which form is being submitted and give the class “active” to the form you want to switch to, i.e. show:

$form_wrapper.find('input[type="submit"]')
			 .click(function(e){
				e.preventDefault();
			 });

And that’s it! We really hope you enjoyed the tutorial and find it useful!

View demoDownload source

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.

Features

• Configuration options
  Limit the number of forms, Form controls customizable, number of initial forms, delete confirmation etc.
• Advanced controls
  Add multiple forms at the same time, remove the last one and remove all are some of the advanced controls that sheepIt provides.
• Web designers friendly
  SheepIt use the same template that the designer can see in your editor, easy to upgrade the design.
• Data injection
  Thanks to inject method () API, sheepIt lets you load an array of data to the entire form, to an embedded clone form or to a specific clone.
  The method will perform all operations necessary to load the information provided, taking into account the existing clones and configurations.
• Callback functions
  The callBack functions used to run custom codes before or after you add a clone to the form.
  So, for example, to set validation to forms cloned.
• Nested forms
  A person has multiple addresses and an address may have multiple phones.
  Nested forms can handle such complex situations.
• Pre-generated forms
  SheepIt can identify pre-generated clones at the html code and integrate them so as to handle them like the rest.
  This is very useful to interact with form frameworks as used in Symfony for PHP.
• API to control the form from Javascript
  The plugin exposes a number of methods for controlling the form using Javascript in the same way that the user controls in your browser.

Source

http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&sec=home

Demo

http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&sec=demos

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

So let’s start!

The Markup

The HTML will consist of a wrapper container where we will place a form with fieldsets. Each fieldset will be a step in our sliding form:

<h1>Fancy Sliding Form with jQuery</h1>
<div id="wrapper">
	<div id="steps">
		<form id="formElem" name="formElem" action="" method="post">
			<fieldset class="step">
				<legend>Account</legend>
				<p>
					<label for="username">User name</label>
					<input id="username" name="username" />
				</p>
				<p>
					<label for="email">Email</label>
					<input id="email" name="email" type="email" />
				</p>
				<p>
					<label for="password">Password</label>
					<input id="password" name="password" type="password" />
				</p>
			</fieldset>
			<fieldset>
			...
			</fieldset>
		</form>
	</div>
	<div id="navigation" style="display:none;">
		<ul>
			<li class="selected">
				<a href="#">Account</a>
			</li>
			<li>
				<a href="#">Personal Details</a>
			</li>
			<li>
				<a href="#">Payment</a>
			</li>
			<li>
				<a href="#">Settings</a>
			</li>
			<li>
				<a href="#">Confirm</a>
			</li>
		</ul>
	</div>
</div>

The navigation with all the links to the steps will be an unordered list that is initially hidden. We will show it in our JavaScript function.
Let’s look at the style.

The CSS

The main wrapper and the steps container will have the following style:

#wrapper{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    background-color:#f9f9f9;
    width:600px;
    overflow:hidden;
}
#steps{
    width:600px;
    overflow:hidden;
}
.step{
    float:left;
    width:600px;
}

The class step will be given to each fieldset. Let’s style the navigation:

#navigation{
    height:45px;
    background-color:#e9e9e9;
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
#navigation ul{
    list-style:none;
	float:left;
	margin-left:22px;
}
#navigation ul li{
	float:left;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
	margin:0px 2px;
}

The single link elements will have a neat CSS3 gradient as background:

#navigation ul li a{
    display:block;
    height:45px;
    background-color:#444;
    color:#777;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    line-height:45px;
    padding:0px 20px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#f0f0f0;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.09, rgb(240,240,240)),
        color-stop(0.55, rgb(227,227,227)),
        color-stop(0.78, rgb(240,240,240))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(240,240,240) 9%,
        rgb(227,227,227) 55%,
        rgb(240,240,240) 78%
        )
}
#navigation ul li a:hover,
#navigation ul li.selected a{
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

When a step get’s validated, we will either add a span indicating that everything is fine, or a span that shows that something is wrong in the form step:

span.checked{
    background:transparent url(../images/checked.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
span.error{
    background:transparent url(../images/error.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}

The styles for the form elements look as follows:

#steps form fieldset{
    border:none;
    padding-bottom:20px;
}
#steps form legend{
    text-align:left;
    background-color:#f0f0f0;
    color:#666;
    font-size:24px;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
    float:left;
    width:590px;
    padding:5px 0px 5px 10px;
    margin:10px 0px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
}
#steps form p{
    float:left;
    clear:both;
    margin:5px 0px;
    background-color:#f4f4f4;
    border:1px solid #fff;
    width:400px;
    padding:10px;
    margin-left:100px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
    width:160px;
    float:left;
    text-align:right;
    margin-right:15px;
    line-height:26px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    background: #ffffff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 5px;
    width: 200px;
    float:left;
}
#steps form input:focus{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background-color:#FFFEEF;
}
#steps form p.submit{
    background:none;
    border:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
#steps form button {
	border:none;
	outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}
#steps form button:hover {
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

And now, let’s add some JavaScript magic!

The JavaScript

In our function we will first take care of the display of the slider. For that we need to calculate the width of the elements inside. We will also take care of the sliding when we tab through the inputs. When the user hits tab when he is in the last input of a fieldset, we make the next fieldset slide into place and focus on the first field.

The validation of the form is based on all inputs being required fields. If we slide to the next fieldset and did not fill out all the inputs of the previous one, we will mark the missing inputs with a red background and add our little error span to the navigation item. If everything was fine, we will add the span with the check mark so that the user knows, the step was correct. We will not allow the user to submit the form if one of the steps contains errors.

$(function() {
	/*
	number of fieldsets
	*/
	var fieldsetCount = $('#formElem').children().length;

	/*
	current position of fieldset / navigation link
	*/
	var current 	= 1;

	/*
	sum and save the widths of each one of the fieldsets
	set the final sum as the total width of the steps element
	*/
	var stepsWidth	= 0;
    var widths 		= new Array();
	$('#steps .step').each(function(i){
        var $step 		= $(this);
		widths[i]  		= stepsWidth;
        stepsWidth	 	+= $step.width();
    });
	$('#steps').width(stepsWidth);

	/*
	to avoid problems in IE, focus the first input of the form
	*/
	$('#formElem').children(':first').find(':input:first').focus();	

	/*
	show the navigation bar
	*/
	$('#navigation').show();

	/*
	when clicking on a navigation link
	the form slides to the corresponding fieldset
	*/
    $('#navigation a').bind('click',function(e){
		var $this	= $(this);
		var prev	= current;
		$this.closest('ul').find('li').removeClass('selected');
        $this.parent().addClass('selected');
		/*
		we store the position of the link
		in the current variable
		*/
		current = $this.parent().index() + 1;
		/*
		animate / slide to the next or to the corresponding
		fieldset. The order of the links in the navigation
		is the order of the fieldsets.
		Also, after sliding, we trigger the focus on the first
		input element of the new fieldset
		If we clicked on the last link (confirmation), then we validate
		all the fieldsets, otherwise we validate the previous one
		before the form slided
		*/
        $('#steps').stop().animate({
            marginLeft: '-' + widths[current-1] + 'px'
        },500,function(){
			if(current == fieldsetCount)
				validateSteps();
			else
				validateStep(prev);
			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
		});
        e.preventDefault();
    });

	/*
	clicking on the tab (on the last input of each fieldset), makes the form
	slide to the next step
	*/
	$('#formElem > fieldset').each(function(){
		var $fieldset = $(this);
		$fieldset.children(':last').find(':input').keydown(function(e){
			if (e.which == 9){
				$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
				/* force the blur for validation */
				$(this).blur();
				e.preventDefault();
			}
		});
	});

	/*
	validates errors on all the fieldsets
	records if the form has errors in $('#formElem').data()
	*/
	function validateSteps(){
		var FormErrors = false;
		for(var i = 1; i < fieldsetCount; ++i){
			var error = validateStep(i);
			if(error == -1)
				FormErrors = true;
		}
		$('#formElem').data('errors',FormErrors);
	}

	/*
	validates one fieldset
	and returns -1 if errors found, or 1 if not
	*/
	function validateStep(step){
		if(step == fieldsetCount) return;

		var error = 1;
		var hasError = false;
		$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
			var $this 		= $(this);
			var valueLength = jQuery.trim($this.val()).length;

			if(valueLength == ''){
				hasError = true;
				$this.css('background-color','#FFEDEF');
			}
			else
				$this.css('background-color','#FFFFFF');
		});
		var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
		$link.parent().find('.error,.checked').remove();

		var valclass = 'checked';
		if(hasError){
			error = -1;
			valclass = 'error';
		}
		$('<span class="'+valclass+'"></span>').insertAfter($link);

		return error;
	}

	/*
	if there are errors don't allow the user to submit
	*/
	$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Please correct the errors in the Form');
			return false;
		}
	});
});

And that’s it! I hope you liked the sliding form idea!

View demoDownload source

Simple jQuery progress bar on form to show characters length with input limiter functionality. Demo available with downloads.

Source

http://www.99points.info/2010/04/create-jquery-form-with-progress-bar-and-input-limiter/

Demo

http://demos.99points.info/jquery_form_progress/

Here is a pretty complete registration form, nicely juiced up with some neat CSS.

Here you can see a DEMO

Download the ZIP file from here: CSS Registration ZIP

Enjoy it!

For your design, what would you do better? Do you think being a top site gives you trend setter status? Or should some sites rather be ashamed of their poor design skills?

Share your opinion and maybe you have some interesting showcases to add?

I hope you enjoy it!

1. Google

http://www.google.com

Well, Google is Google, so fancy design is never a really big topic. It definitely follows major usability guidelines which is also shown here: http://www.boxesandarrows.com/view/getting-a-forms98

2. Facebook

http://www.facebook.com

Flawless in functionality, I would say. I don’t know about the positioning of some elements, like the “Remember me” checkbox…

3. Youtube

http://www.youtube.com

Now, what I don’t really get, are these changes of style within Google. YouTube belongs to Google and the design of this registration form clearly shows this. But why not use the same style through all the pages?

4. Twitter

http://www.twitter.com

Although Twitter is one of my personal favorites, it could still need some more consistency. Using rounded input boxes in one place, and then plain old inputs in another place, makes it look a little bit inconsitent.

5. Wikipedia

http://www.wikipedia.org

The strong focus on content is also reflected in the design of Wikipedia’s login and registration form: it is plain and simple.

6. Windows Live

http://www.live.com

Again, an example of inconsistent design. Why not use the same kind of buttons and the same sizes for inputs?

7. MySpace

http://www.myspace.com

A clean design, that I would tweak only in the alignment of the labels in the registration…

8. WordPress

http://www.wordpress.com

It might seem, that there is a lot of different styling happening here, but actually it all somehow fits together: the color choices, the sizes and the “special effects”.

9. Ebay

http://www.ebay.com

Ebay’s form design is a nice example of optimizing design for usability. Elements are used consistently throughout the site. Here is a really great article on the main changes that happened and why: http://www.digital-web.com/articles/redesigning_ebay_registration/

10. Amazon

http://www.amazon.com

A very clean design. What I never liked though, was this “let’s spare” login form that also serves as an entry for a new user to register. I mean, if I want to login, I am a registered user and have a password, right?

11. AOL

http://www.aol.com

Sometimes, I feel like, I am back in 1999… That “Forgot Password” seems like the designer went “oh, damn, I forgot to add Forgot Password to the login” …

12. LinkedIn

http://www.linkedin.com

Functional, clean but definitely not an award winning design.

13. Yahoo

http://www.yahoo.com

Old school form but functional and clean.

14. HI5

http://hi5.com

Another example of completely inconsistent design: the colors, the buttons, the framing…

15. Craigslist

http://www.craigslist.com

Very strange (almost styleless) form design, but it somehow fits to Craigslist.

16. International Movie Database

http://www.imdb.com

Besides fitting to the 1994 style of the whole page, it really is a disaster! For God’s sake, get a web designer…

17. Photobucket

http://www.photobucket.com

Not the creme de la creme: colors, sizes, hello?

18. CNET

http://www.cnet.com

This is what I call consistency! A pair that goes along and reflects the overall design of the page.

19. Adobe

http://www.adobe.com

Good that most members are indeed returning.  It’s clean and the user has a good overview…it’s Adobe that did Photoshop right? :-O

20. ESPN

http://www.espn.com

Ok, I know the error messages have to appear somewhere, but is it necessary to have such huge spaces between the inputs? I mean, the spaces are bigger than the inputs! And I really think this combination of “select with one style” and “normal input with another” doesn’t go together… Why not having the same border for all of them?

21. Skyrock

http://www.skyrock.com

Nice registration form. Just the login looks like from another site (planet)…

22. Tumblr

http://www.tumblr.com

Now, this is fun: big form, simple input and beautiful design. I just wanna sign up!

23. LiveJournal

http://www.livejournal.com

Clean, yes. Functional, yes. Ehm, what happened to the password field? Is it always “shorter” than the username or is it just another case of “damn, I knew I forgot something in this from”…the LOGIN BUTTON!

24. deviantART

http://www.deviantart.com

It’s a nice set of colors although it could use a little bit more contrast. And if it’s just allowed to put 20 characters in the input, e.g. for the name, why giving it double the size then? Oh, and by the way, the email can be 255 characters long!

25. Tagged

http://www.tagged.com

Pure CSS! But there is a lot more you can do with CSS, you know…like creating nice shadows on the buttons with borders…

26. NETLOG

http://www.netlog.com

Nice one, but the position of the register buttons seems weird…

27. Digg

http://www.digg.com

I like Digg’s forms, I really do. But you know guys, at least for Firefox you could give the select the same style like to the input: “border: 1px solid #ccc”… looks sooo much better!

28. The New York Times

http://www.nytimes.com

Old fashioned but fitting. But why not adapting the other inputs to the select?

29. Ning

http://www.ning.com

Now, I must admit: this is definitely my personal favorite – almost impecable. Just, you know, Firefox, select, borders…

30. Answers

http://www.answers.com/

Compact and consistent. Really nice job.

31. Maktoob

http://www.maktoob.com

Nice one.

32. Metacafe

http://www.metacafe.com

A lot of blue going on here, but it still fits.

33. Sourceforge

http://sourceforge.net/

Not really consistent and I would suggest using “display: block” in the registration, gives a less “stairs” like effect…

34. eHow

http://www.ehow.com

I love this registration form, it’s beautiful, but the login doesn’t really look finished. What’s with that “SIGN IN” position?

35. StumbleUpon

http://www.stumbleupon.com

I think, it needs some more development.

36. Reddit

http://www.reddit.com

Simple and really neat… fit’s perfectly.

37. delicious

http://www.delicious.com

Very nice one, too.

38. Technorati

http://technorati.com

Very elaborated and stylish… but still functional and user friendly.

39. Habbo

http://www.habbo.com

Habbo-like!

40. Friendster

http://www.friendster.com

So, “Keep me logged in” is like what? Compulsory? Ah no, after all it’s not recommended for shared computers… But a nice registration form.

41. Flixter

http://www.flixter.com

Clean and consistent. But 8 captcha letters? Come on!

42. Paypal

http://www.paypal.com

Not really a nice login. What’s with that “I am a tube” background anyway?

Enjoy!

Click on the image to see the demo of the page:

Click on the image to see a DEMO

The CSS code has a lot of CSS3 elements and this form will only work in browsers that have support for CSS3 (which IE of course has not):

form.registration{
 width:600px;
 float:left;
 color:#818181;
 background: #f1f1f1 url(pen.png) no-repeat top right;
 border: 2px solid #ccc;
 padding:10px;
 font-family: Georgia;
 font-size: 14px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
}

The form will have rounded borders and a box shadow which looks very intriguing by using rgba values. Next, we define how the fieldset should be positioned:

form.registration fieldset{
  border-top:1px solid #ccc;
  border-left:0;
  border-bottom:0;
  border-right:0;
  padding:6px;
  margin:0px 30px 0px 0px;
}

The legend will give a name to the fieldset and we want it to have a less intense color:

form.registration legend{
  text-align:left;
  color:#ccc;
  font-size:18px;
  padding:0px 4px 0px 4px;
  margin-left:20px;
}

Now, let’s define the rest of the form:

form.registration label{
  font-size: 32px;
  width:200px;
  float: left;
  text-align: right;
  color:#999;
  clear:left;
  margin:4px 4px 0px 0px;
  padding:0px;
}
form.registration input{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  width:300px;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:32px;
  padding:3px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
form.registration input:focus, form.registration select:focus{
  background-color:#E0E6FF;
}
form.registration select{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:40px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

And now, let’t define some style for the CSS3 button:

.button, .button:visited{
  float:right;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 5px 10px 5px 5px;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  padding: 10px 15px;
  background-color: #00abdf;
  display: inline-block;
  -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.button:hover{
  background-color: #777;
}

The html code looks as follows:

<form>
 <fieldset>
 <legend>About you</legend>
 <label>First name</label>
 <input type="text" maxlength="100" value=""/>           
 <label>Last name</label>
 <input type="text" maxlength="100" value=""/>                                  
 <label>Birthdate</label>
 <select>
 <option value="1">1</option>
 <option value="2">2</option>                             
 </select>
 <select>                               
 <option value="1">January</option>
 <option value="2">February</option>
 </select>
 <select>                           
 <option value="2009">2009</option>
 <option value="2008">2008</option>              
 </select>          
 </fieldset>
 <fieldset>
 <legend>Account details</legend>
 <label>E-Mail</label>
 <input type="text" maxlength="120" value=""/>
 <label>Password</label>
 <input type="password" maxlength="20"/>                                          
 </fieldset>
 <fieldset>   
 <a>Register</a>  
 </fieldset>   
</form>

Enjoy!