designing modern web forms with html 5 and css3 » legendthemes.pdf

LegendThemes.com

HomeOur ThemesAboutSupportContact

Our Blog.

Themes, Design, News, WordPress.

10 Apr. '10Written by Nathan Barry Posted in Design, Resources

Designing Modern Web Forms with HTML 5 and CSS3Recently I noticed that many web developers are still using HTML tables to layout their forms. Mainly it is becausepeople stick with what they know, and have never taken the time to learn a better way. Once you learn to layout formswith standards compliant CSS it is actually quite easy!

View Demo Download Code

We will be using HTML5 and CSS3 to achieve great style and functionality without causing problems in less capablebrowsers. To be clear, this code will not look exactly the same in every browser. We are designing for the most advancedbrowsers, then making sure it still degrades gracefully.

Starting with the right markup.

Here we are using HTML 5 to code the form. Take a look:

01 02 Create an Account03 04 05 06 07 Name08 09 10 11 12 Phone Number13 14 15 16 17 Email18

Designing Modern Web Forms with HTML 5 and CSS3 LegendTheme... http://legendthemes.com/2010/04/10/designing-modern-web-forms-with...

1 of 14 01/08/2013 1:24 PM

Note the input types. Instead of only using the usual name and password I also added tel and email. Mostbrowsers dont render anything different here, but it makes a big difference for the user experience on Safari mobile(iPhone and iPad). The key difference is a rearranged keyboard to focus on the type of input. Email adds the @ sign aswell as a . button. Also the auto-correct changes so it doesnt try to split domain names into multiple words.

It looks like a minor difference but it is very frustrating to enter an email address into a text input on the iPhone. Yourusers will thank you for paying attention to the details.

Older browsers that dont understand HTML 5 forms will just fall back to input type=text. Which is just fine for ourpurposes. Also each field has class of text so that I can style them with the CSS input.text selector. Even though theyarent all text fields, I do want them to look the same. You could use CSS3 selectors instead, but getting that to work in IEis beyond the scope of this article.

19 20 21 22 Password23 24 25 26 27 28 I agree to the Terms and Conditions and Privacy

Policy29 30 31 32 33 Register34 35 36 37 38


2 of 14 01/08/2013 1:24 PM

Adding basic styling.

Now to style our form. We are going to start with a very simple reset. Please use something more appropriate to yourproject.

Now to style the form container.

1 /* Add whatever you need to your CSS reset */2 html, body, h1, form, fieldset, input {3 margin: 0;4 padding: 0;5 border: none;6 }7 8 body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }

01 #registration {02 color: #fff;03 background: #2d2d2d;04 background: -webkit-gradient(05 linear,06 left bottom,07 left top,08 color-stop(0, rgb(60,60,60)),09 color-stop(0.74, rgb(43,43,43)),10 color-stop(1, rgb(60,60,60))11 );12 background: -moz-linear-gradient(13 center bottom,14 rgb(60,60,60) 0%,15 rgb(43,43,43) 74%,16 rgb(60,60,60) 100%17 );18 -moz-border-radius: 10px;19 -webkit-border-radius: 10px;20 border-radius: 10px;21 margin: 10px;22 width: 430px;23 }24


3 of 14 01/08/2013 1:24 PM

Here we are using CSS3 gradients to set the background of the container. We are using three different backgrounddeclarations to accommodate different browsers. First we set a background color of #2d2d2d that all browsers willunderstand, then we overwrite it for -webkit and -moz to use background gradients instead. Since Internet Explorerdoesnt understand gradients it will ignore them and use the solid color specified first.

You can use this website to generate your own CSS gradients.

Then for the rounded corners we are adding -webkit-border-radius, then -moz-border-radius for the browsers that supportit, then adding standard border-radius for when the official spec is adopted in the future (hopefully by IE9).

For the links we are adding a default color, then more importantly adding text-shadow (not supported in IE). The syntaxfor the text-shadow is this:

So we are using that to add a black vertical shadow that gives the text an indented look.

Styling the Input Fields

25 #registration a {26 color: #8c910b;27 text-shadow: 0px -1px 0px #000;28 }29 30 #registration fieldset {31 padding: 20px;32 }

1 text-shadow: x y blur color;

1 text-shadow: 0px -1px 0px #000;

01 input.text {02 -webkit-border-radius: 15px;03 -moz-border-radius: 15px;04 border-radius: 15px;05 border:solid 1px #444;06 font-size: 14px;07 width: 90%;08 padding: 7px 8px 7px 8px;09 background: #ddd;10 background: -moz-linear-gradient(11 center bottom,12 rgb(225,225,225) 0%,


4 of 14 01/08/2013 1:24 PM

Here we are adding background gradients again, remember to specify the default for older browsers. The rounded cornersalso give the fields a nice pill shape.

The new part is that we used a box-shadow to give it a recessed look. The syntax is the same for box-shadow as it is fortext-shadow. So box-shadow: 0px 1px 0px #777; is a light colored shadow, with no blur, that is down 1px. This combinedwith a dark stroke gives it the look below.

Adding Icons.

Next we will add icons to each field so that it is more easily identified at a glance. With CSS3 we are able to use multiplebackgrounds to have both a gradient and an image. First create a sprite image of all your icons combined into one file.

13 rgb(215,215,215) 54%,14 rgb(173,173,173) 100%15 );16 background: -webkit-gradient(17 linear,18 left bottom,19 left top,20 color-stop(0, rgb(225,225,225)),21 color-stop(0.54, rgb(215,215,215)),22 color-stop(1, rgb(173,173,173))23 );24 color:#333;25 text-shadow:0px 1px 0px #FFF;26 -moz-box-shadow: 0px 1px 0px #777;27 -webkit-box-shadow: 0px 1px 0px #777;28 box-shadow: 0px 1px 0px #777;29 }


5 of 14 01/08/2013 1:24 PM

This will decrease HTTP requests, simplify your markup, and improve page load. An example of the icons I used are onthe right.

You will want to replace the earlier code for the input field backgrounds with this new code.

We are able to add multiple backgrounds by separating each one with a comma. To accommodate the new icons we willalso need to change the right padding to 30px.

Then specify the background position for each field individually so that it will display the correct icon. The exact valueswill depend on the icons that you use. Note that the order of the icons in the sprite does not have to match the order of theinput fields.

Here the first background-position is for the browsers that dont support multiple background images, the second is forthe gradient position on the browsers that do support it.

01 background: #ddd url('img/inputSprite.png') no-repeat 4px 6px;02 background: url('img/inputSprite.png') no-repeat 4px 6px, -moz-linear-gradient(03 center bottom,04 rgb(225,225,225) 0%,05 rgb(215,215,215) 54%,06 rgb(173,173,173) 100%07 );08 background: url('img/inputSprite.png') no-repeat 4px 6px, -webkit-gradient(09 linear,10 left bottom,11 left top,12 color-stop(0, rgb(225,225,225)),13 color-stop(0.54, rgb(215,215,215)),14 color-stop(1, rgb(173,173,173))15 );

1 padding: 7px 8px 7px 30px;

01 input#email {02 background-position: 4px 5px;03 background-position: 4px 5px, 0px 0px;04 }05 input#password {06 background-position: 4px -20px;07 background-position: 4px -20px, 0px 0px;08 }09 input#name {10 background-position: 4px -46px;11 background-position: 4px -46px, 0px 0px;12 }13 input#tel {14 background-position: 4px -76px;15 background-position: 4px -76px, 0px 0px;16 }


6 of 14 01/08/2013 1:24 PM

Styling the Header & Submit Button

Using a bottom border and a box shadow we are able to create an indented separating linewithout any additional markup.

For the submit button we will use an sprite that has 3 states for :link, :hover, and :active.

You can then use different background positions to shift the image up for each state. This keeps your HTTP requests to aminimum and also prevents a flicker while the browser loads an image for the :hover state.

01 #registration h2 {02 color: #fff;03 text-shadow: 0px -1px 0px #000;04 text-align: center;05 padding: 18px;06 margin: 0px;07 font-weight: normal;08 font-size: 24px;09 font-family: Lucida Grande, Helvetica, Arial, sans-serif;10 border-bottom: solid #181818 1px;11 -moz-box-shadow: 0px 1px 0px #3a3a3a;12 -webkit-box-shadow: 0px 1px 0px #3a3a3a;13 box-shadow: 0px 1px 0px #3a3a3a;14 }

01 #registerNew {02 width: 203px;03 height: 40px;04 border: none;


7 of 14 01/08/2013 1:24 PM

Moving Labels Inline with jQuery.To further style the forms I want to move the label inside the field itself. This technique is largely based on the work fromTrevor Davis at Viget Labs.

05 text-indent: -9999px;06 background: url('img/createAccountButton.png') no-repeat;07 cursor: pointer;08 float: right;09 }10 #registerNew:hover { background-position: 0px -41px; }11 #registerNew:active { background-position: 0px -82px; }

01 02 03 $(document).ready(function() {04 /*05 * In-Field Label jQuery Plugin06 * http://fuelyourcoding.com/scripts/infield.html07 *08 * Copyright (c) 2009 Doug Neiner09 * Dual licensed under the MIT and GPL licenses.10 * Uses the same license as jQuery, see:11 * http://docs.jquery.com/License12 *13 * @version 0.114 */15 (function($) { $.InFieldLabels = function(label, field, options) { var base =

this; base.$label = $(label); base.$field = $(field);base.$label.data("InFieldLabels", base); base.showing = true; base.init =function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions,options); base.$label.css('position', 'absolute'); var fieldPosition =base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top':fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() !=


8 of 14 01/08/2013 1:24 PM

The line $(#RegisterUserForm label).inFieldLabels(); is what activates the script for those particular labels. Makesure to change the ID if yours is different. I modified the script to add support for the input types tel and email. If youchoose to use others you will need to write those in (near the end of the script).

We are also adding a class of .infield to the labels that need to be restyled. This way if JavaScript is disabled the form willdegrade gracefully. Here is the necessary CSS:

"") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() {base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true);}).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e);}).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange',function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if(base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity= function(opacity) { base.$label.stop().animate({ opacity: opacity },base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty= function(blur) { if (base.$field.val() == "") { base.prepForShow();base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else {base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) {base.$label.css({ opacity: 0.0 }).show();base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); });}; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode ==9)) return; if (base.showing) { base.$label.hide(); base.showing = false; };base.$field.unbind('keydown.infieldlabel'); }; base.init(); };$.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300,labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { returnthis.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return;var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr +"[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" +for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0)return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);

16 17 $("#RegisterUserForm label").inFieldLabels();18 });19 20

1 fieldset label.infield /* .infield label added by JS */ {2 color: #333;3 text-shadow: 0px 1px 0px #fff;4 position: absolute;5 text-align: left;6 top: 3px !important;7 left: 35px !important;8 line-height: 29px;9 }


9 of 14 01/08/2013 1:24 PM

Sometimes the browser auto-complete can interfere with the inline form fields (especially on login boxes). If this is anissue for your site then you can add autocomplete=off to the input fields.

Note: We could have used the HTML5 Placeholder attribute instead, but this method works better in older browsers andalso I like how it looks better.

How it looks in Internet Explorer

Because we designed first for modern browsers, certain less capable browsers will not be able to display the form in itsbest possible look. Here is what IE users will see:

Not as pretty, but everything still functions perfectly.


10 of 14 01/08/2013 1:24 PM

Thats all!

Please ask any questions and give feedback in the comments.

View Demo Download Code

If you enjoyed this post you should read my personal blog or subscribe to the iOS Design WeeklyNewsletter.

-Nathan Barry

Snapshot Theme PreviewA New Level of Precision

7 Responses to Designing Modern Web Forms with HTML 5 and CSS3

Christopher says:July 1, 2010

Hi, I have used the script and found that it does not work. In the action field of the form I put inmailto:[email protected] but nothing has happened.

Any ideas?

Christopher

Reply

Nathan Barry says:July 1, 2010

This tutorial only covers the markup, design and infield labels. If you want to actually post the form then youneed server-side code, which is beyond the scope of this tutorial. You will want to look into doing that withPHP or whatever other language you are working in.

Michael Story says:January 27, 2011

Hi Christopher,

Here is a link to a contact form php file that you could use in form.

1.


11 of 14 01/08/2013 1:24 PM

Love this tutorial Nathan!

Michael Story says:January 27, 2011

http://css-tricks.com/nice-and-simple-contact-form/

Reply

2.

Edison Leon says:August 1, 2011

Great tutorial, thanks for sharing

Reply

3.

colin says:April 13, 2012

Pretty form, but serves no purpose without functionality. Whilst youve said its outside the scope of this tutorial,you could have easily included a functional snippet that users could copy paste into the form to make it actually dosomething. Otherwise were left with a pretty CSS/HTML5 gimmick with no purpose.

Reply

4.

Prashant says:April 22, 2012

Great Tutorial, Loved the way u have explained new input types and how great they are in terms of accessibility.

Reply

5.

Leave a Reply


12 of 14 01/08/2013 1:24 PM

Name

Email

Website

Pages

HomeOur ThemesAboutSupportContact

Categories

BasicsBloggingDesignFunctionInterviewsNewsPluginsQuick TipsResourcesThemes

Archives

September 2010August 2010June 2010May 2010April 2010March 2010February 2010January 2010May 2009April 2009January 2009October 2008

Meta


13 of 14 01/08/2013 1:24 PM

Log inWordPress

Copyright 2011 Legend Themes. A Legend innovation.


14 of 14 01/08/2013 1:24 PM

designing modern web forms with html 5 and css3 » legendthemes.pdf

Documents