Over a million developers have joined DZone.

Top 10 CSS3 Forms Tutorials

DZone's Guide to

Top 10 CSS3 Forms Tutorials

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

CSS3 brings to life countless new possibilities to make better web forms. In this article, I have compiled a list of the best 10 tutorials to make great forms using this new and amazing technology.

HTML5 & CSS3 form

HTML5 introduced useful new form elements as such as sliders, numeric spinners and date pickers. This tutorial will show you how to create a form with HTML5, and make it look really cool with CSS3. A great way to get started in both CSS3 and HTML5.
» View tutorial

CSS3 form without images and JavaScript

This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it.
» View tutorial

Stylish Contact Form with HTML5 & CSS3

I really love what British web developer Chris Spooner creates. This time, he’s back with a quality tutorial about creating a form and using CSS3 to style it. The result is, as you can see above, really cool.
» View tutorial

Beautiful CSS3 Search Form

Most search forms (Including the one I use on this site!) looks boring. Using a little CSS3, you can turn the old and boring form into something definitely modern and cool. A must read tutorial.
» View tutorial

Prettier Web Form with CSS 3

This pretty simple tutorial will show you how you can create a form using some basic CSS3 properties, such as box-shadow.
» View tutorial

Slick CSS3 Login Form

Once again, a simple tutorial to create a simple form using CSS3 but absolutely no images.
» View tutorial

Glowform: Amazing CSS3 form

Wow! This form looks really great, isn’t it? This form do not use any images, only CSS3. I urge you to read this tutorial and the form source code, because you’ll learn lots of great techniques about creating killer forms without using images.
» View tutorial

Clean and Stylish CSS3 Form

This form is simple, clean and stylish. Nothing fancy but techniques you’ll may use on most websites you’ll make.
» View tutorial

Signup form with CSS3 and jQuery

jQuery is definitely a great tool to make forms more usable. This tutorial will show you how to create a good looking form using CSS3, and how to make it more user-friendly with some jQuery.
» View tutorial

jQuery & CSS3 Drop-down menu with integrated forms

At last but not least, here is a tutorial about how to create a CSS3/jQuery dropdown menu with integrated forms. No doubt, your clients will love it!
» View tutorial

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}