In the world of web aesthetics a nice principle to follow is the less clutter the better. Traditional forms have contained a label and then a text input usually. More and more we’re beginning to see the labels being placed inside the text field until the user selects them, at which point they can type whatever. The reason we may be seeing it more often is because jQuery, as usual makes what is otherwise a fairly time-consuming task and makes it simple.  To get an idea of what I’m talking about you can see a demo here.  I checked the demo.  I’m pretty sure that the tooltips work fine in Firefox, but are incorrectly positioned in Safari, and I don’t even want to know for IE.  I’m sure this is no fault of the plugin, but that there is just some conflict in the plugin CSS and my demo template CSS.  I just really didn’t feel like figuring it out.  On top of all that, if you don’t have Firefox to view the demo with shame on you

Let’s think about what it is we are wanting to accomplish.  Generally we want a form with no labels.  Instead our labels are a prefilled value inside the form field.  However, when a field with one of these prefilled labels is clicked or tabbed to we want to empty the field and ready it for typing.  Next if new data is entered the data should stay in the field, and if no data is entered the field should return to the prefilled label.  Lastly, if the user focuses a field that they have already entered data into we want to make sure that we don’t empty the field, but instead just select the entered data and ready it for editing.  One last thing.  Because our field label disappears when the field is selected I felt that it made sense to make sure that the user doesn’t forget what they are typing into the field.  To accomplish this I used the jQuery Tools tooltip plugin.  I won’t explain this too much, but for this demo I pretty much just copied and pasted their demo code from their site.  Nonetheless, this is a really powerful and flexible plugin, and on top of everything really looks great.

On to the code.  First we’ll take a look at the HTML.

The HTML

<!-- div that will show our tooltip -->
<div id="mytooltip">&nbsp;</div>

<!-- form with labels in the field label in the 'id' and tooltip in the 'title' -->
<form name="myForm" id="myFormId" method="post" action="#">
    <input type="text" name="firstname" id="Your First Name" value="" title="Enter Your First Name" /><br /><br />
    <input type="text" name="lastname" id="Your Last Name" value="" title="Enter Your Last Name" /><br /><br />
    <input type="text" name="mycolor" id="Your Favorite Color" value="" title="Enter Your Favorite Color" /><br /><br />
    <input type="text" name="mycat" id="Your Favorite Cat" value="" title="Enter Your Favorite Cat" /><br /><br />
    <input type="submit" name="mySubmit" />
</form>

(more…)

Sometimes we need to disable an entire form based upon user input. The example I thought of was in the case of asking how a person wants to pay for something. So for example, if a user wishes to pay for their product with a check we don’t need a form, but if they wish to pay with a credit card then we need to give the user a form to fill in their credit card information. You can see an example of this here.

I would normally just not show the form unless the user chose to pay with credit card.  In my opinion this is less intimidating to the user and keeps them scrolling as little as possible.  Nonetheless, here we’re just going to disable it if the user is paying with check, and enable it if the user is paying with credit card.  So let’s take a look at the HTML.

(more…)

It’s fairly standard practice to set a form field to focus on page load.  This allows the user to immediately start typing, as opposed to having to select a form field before proceeding.  See a demo of a simple login screen here.  Notice that the username field focuses once the page has loaded.  We have pretty simple HTML for this so let’s take a look at it first.

The HTML (form_focus.html)

(more…)

Nothing frustrates me more than having to hone in my mouse pointer on a tiny radio button. That’s why many web forms today are allowing the area around the radio button to be clickable. I personally believe that if a radio button and its label is isolated in its own td or div tag the entire div or td should be clickable. A more common approach to this issue is making the label clickable.

Let’s take this example

The idea is that when a user clicks ‘1 to 24′ the first radio button is selected, when ‘25 to 99′ is clicked the second radio button is selected, and so on.  As usual to pull this off we need three resources: some HTML, CSS, and javascript (jQuery since we want this to be easy, right!).

(more…)