Fancy Forms: HTML5 + CSS3 – JS

Posted on May 12, 2010 by Rich Bradshaw

Forms in HTML have typically been pretty boring – input boxes and buttons with all validation performed by javascript. With the new HTML5 Forms module things have become a little more useful. As of May 2010, only bleeding edge browsers support this, Webkit Nightlies, Chrome Dev Channel builds and Opera.

The HTML5 forms module started out as Web Forms 2.0 before moving into HTML5. The focus has been to increase the number of input types and to allow validation of input to happen in the browser, rather than in javascript.

HTML5 Form Demo

In this demo I’ve set up a simple form with a number of different fields, the code should be pretty self explanatory, but there are a couple of new features of interest.

New input types – email, url, number and range
New pseudo classes – :valid, :invalid:, :required
You can’t submit the form until all fields are counted as valid by the browser

I’ve also added a few CSS3 touches to make things a little nicer to look at:

CSS transitions and transformations
:not pseudo class

Things to try

Submit the form without completing it
Notice that the browser checks whether the input is valid
The iPhone offers different keyboards depending on the input type
Check what it looks like in older browsers (fine, but no validation)

The code is commented where interesting, so take a look at the source.

HTML5 Form Demo

56 thoughts on “Fancy Forms: HTML5 + CSS3 – JS”

Paul M. Watson on May 25, 2010 at 9:24 am said:

That is nice, practical, useful stuff, not just flash. Thanks for highlighting it.

Though “even num < 10″ accepts 10. Shouldn’t it accept only up to 8? Smaller than 10, not equal too?
Richard Bradshaw on May 27, 2010 at 10:00 pm said:

Ah, that’s me labelling it wrong, rather than the logic not working. I’ll fix it.
Paul Irish on June 11, 2010 at 2:47 am said:

You can’t inline your formdemo into this post, can you?
Richard Bradshaw on June 20, 2010 at 8:22 am said:

I’ve been meaning to replace the whole blog with a series of flat files instead to enable easier demos. I like the idea that it’s easy for people to view the source without any distractions. On my list of things to do!
Pingback: (번역) 지금 바로 모든 브라우저를 지원하는 HTML5 form 만드는 방법 « 엔지피클~ nzPickles
Pingback: (번역) 지금 바로 cross-browser HTML5 form 만드는 방법 « 엔지피클~ nzPickles
ASIF on August 17, 2010 at 5:16 pm said:

please close Internet explore 6.0 for always
Somnath Banerjee on December 29, 2010 at 8:50 pm said:

Excellent work! Just what I was looking for.

I can see it work on iPhone Emulator.
But the Android emulator is not working (fully).
It does not show the check and cross icons. So validation is not working.

Am I doing something wrong on Android.

I can see it running on both Chrome and Safari.
Ron on February 22, 2011 at 8:06 am said:

hi

first this is great.

i have some question i hope you can help me with.

1- from where comes the tooltip? and how can i change the error messages? i mean i have cleaned the form from all javascript and the tooltip still work but i cannot see from where it comes. are you using some.

2- can we use html 5 and css 3 from now? the form does not really work in FF as in chrome and not to mention IE :(

again this is very creative and effective for user usage.
Ruchir on March 26, 2011 at 1:18 am said:

Where are the source files for this demo? Appreciate if you can point me to them.
Pingback: 10 Awesome HTML5 and CSS3 based Form tutorials | Webdesign ne.ws
Anonymous on May 11, 2011 at 8:25 am said:

I was very pleased to find this site.I wanted to thank you for this great read!!

My Blog : how to impress a girl | how to run faster
John Anthos on May 24, 2011 at 1:40 am said:

Is there any way to add drop down menu’s to the demo. =)
Anonymous on May 25, 2011 at 9:54 am said:

I will come back to read some more.
My Blog : how to make money online | diets that work
Anonymous on May 25, 2011 at 9:54 am said:

I will come back to read some more.
My Blog : how to make money online | diets that work
Pingback: HTML5 and CSS3 Form References, Resources and Tutorials
Pingback: Web Development articles, tutorials, help » Blog Archive » HTML5 and CSS3 Form References, Resources and Tutorials
Pingback: HTML5 and CSS3 Form References, Resources and Tutorials | Content Store
Pingback: HTML5和CSS3表引用，资源和教程 | Q1前端开发
Nanang Gunawan on July 1, 2011 at 12:22 am said:

i can’t use it in IE 7
Dan V on July 11, 2011 at 8:14 am said:

Really nice example of an html 5 form. I have picked up a few tips from this that I will be using soon on my websites.

By adding an ID to each of the inputs will enhance this slightly further. Making the ID the same as the label’s “For”, will make the input focused when the label is clicked.
Pingback: 30 Helpful Tutorials How to Creating HTML5/CSS3 Forms | Pros Global TV
Pingback: HTML5和CSS3表单示例和详细教程 | 百锐网
Pingback: 20+ Best Html5 Forms | Best Wordpress Host
Pingback: HTML5和CSS3表单示例和详细教程 | 托尼 Web前端开发| HTML , CSS & JavaScript
Pingback: 20 Awesome HTML5 Web Forms Tutorials
Zhuweisc on August 10, 2011 at 7:12 am said:

cool dude！:)
Ajinkya on August 17, 2011 at 9:25 am said:

thats cool, good to see html5 will work in IE now… bt only problem is heavy n too many JS files.
Pingback: 基于CSS3技术的强大WEB表单 | HTML5和CSS3
Pingback: 110 Best CSS3 Tutorials and Examples | PriteshGupta.com
PK on September 17, 2011 at 10:10 am said:

Great reading..I have a question though. Why the form is not submitting even if all fields are valid?
Pingback: 分享16个优秀的 CSS3 表单开发教程 | 自由开源分享
Pingback: 一亩三分地 | 分享16个优秀的CSS3表单开发教程
Pingback: 16个优秀的CSS3表单开发教程 » 云暄传媒 — 网站建设工作室 web开发
Yasmeen on September 30, 2011 at 6:03 pm said:

Awesome, thanks
Pingback: CSS3HTML5 » 分享16个优秀的CSS3表单开发教程
Pingback: References, Tutorials and Resources of CSS3 and HTML5 Forms | DesDevWeb
Pingback: 22个实用的HTML5 CSS3表单开发教程 | isir me
Pingback: Blogging Well » Blog Archive » HTML5 and CSS3 Form References, Resources and Tutorials
ZHUEL on November 6, 2011 at 1:13 pm said:

AMUSING
Pingback: 16个优秀的CSS3表单开发教程
Jaydeepm on November 24, 2011 at 12:15 am said:

What does this mean? action=formdemo.php. I dont see any code which handles the submit button. How come the values are shown below with array of values?
Richard Bradshaw on December 10, 2011 at 4:51 pm said:

In my PHP I check for any posted data, then use print_r to put on the screen – super low tech!
sciatic nerve pain on December 24, 2011 at 6:54 pm said:

A very useful post. thanks
Sciatic Nerve on December 24, 2011 at 7:05 pm said:

Check out PhoneGap http://www.phonegap.com/ and Titanium http://www.appcelerator.com/ . They wrap HTML5 apps into native apps for iOS and Android and offer JavaScript access to native features.
sciatic nerve pain on January 20, 2012 at 6:33 am said:

I like your tutorial. Please, keep writing !
Γιακουμεττής Γιώργος on January 29, 2012 at 2:44 am said:

quite excellent:)
Pingback: 17 Best Html Contact Forms - Design Freebies
Pingback: 14 CSS3 Form Tutorial - Design Freebies
Akis on February 29, 2012 at 4:59 pm said:

Hi,

How can I change the error messages?

Interesting Things

Rich Bradshaw's idea of what is interesting

Fancy Forms: HTML5 + CSS3 – JS

56 thoughts on “Fancy Forms: HTML5 + CSS3 – JS”

Leave a Reply Cancel reply