In the first part of this series we discussed the ways we can help our users to use our forms, today we are going to review how to create forms from the perspective of a Web Developer. I would like to state that this is only one way to accomplish this and there are alternative ways.

Preface

Using tables is something I do not like to do unless i am truly forced to by the circumstances (like tabular data). Tables is something you definitely can do without tables, all you need is some good clean html and css. Let’s create a clean and simple form using pure html and css. And discuss other possible techniques.

Semantic Form Type 1

First let us lay down the HTML ground work on which we can start building our form.

<form class="form" >
    <fieldset>
		<legend>Semantic Form</legend>
        <div>
        	<label>First Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Last Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Address:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Phone:</label>
            <input type="text" class="field phone" />
        </div>
        <div>
        	<input type="submit" value="submit" />
        </div>
    </fieldset>
</form>

In the code above you will notice I use div’s to horizontally separate the fields. You can use unordered/ordered lists, paragraphs or any other block element.

Now let’s style the simple form.

.form { width:250px; margin:50px auto;} /* set a width for our form, and center it with some spacing above */
.form fieldset {border-top:1px solid #ccc;} /* just for styling the top of the fieldset */
.form fieldset legend {font-size:1.2em; font-weight:600; padding:0px 5px 0px 0px;} /* add some styling to form header */
.form div {clear:both; padding:10px 0px;} /*clear the floated label and input */
.form label {display:block; float:left; width:46%;} /* position the labels to the left */
.form input.field {float:left; margin-left:3%; width:47%;} /* position the input */

Keep in mind the above code has had a Eric Meyer reset which removed all margins paddings and borders. As you can see i have added a comment for what each line does in the CSS.

That was easy, simple clean form that just works!

The Other Possible Methods

The method above is one of many possible solutions. I have seen people use Unordered Lists instead of my div’s and others use paragraphs they are all block level elements so they will work just fine. In my demo you will notice the labels float to the left of our input fields, you can also create forms with the text being above each field, all you have to do is remove the float and display the label block! Vuala you have a whole new style in 2 steps!

You can also easily create this into a two column form by simply adding a new fieldset that has its own set width and is floated, it’s as simple as that!

What’s Next

In our next installment of Web Forms we will talk about validation, the good, the bad and the ugly! Stay tuned for a series that will truly talk about every single aspects of Web Forms!

Series Introduction

If you want to buy something from the internet, or to post a comment on some blog, or buy an airplane ticket, or pay for electricity, or be a part of some social network and so on there is one thing standing in your way, a web form.

How many times have you simply given up from something because of that web form? Poor explanations, enormous data you need to fill out (and a part of them they won’t even use), bad organization and many other things that make you give up.

In this series of articles we go over all the aspects of creating captivating forms that will help your users.

Introduction

In this part of the series we’re going to talk about different types of assisting our users in filling out our form, about the pros and cons, and check out how some of the major websites deal with it, and where they might be making mistakes.

Let’s start.

Why to help?

A form is the only thing standing between you and the potential customer, user, business partner and everybody trying to interact with you. You both want the form to be completed but not everyone completes it, and in most cases that happens because of a poorly created form. A part of a poor form is bad user assistance, improving it will improve the completion rate of your form and that’s what you need.

When to help?

Sometimes we don’t really understand what or why we need to fill in some data, that’s where user assistance jumps in to help us resolve our doubts.

• When you need something filled in a specific format (like phone numbers and dates)
• When you need some data unfamiliar to many people (like credit card security number, SWIFT, IBAN)
• When you are asking for private data (like credit card – let them know it’s safe, email – let them know it won’t be used for spamming)
• When not all the fields are required (simply put the * sign on required fields, it works perfect and users are use to it)
• When you are asking for specific information that you need but the user might not be informed about (asking about feedback on a certain subject)

At the end it all depends on the forms purpose, and a good way to know what to do is to check how others did it, but don’t copy it, try to use it and you will know what you don’t like about the assistance in their forms, what you think they forgot or added without a need for it and you will get the idea of what assistance your form needs.

After you make it, get some people of different age to test it (friends, family) and they can help you decide when you really need to help your users.

Where and How?

Well the possibilities are enourmous. You can make the help user activated, on field hover activated, on focus activated, inline, inside a modal window, bellow a field,  after a field, bellow a label, on top of a field, before the form after the form (those 2 aren’t suggested if you are referring to a specific field) and many more ways.

Where depends on the design, the amount of help text, how much space do we have for the help, will it interfere with the rest of the form and so on.

How really depends on what kind of help are you showing. Is it a rule like “minimum 5 characters” or a tip like “use _ – . for a more secure password” or maybe a bigger explanation like why we need some information like facebook explains why they need our birthday when we register.

Let’s take a look at some major websites to see how and try to see why they do it the way they do.

GMAIL – Always visible help

Gmail did a great job explaining fields that might not be very clear without them. For example this “recovery email” field, i don’t think anybody would know what’s it for without the description.

When to use this type?

• For fields that most users won’t know what they are for (like the recovery password example)
• For fields where the data must be in a special format or have some rules like min characters, characters type and such.

When using this type of assistance the best practice is to make the text color lighter than the rest of the form content text (as you can see in the picture above, it makes it easy for our users to focus on the rest of the content).

YAHOO – Help activated on field focus

In my opinion the “Capitalization…” text should have been visible all the time, because it points out a rule we must obey. But thinking about it a bit more made me think they made it because it would attract more attention if it suddenly appears than it would if it was visible all the time. What do you think?

Let’s focus on the second help (for the password strength). It’s only a tip how to make our password more secure and not a rule. After the field becomes inactive that help disappears.

When to use this type?

• When you want to give your user a tip or suggestion
• When you want to ensure that the help captivates the users attention

FACEBOOK – User activated help

User activated + modal window centered on the page

When to use it?

• For bigger help texts and explanations
• For embedding visual effects like the back of a Credit Card for the CVV numver

We’ve seen the good, now let us look at the the bad and the ugly.

The screenshot above is taken from a very valuable website that offers their users to buy/sell ad spots, and this screenshot is taken from a page for depositing money.

1^st issue – In which format should I fill my credit card number?

2^nd issue – What is a security code? Oh, there is a link to find out. Clicking the “What’s this?” link expecting a new window or a JavaScript tooltip to popup but I’m taken back to the index page. I lost the data I entered and I need to find that page again. Screw this I’m not depositing.

3^rd issue – Do I need to fill in all those fields? Why didn’t you simply put the * on required fields? Are they all required? You’re not helping me in making you money.

As I mentioned, that page is for depositing money, and I bet they lost a lot of money because they failed to explain to the user those 3 things. Fixing them would take less than 10 mins and the completion rate of this specific form would increase resulting it the income increase too.

Wrap Up

So we have seen some great examples of websites that just get it right, and an example of where we can find room to improve. We hope if you gather one thing from these series that is forms need to be simple, so simple that your cat can do it. Making your forms simpler will result in more successful customers and clients.

WordPress 3.0 is still in beta, but the latest version has some issues with the new menu manager. This is a great little tutorial on how to fix that issues.

Rocking and Rolling Rounded Menu with jQuery

Tympanus always had fantastic tutorials. This tutorial shows you how to make a fantastic and very inovative menu using jQuery.

Elegant Accordion with jQuery and CSS3

Another one from Tympanus. In this one he shows us how to make a brilliant accordion using jQuery and CSS3. This is a must see.

3D Animation Using Pure CSS3

It’s amazing what CSS3 can do, in this tutorial we learn how to make an awesome 3D animation with it. You’ll need Safari for the full experience.

Create Windows 7 start menu using CSS3 only

Janko shows us how to create an exact copy of windows 7 start menu using just CSS3. Except for the icons of course, they’re images .

Simple Banner Rotator With PHP, jQuery & MySQL

If you ever visited a blog that has ads (the chances are you did, because all webdev blogs have ads) you probably noticed the ads are rotating, they’re not always on the same place. Well ths tutorial shows you how to do the rotation using PHP.

Create a Simple Interactive CSS Button with jQuery

Kevin shows us how to make a interactive button using jQuery and CSS. In this example on form submit the submit button will get a loading animation, which is really useful thing to have.

Automatically Shorten URL on Page Load in Wordpress

Automated link shortening is a great thing to have, Zach from buildinternet.com shows us how to make it.

CSS3 Solutions for Internet Explorer

CSS3 is awesome, but IE’s don’t support it. SmashingMagazine has collected quite a few “hacks” to achieve some of the most needed CSS3 effects in IE.

Different Stylesheets for Differently Sized Browser Windows

The usual width of a website is not bigger then 1000px (usualy at 960px), simply because there are a lot of people with 1024px wide resolution, but there are also a lot of those with bigger resolution then 1024px, i have 1366px for example, so there is a lot of unused space on the sides. Chris shows us how to use different stylesheets for different resolutions.

“Pick up my kids from school tomorrow 3pm” will be parsed as, “Pick up my kids from school” with date pre-selected. If you’ve never seen this before, this is pretty interesting stuff. Question is, how do they do it?

There are few ways to do this, just by looking at task.fm application, they allow maximum of 140 characters. Which means, it possibly uses recursive function to go through every possible pair. If we let every word be paired with another word, then three words, then four words, and so on, then we can possibly run every single combination, given that it’s only 140 characters long.

I would say the most easiest way to do it is to use strtotime() function. The function evaluates the word, if it passes as a string with valid date/time variables, it will return a number. If not, it will return -1.

Let’s brainstorm: “I am going to go to the beach at 3pm tomorrow”

If we run strtotime() function on every single word, then it will return -1 on every word except “3pm” and “tomorrow”

Time to do some coding:

function parse_to_date_and_string($parse) {
$exclude = array('i', 'at');
$parse_array = explode(" ", $parse);
$date = array();
$data['text'] = array();
$word_count = count($parse_array);
for($i = 0; $i < $word_count; $i++) {
if (strtotime($parse_array[$i]) > 0 && !in_array($parse_array[$i], $exclude)) {
$date[] = $parse_array[$i];
} else {
$data['text'][] = $parse_array[$i];
}
}
$data['date'] = strtotime(implode(" ", $date));
return $data;
}

Looking at the code above, let me explain the general concept. strtotime() function returns -1 if the word does not parse into a real date. We check every word whether they are parseable into a date, if they are, we combine them together, then parse it at the end.

What will it look like?

Example) Tomorrow I have to go see my chiropractor at 12:00pm

Found parseable words) Tomorrow 12:00pm

Non-parseable words) have to go see my chiropractor

Outcome) if we run strtotime(“Tomorrow 12:00pm”), it should return the correct date.

By the way, certain words will be parseable, such as “i”, so had to take that out using $exclude array. I also took out the word, “at” because if someone enters, “pick up my kids at 12pm” then it will be parsed like “pick up my kids at” “12pm”

There’s many things we could experiment with, just by using strtotime() function. This way, we don’t necessarily have to have recursive function that checks for all possible combination. The code I’ve written is still very primitive, but you can experiment further to make something actually usable.

Even though IE9 was announced and it’s really going to make our lives easier… for now we still have to worry about sneaky IE7.

In today’s case i encountered an unfortunate error with a navigation element that was positioned absolutely (drop-down menu) and unfortunately went
behind the main graphic on my website even though it had a high z-index.

The Problem: IE7 has a problem rendering z-indexes correctly (of course) and in a few rare scenarios you may run into this problem. Off the
top of my head the two main scenarios are a SuckerFish (drop down) menu made with pure CSS that goes over certain content on your page, and a lightbox
that somehow doesn’t play nice with the elements underneath it.

The Solutions: There are a couple of solutions, let me try to explain both.

1. Make sure the parent of your absolutely positioned element has a higher z-index! Here is a graphic to help you visualize it.
2. Or use this jQuery (did not work for me but a lot of people seem to get it to work for them!

   $(function() {
   	var zIndexNumber = 1000;
   	$('div').each(function() {
   		$(this).css('zIndex', zIndexNumber);
   		zIndexNumber -= 10;
   	});
   });
   

Today i want to go over a few techniques to easily use cookies via jQuery (much easier) or pure javascript.

What is a cookie?

A cookie is a text string that is included with Hypertext Transfer Protocol (HTTP) requests and responses. Cookies are used to maintain state information as you navigate different pages on a Web site or return to the Web site at a later time. This article provides information about cookies.

What do i do with cookies

Cookies today can be seen used most often for storing user logged in information. That means that with cookies we can allow for our members to set a certain amount of time for their account to stay logged in. Also you use cookies to store very basic temporary information that the website collected from you at one point of time.

Cookies should NOT be used to store information that needs to be accessible by the user or by your website from a variety of places. By places i am referring to different machines and browsers that store the cookies locally.

How do i actually use them

Cookies are accessible by all web programming languages. That means, javascript, python, php, and many more. First i want to go over using cookies with jQuery since it is the easiest way to do this.

jQuery has a plugin you use with the jQuery library itself and you can really easily store and access your cookies. So lets look at the code of storing and displaying a cookie.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(document).ready(function(){
	// set cookie
	$.cookie('my_cookie_name', 'value inside of it');

	// get cookie
	alert($.cookie('my_cookie_name'));

	// delete cookie
	$.cookie('my_cookie_name', null);
});
</script>
</head>
<body>
<a class="setme">Set Me</a>
<a class="tellme">Tell Me</a>
<a class="delete">DeleteM</a>
</body>
</html>

Now let’s go over the important parts of the code. First of course we embed jQuery itself, then we add the jquery cookie plugin and then we start our beautiful jQuery code.

The set cookie is pretty straight forward, one line of code that will set the cookie “my_cookie_name” with the value “value inside of it”. We do that by passing in two parameters into our $.cookie() plugin. You do need the quotes around the name and the value of the cookie, feel free to use single or double quotes as your preference.

The get cookie code is even more straight forward we just pass in the cookie name in out jquery cookie plugin and it has the value we stored in there.

And finally deleting the cookie is almost the exact same as storing the cookie, only difference is we store null inside of it.

Now let’s go more advanced

Now that we have set a cookie, added a value, and deleted the stored value it’s time to do things like storing the cookie for a certain period of time, or to a certain date!

// cookie expires in 10 days
$.cookie('cookie_name', 'our value', { path: '/', expires: 10 });

// cookie expires in a set JavaScript Date
var date = new Date();
$.cookie('cookie_name', 'our value', { path: '/', expires: date });

The first code sets a cookie to expire in 10 days. That’s it… it’s as simple as that. Pass in a third parameter that has the path to where you want to store the cookie in the browser directory, leaving this to / is your best choice. And then you set the expiration days.

The second code we first set a variable date to store the current date and then it will set the cookie to expire to the certain JavaScript date. Putting a real date in there will not work unless you stored a javascript date in a variable called date. Read more about JavaScript dates here.

How to do this with JavaScript

Here is the code to write a cookie with plain JavaScript

function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + 31536000000); //1 year
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
   }

function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
   }

setCookie('test', '5');
alert(getCookie('test'));

We set up two functions setCookie and getCookie. We need to pass in 2 variables into the setCookie the key and the value pair. Currenty the cookie is set to expire in a year but of course you can change that, i have the link on javscript dates above.

I hope i have shed some light on the world of cookies!

The only way to know you’re moving is to reference the past, and since we learn history so we do not repeat our mistakes today we want to go over the progression of famous web blogs and how they have evolved.

ALISTAPART.COM

Launched: 1998

Interesting links:

A List Apart 4.0

CSS-TRICKS.COM

Launched: 2007

Interesting links:

About the CSS-Tricks Redesign | CSS-Tricks

Design V6

SMASHINGMAGAZINE.COM

Launched: 2006

Interesting links:

About Smashing Magazine

HONGKIAT.COM

DESIGNSHACK.CO.UK

What are we seeing from the blogs above… we see a movememnt towards simplicity and ease of use. This can be accomplished by great typography, or a light load of graphics to accomplish more. Even though its easy to get caught in a zone where you want to add everything in one little box because its all amazing stuff, but being able to analyze what is vital and what can take the bleachers is one of the most important thigns you will learn in web design. Hope this post helps you see the progression of the web signing out, yours truly Angel Grablev.

I have said this before and i feel i should keep repeating it, you should always spend time to learn more about your visitors. This means what browser they use, what is their resolution, and even what operating system they are using. Well there are quite a few more things to be known of your visitors behavior but for today’s article we will try and go over the things that matter when evaluating whether to use CSS or a sliced image.

For this blog i have used various CSS3 techniques instead of spending loads of time on slicing my initial photoshop design, why was I able to do this? Well simply because a web development blog has 60% Firefox (95% of those use the newest 3.6.x version) then another 20% goes to chrome, and the rest is distributed to IE, Safari, and of course Opera. What this means is that 90% of our users will see the website exactly as intended, and the rest will see a very slightly different version which looks great. The other great benefit to this is much faster load times, less graphics is always a benefit to a high traffic web development blog, or to really any website with 100k+ page views. Here is the difference between IE and Firefox:

The tricky part comes when you have to be careful and distinguish functionality with appearance. You should never ignore functionality when using advanced CSS techniques to accomplish certain effects. As a web developer you already know to test your websites in most modern browsers, personally i test on IE7/IE8, Firefox, Chrome, and Opera. But never let functionality struggle because you wanted to save time slicing your design. Things like Rounded Corners, Drop Shadows, and other styling techniques are usually a safe bet of things being only different visually. Text-Shadow can cause text to appear harder to read when the browser does not support text-shadows.

Using HTML5 is awesome, it allows you to create websites with a lot of bells and whistles with little to no effort. However things like HTML5 validation do not work in all browsers so you need to make sure you have a back-up. I have created an HTML5 CSS3 framework that has a lot of cool features that are okay to use with all browsers. Check it out 52framework.

In conclusion I strongly suggest and support web developers to try using the new technologies that make our lives easier as long as you have made sure that it does not cripple your websites.

Checkout the following websites to help you use these amazing technologies:

52framework.com
css3generator.com
modernizr.com

Step by step tutorial on how to use the new thumbnail feature in wordpress 2.9. In this tutorial you will learn how to activate the feature, add a thumbnail and show it on your blog or website.

Grungy Random Rotation Menu with jQuery and CSS3

Nicely explained tutorial on creating a really nice menu that has random rotation.

Useful and Practical jQuery Image ToolTips Tutorial

Kevin wrote an amazing tutorial on creating image tooltips using jQuery.

Create Simple Jquery Right Click Cross browser Vertical Menu

Very interesting effect. Same as when you right click but with this you can create your own right click menu.

Pure CSS3 bokeh effect with some jQuery help

Very nice and detailed tutorial on making bokeh effect (the circles on the image above) using CSS3 with a bit of jQuery help.

10 Effective Ways To Secure Your WordPress Blog

Every version comes with improvements, but until we get a completely secure WordPress version we have to find ways to improve the security ourselves. This tutorial shows 10 effective ways to do that.

Ultimate guide to table UI patterns

Awesome article on tables in user interface with some cool examples.

Coding a CSS3 & HTML5 One-Page Website Template

Take a look at this great step by step tutorial on coding a template using HTML5 and CSS3.

Design a Prettier Web Form with CSS 3

Want to make your forms a little less boring? You simply must check out this outstanding tutorial.

Best Practices for Hints and Validation in Web Forms

Another article/tutorial about forms. Check out what’s considered as best practices in helping out the user completing a form.

Final Words

Hope you like my selection for the top 10 webdev articles and tutorials from last month. Let me know what you think.

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

You can also link to the original javascript file.

Detect browser

eval(function(p,a,c,k,e,d){e=function(c){return(c
Usage
var browser = $.browser.browser();

For more info check jQBrowser.
Display last tweet
$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

Reference URL.
Load jQuery only if it's not already loaded
var jQueryScriptOutputted = false;
function initJQuery() {

    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {

        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;

            //output the script (load it from google api)
            document.write("");
        }
        setTimeout("initJQuery()", 50);
    } else {

        $(function() {
            //do anything that needs to be done on document.ready
        });
    }

}
initJQuery();

Reference URL.
Get mouse coordinates inside a box
$(function() {
$("#demo-box").click(function(e) {

  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);

  alert("X: " + relativeX + "  Y: " + relativeY);

});
});

Reference URL
Random HEX color
'#'+Math.floor(Math.random()*16777215).toString(16);

Reference URL
Do ... to an element when it comes into the view by scrolling
$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    var myelement = $('#formcontainer'); // the element to act on if viewable
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            // do something when element is scrolled to and viewable
        } else {
            // do something when element is not viewable
        }
    });
});

Reference URL
Email validation
function checkMail(email){
	var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if (filter.test(email)) {
		return true;
	}
	return false;
}

Reference URL
Verticaly center an image inside it's parent
$(window).load(function(){
    var parent_height = $('#the_image').parent().height();
    var image_height = $('#the_image').height();
    var top_margin = (parent_height - image_height)/2;
    $('#the_image').css( 'margin-top' , top_margin);
});

Reference URL
Open external links in new window
$('a').each(function() {
   var a = new RegExp('/' + [removed].host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

That's it, i hope you like my selection of jQuery and javascript snippets.
]]>
			http://web.enavu.com/tutorials/10-awesome-jquery-and-javascript-snippets/feed/
		16