Designing Modern Web Forms With HTML 5 and CSS3 LegendThemes PDF

Designing Modern Web Forms with HTML 5 and CSS3 LegendTheme...
http://legendthemes.com/2010/04/10/designing-modern-web-forms-with...
LegendThemes.com Home Our Themes About Support Contact Our Blog. Themes, Design, News, WordPress.
10 Apr. '10 Written by Nathan Barry Posted in Design, Resources
Designing Modern Web Forms with HTML 5 and CSS3

Recently I noticed that many web developers are still using HTML tables to layout their forms. Mainly it is because people stick with what they know, and have never taken the time to learn a better way. Once you learn to layout forms with 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 capable browsers. To be clear, this code will not look exactly the same in every browser. We are designing for the most advanced browsers, 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 <div id="registration"> 02 <h2>Create an Account</h2> 03 04 <form id="RegisterUserForm" action="" method="post"> 05 <fieldset> 06 <p> 07 <label for="name">Name</label> 08 <input id="name" name="name" type="text" class="text" value="" /> 09 </p> 10 11 <p> 12 <label for="tel">Phone Number</label> 13 <input id="tel" name="tel" type="tel" class="text" value="" /> 14 </p> 15 16 <p> 17 <label for="email">Email</label> 18 <input id="email" name="email" type="email" class="text" value="" />
1 of 14
01/08/2013 1:24 PM
<p><input id="acceptTerms" name="acceptTerms" type="checkbox" /> <label for="acceptTerms"> I agree to the <a href="">Terms and Conditions</a> and <a href="">Privacy Policy</a> 29 </label> 30 </p> 31 32 <p> 33 <button id="registerNew" type="submit">Register</button> 34 </p> 35 </fieldset> 36 37 </form> 38 </div> Note the input types. Instead of only using the usual name and password I also added tel and email. Most browsers 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 as well as a . button. Also the auto-correct changes so it doesnt try to split domain names into multiple words.
19 20 21 22 23 24 25 26 27 28
</p> <p> <label for="password">Password</label> <input id="password" name="password" class="text" type="password" /> </p>
It looks like a minor difference but it is very frustrating to enter an email address into a text input on the iPhone. Your users 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 our purposes. Also each field has class of text so that I can style them with the CSS input.text selector. Even though they arent all text fields, I do want them to look the same. You could use CSS3 selectors instead, but getting that to work in IE is beyond the scope of this article.
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 your project. 1 /* Add whatever you need to your CSS reset */ 2 html, body, h1, form, fieldset, input { 3 margin: 0; 4 padding: 0; border: none; 5 6 } 7 8 body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } Now to style the form container. 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
25 #registration a { 26 color: #8c910b; 27 text-shadow: 0px -1px 0px #000; 28 } 29 30 #registration fieldset { 31 padding: 20px; 32 } Here we are using CSS3 gradients to set the background of the container. We are using three different background declarations to accommodate different browsers. First we set a background color of #2d2d2d that all browsers will understand, then we overwrite it for -webkit and -moz to use background gradients instead. Since Internet Explorer doesnt 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 support it, 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 syntax for the text-shadow is this: 1 text-shadow: x y blur color;
1 text-shadow: 0px -1px 0px #000; So we are using that to add a black vertical shadow that gives the text an indented look.
Styling the Input Fields

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
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
rgb(215,215,215) 54%, rgb(173,173,173) 100% ); background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(225,225,225)), color-stop(0.54, rgb(215,215,215)), color-stop(1, rgb(173,173,173)) ); color:#333; text-shadow:0px 1px 0px #FFF; -moz-box-shadow: 0px 1px 0px #777; -webkit-box-shadow: 0px 1px 0px #777; box-shadow: 0px 1px 0px #777; }
Here we are adding background gradients again, remember to specify the default for older browsers. The rounded corners also 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 for text-shadow. So box-shadow: 0px 1px 0px #777; is a light colored shadow, with no blur, that is down 1px. This combined with 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 multiple backgrounds to have both a gradient and an image. First create a sprite image of all your icons combined into one file.
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 on the right. You will want to replace the earlier code for the input field backgrounds with this new code. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 background: #ddd url('img/inputSprite.png') no-repeat 4px 6px; background: url('img/inputSprite.png') no-repeat 4px 6px, -moz-linear-gradient( center bottom, rgb(225,225,225) 0%, rgb(215,215,215) 54%, rgb(173,173,173) 100% ); background: url('img/inputSprite.png') no-repeat 4px 6px, -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(225,225,225)), color-stop(0.54, rgb(215,215,215)), color-stop(1, rgb(173,173,173)) );
We are able to add multiple backgrounds by separating each one with a comma. To accommodate the new icons we will also need to change the right padding to 30px. 1 padding: 7px 8px 7px 30px; Then specify the background position for each field individually so that it will display the correct icon. The exact values will 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 the input fields. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 input#email { background-position: background-position: } input#password { background-position: background-position: } input#name { background-position: background-position: } input#tel { background-position: background-position: } 4px 5px; 4px 5px, 0px 0px; 4px -20px; 4px -20px, 0px 0px; 4px -46px; 4px -46px, 0px 0px; 4px -76px; 4px -76px, 0px 0px;
Here the first background-position is for the browsers that dont support multiple background images, the second is for the gradient position on the browsers that do support it.
6 of 14
01/08/2013 1:24 PM
Styling the Header & Submit Button

01 02 03 04 05 06 07 08 09 10 11 12 13 14 #registration h2 { color: #fff; text-shadow: 0px -1px 0px #000; text-align: center; padding: 18px; margin: 0px; font-weight: normal; font-size: 24px; font-family: Lucida Grande, Helvetica, Arial, sans-serif; border-bottom: solid #181818 1px; -moz-box-shadow: 0px 1px 0px #3a3a3a; -webkit-box-shadow: 0px 1px 0px #3a3a3a; box-shadow: 0px 1px 0px #3a3a3a; }
Using a bottom border and a box shadow we are able to create an indented separating line without 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 a minimum and also prevents a flicker while the browser loads an image for the :hover state. 01 02 03 04 #registerNew { width: 203px; height: 40px; border: none;
7 of 14
01/08/2013 1:24 PM
05 06 07 08 09 10 11
text-indent: -9999px; background: url('img/createAccountButton.png') no-repeat; cursor: pointer; float: right; } #registerNew:hover { background-position: 0px -41px; } #registerNew:active { background-position: 0px -82px; }
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 from Trevor Davis at Viget Labs. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 <script type="text/javascript"> $(document).ready(function() { /* * In-Field Label jQuery Plugin * http://fuelyourcoding.com/scripts/infield.html * * Copyright (c) 2009 Doug Neiner * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery, see: * http://docs.jquery.com/License * * @version 0.1 */ (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
"") { 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) { return this.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 </script> The line $(#RegisterUserForm label).inFieldLabels(); is what activates the script for those particular labels. Make sure to change the ID if yours is different. I modified the script to add support for the input types tel and email. If you choose 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 will degrade gracefully. Here is the necessary CSS: 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 an issue 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 and also 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 its best 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 Weekly Newsletter. -Nathan Barry
Snapshot Theme Preview A New Level of Precision
7 Responses to Designing Modern Web Forms with HTML 5 and CSS3

1. 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 in mailto:myemail@address.com 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 you need server-side code, which is beyond the scope of this tutorial. You will want to look into doing that with PHP 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.
11 of 14
01/08/2013 1:24 PM
Love this tutorial Nathan!
2.
Michael Story says: January 27, 2011
http://css-tricks.com/nice-and-simple-contact-form/ Reply 3. Edison Leon says: August 1, 2011
Great tutorial, thanks for sharing Reply 4. 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 do something. Otherwise were left with a pretty CSS/HTML5 gimmick with no purpose. Reply 5. 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
Leave a Reply
12 of 14
01/08/2013 1:24 PM
Name Email Website
Pages Home Our Themes About Support Contact Categories Basics Blogging Design Function Interviews News Plugins Quick Tips Resources Themes Archives September 2010 August 2010 June 2010 May 2010 April 2010 March 2010 February 2010 January 2010 May 2009 April 2009 January 2009 October 2008 Meta
13 of 14
01/08/2013 1:24 PM
Log in WordPress 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

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Designing Modern Web Forms With HTML 5 and CSS3 LegendThemes PDF

Uploaded by

Copyright:

Available Formats

Designing Modern Web Forms with HTML 5 and CSS3 LegendTheme...

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