Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/deb7131n5/domains/maxvoltar.com/public_html/2009/textpattern/lib/txplib_db.php on line 14

Deprecated: Function split() is deprecated in /home/deb7131n5/domains/maxvoltar.com/public_html/2009/textpattern/lib/txplib_misc.php(570) : eval()'d code on line 471
Maxvoltar - How to build a better search form

Maxvoltar is the personal weblog of Tim Van Damme, a freelance interface designer at Made by Elephant.

50° 54' 47" N, 4° 25' 50" E


How to build a better search form

You’ve got to admit there are a lot of bad forms on the web. So bad, people actually wrote books about it. If we want to change that, we have to do it one step at a time. Today, I’ll show you some tips on how to improve your search forms.

The search form is probable the most simple form on your site. Yet it is probable also the only one with a limited space, making styling it more complicated then other forms.

Does a search form need a button?

This depends on the audience you’re targeting. Are your users daily surfers; or are they people that barely step foot on the internet? The first group already knows that pressing return will get you to the results. The second group will probable be lost.

Give them a hint

If you’re not providing a submit button, at least give your visitors a hint of what they should/can do. As you can see on my old blog, there appears an icon implying you should hit return as soon as you place your cursor in the field. I’m not saying this is the way it should be done, but it was the only way I could think of that wouldn’t clutter the markup or demand using Javascript.

Improving the clickable area

A text input is a small thing to click on, and hard to customize if you want pixel precision. Like with anchors, you can also enlarge the clickable area of a text field. Adding padding is not really an option, as this is poorly supported by browsers (if you do this, you probable get 3 different results in 3 different browsers, especially in combination with line height).

So here’s a little trick I’d like to share with you. First take a look at following image:

A default search form
Figure 1 A default search form

This looks like a common used search form, and could be coded as simple as this:

<form>
  <p>
    <label>
      <input type="text" />
    </label>
    <input type="submit" value="Search" />
  </p>
</form>

If you put the code and the image next to each other, you get this list:

  1. <form>
  2. <label>
  3. <input type="text">
  4. <input type="submit">

The trick here, is to make sure the label that sits around your text input is as big as possible. You can do this with some position magic. Next, put something like this in your CSS-file:

label { cursor: text; }

Result: As soon as the users’ cursor comes close to the input (over the label), it changes to a text cursor. Clicking the label will result in the text field being focussed. This is something all browsers do, but isn’t used as much/creatively as it should be.

So there you have it, a more accessible, clickable and proper coded search form without the need for extra markup, or Javascript. Enjoy!

5Comments

  • Cole

    3614 days ago

    Interesting article as always Tim.

    I thought – and I might be wrong here – that it was preferable to state label/input associations explicitly rather than implictly. i.e.: <label></label><input /> rather than <label><input /></label>

    In terms of accessibility this is because some assistive technologies don’t properly support implicit labelling.
    Additionally, IIRC implicit labels in that dear friend of ours, IE6, are not clickable whereas explicit labels are.

  • Tim Van Damme

    3614 days ago

    Good point, Cole. I didn’t knew implicit labelling isn’t fully supported. You’re code will also work with my approach, just don’t forget to define for="textfieldID". As for IE6, I couldn’t care less…

  • Sugar

    3614 days ago

    Interesting approach, even if I dislike the wrapping input in label solution.

    On an irrelevant note, may I humbly suggest something?

    Adding a title property in your menu links? Only showing icons up there is scary enough – not showing a tooltip is not very practical for some of is, is it?

  • Tim Van Damme

    3613 days ago

    Hey Sugar! This site is a bit of a playground for me, so it isn’t perfect. But I’ve added the titles, specially for you!

  • Sugar

    3611 days ago

    Thanks a lot, much better. I’m honoured!

    :)

Commenting is closed for this article.


Home

Powered by Fusion