How To Enhance Your Form Input Fields with jQuery

jQuery makes it easy to spice up our search bars and form input fields with simple touches that really enhances the user’s experience. Let’s look at how jQuery can be used to show/hide a default value inside a field and provide visual user feedback when the field is selected.

The example we’ll be creating features a simple search bar and icon which appears grey as standard but turns to a cool blue when focused. By default the input displays the words I’m looking for…, which disappears when the field is selected.

Why not CSS?

Similar effects could be created purely with CSS. There’s the pseudo :focus selector which allows us to add special styling to elements when they have the user’s attention. Plus, the default input value could be added as a background image, which is then removed also using the :focus selector. But there’s two small problems; firstly the :focus selector isn’t supported by Internet Explorer, and secondly there’s no way of ensuring the default value doesn’t reappear once the user has entered their own information within the input field. This is where jQuery takes over to provide a complete solution that’s compatible with all browsers.

Creating the search form

Let’s create our sample form design. We’ll concentrate more on the front-end design of HTML, CSS and Javascript rather than make the form fully functioning, so to start we need a basic HTML structure:

Just like all forms on the web, our simple search bar is created using a <form> element. Inside this is a <fieldset> to contain our two input fields. The first is a text input with an ID of searchbar, which will be the field the user enters their query into. The second is a submit input element with an ID of searchbtn, which has a value attribute of “Search” to give a descriptive purpose to the button. Our final design will render this input as a magnifying glass icon which replaces the text for a more visual clue.

The whole form can then be styled up with some simple CSS. The search bar is given a specific width of 425px, along with some padding around the edges. This padding adds 20px to the top and bottom, 40px to the left and a large 150px on the right (to accommodate the button). A thin repeating gradient graphic is added to as a background-image and a grey border added to the outside. border-radius is used to round off the edges of the search bar for supporting browsers, otherwise it will appear rectangular. The text inside the field is then set up as 54px Georgia in Italic, with a grey colouring. The final line of outline: none; simply removes the default glow that appears on focus in Safari and Chrome.

The search bar is then given some styling for when the class of active is used. This will be added by jQuery later, which leaves it to the CSS to change the background-image to a blue gradient and a light blue border.

The button appears as an image based icon, so a specific width and height is added. The button is floated alongside the bar, then margin is used to move it into place 18px from the top to align it vertically, and -115px from the left to pull it back to sit inside the search bar. The icon is added as a background-image and text-indent used to shift the default value text off-screen. Internet Explorer doesn’t like this technique, so padding can be used as well. To ensure the user’s mouse displays the appropriate cursor as feedback that the element can be clicked, cursor:pointer; displays the typical hand icon. As an extra visual clue the search icon changes colour by altering the background-position of the sprite graphic when the user hovers over it.

The search form looks and works fine so far, but without the fancy jQuery effects. The library is linked from inside the HTML document, then the document is prepared for our own bit of Javascript. Every jQuery command is contained within the same syntax, which basically says “When the document is ready, run this function.”

The first line of our jQuery takes the #searchbar and adds the words “I’m looking for…” inside the value attribute using the .attr() method. Next, a variable named text is set, which is used along with the code that adjusts the input text of focus. Two functions are then added to the search bar; .focus() for when the input is selected, and .blur() when it is deselected. The class of active we set up in the CSS is added or removed on focus and blur, then jQuery checks the status of the value text. If the searchbar’s value is the same as the variable of ‘text’, then the value should be changed to nothing (” “). When the input is deselected, if the value is blank, the value should revert back to the ‘text’ variable, otherwise the value that the user has manually entered will remain. This prevents the value from clearing out the user’s query and switching back to “I’m looking for…” when the input is deselected.

These techniques don’t have to be reserved for search bars, the same effect can be used on any input field to create super cool sign up or contact forms.

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Iggy's design tutorials and articles at his Web Design Blog or follow his daily findings on Twitter.

Instead of changing the value directly inside the input field, you could use label elements. It would probably be a few extra lines of code, but basically when the input has focus, the label would be hidden using jQuery's .hide().

<blockquote>firstly the :focus selector isn’t supported by Internet Explorer</blockquote>
… Version 6 and 7. IE 8 should be fine. Anyway you should mention, that there are better ways to support this in modern browsers e. g. with the help of "placeholder".

And we should stop limiting our possibilities because of 10 year old browsers. :-)

I simply used this browser support chart to check which versions can handle :focus – http://is.gd/dh6Sd – It shows red next to IE8 too, however I never actually checked it myself.
Placeholder looks like a super handy attribute, roll on HTML5!

Nice write up Chris, handy tip of how we can use simple bits of jQuery to spice up our web pages / apps.

I've done this a few times myself, in an almost identical implementation to you too :). One thing I would say is specify the text var before setting the search bar value attribute. That was you can just set the search bar value to the text var eliminating the duplication of the "I'm looking for…" text, it just makes the jQuery a smidgen cleaner, and you only have to change one string instead of two if you want to change the placeholder text :).

And of course we can use something like Modernizer to ignore this script for browsers which support the HTML5 placeholder attribute (I.E Webkit browers), thus reducing the JS processing needed for the newer / better browsers. It wont save much, but if you start putting alot of JS into your apps the faster and more efficient you can make your code the better, especailly for slower machines. Also taking this approach (letting the placeholder attribute do the legwork on supported browsers) we automatically get support for mobile safari (iPhone + iPad) for free ;).

I've always been a big supporter of ie6 because I had to deal with it in some government sector web app jobs. I always separate my stylesheets by their function, but I'm just so tired of checking on the ugly stepchild (IE6).

Two little advantages for me; It saves a 24kb server request, but more importantly it saves me about 3 minutes of my life not having to download and upload the actual jQuery library file to my own server.

Using jQuery gets you 10 more cool points! Good point though, two main reasons for me: 1) jQuery is easier to learn than pure Javascript. 2) It's likely that I'd have other jQuery effects and functionality in place on a live web project, so it's easy to slot it in with the rest of the code.

I think it would be best to use a label element rather than changing the placeholder value. As your implementation currently stands, the form is quite user-unfriendly to those who require screen readers.

Leave a response

Subscribe for email updates

Don't miss a post! Sign up for email notifications of new content on Line25. Every subscriber gets a free handy pack of web shadows.

About Line25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.