Line25

How To Enhance Your Form Input Fields with jQuery

Read the full post

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.

View the demo

View the demo

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:

<form action="" method="get">
	<fieldset>
		<input type="text" id="searchbar" />
		<input type="submit" value="Search" id="searchbtn" />
	</fieldset>
</form>

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.

#searchbar {
	width: 425px; 
	float: left; padding: 20px 150px 20px 40px;
	background: #ededed url(bar-bg.png) repeat-x;
	border: 3px solid #c7c7c7;
	border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;
	font: italic 54px Georgia; color: #898989;
	outline: none; /*Remove Chrome and Safari glows on focus*/
}	

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.

#searchbar.active {
	background: #ebf3fc url(bar-bg-active.png) repeat-x;
	border: 3px solid #abd2ff;
}

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.

#searchbtn {
	width: 67px; height: 70px; float: left; margin: 18px 0 0 -115px;
	background: url(search.png); text-indent: -9999px;
	padding: 0 0 0 67px; /*IE fix*/
	cursor: pointer;
}
	#searchbtn:hover {
		background-position: 0 -70px;
	}

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

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.”

$(document).ready(function() {
	$("#searchbar").attr("value", "I'm looking for...");
	
	var text = "I'm looking for...";
	
	$("#searchbar").focus(function() {
		$(this).addClass("active");
		if($(this).attr("value") == text) $(this).attr("value", "");
	});
	
	$("#searchbar").blur(function() {
		$(this).removeClass("active");
		if($(this).attr("value") == "") $(this).attr("value", text);
	});
});

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.

View the demo

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.

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

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

  • http://www.stevensst.com Freelance Web Design

    Will this degrades nicely in non CSS3 browsers?

    • http://twitter.com/chrisspooner Chris Spooner

      Other than the rounded edges, it works exactly the same in non-CSS3 browsers.

  • http://eyoosuf.com Yoosuf

    How to make similar work with Password Field?

    • http://twitter.com/chrisspooner Chris Spooner

      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().

  • Oliver

    <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. :-)

    • http://loneplacebo.com Tony

      The placeholder attribute is not supported by all doc types, namely XHTML Strict.

    • http://twitter.com/chrisspooner Chris Spooner

      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!

      • Oliver

        What else should we use today? I use html5 for month now as I cannot remember the other doctypes. :-D

  • http://www.steammultimedia.com Steam Multimedia – Web Design

    Back dated browsers can always be a worry for these sorts of things. I think that developers are starting to phase out the development for browsers like IE6 as it becomes more un-used.

    This is a nice feature for a search bar or part of a form. It can help give the website a different kind of edge and flow

  • http://www.studio-worx.com Jason Skinner

    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).

    Good job.

  • Wills Bithrey

    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 ;).

    Anyway, great tidbit as always Chris – Thanks! :)

    • http://twitter.com/chrisspooner Chris Spooner

      Thanks for the tip!
      I'll have to try and remember to use Modernizer on one of my next web projects. I've come across it loads of times but haven't looked into it yet.

  • http://www.studio-worx.com Jason Skinner

    Quick question. Is there any benefits to using google's API rather than hosting jQuery on your own server? I use jQuery a ton and just wondered if this affects performance.

    • http://twitter.com/chrisspooner Chris Spooner

      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.

  • http://tunila.me TuniLame

    Why not using just JavaScript to do the jQuery's work?

    • http://twitter.com/chrisspooner Chris Spooner

      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.

  • http://WebsiteDesigningandDevelopmentinFaridabad pooja

    Thanks for this useful artical can you suggest any web designing website to enhance my skills?

    Thanks

  • Notice

    Hey

    Thanks for this nice tutorial!

    Just noticed that you should add no-repeat to #searchbtn background. Otherwise it will loop with Opera. :)

  • http://www.jpcreative.co.uk Rob

    Great tutorial, thanks. Oh and definitively look into Modernizer it's great.

  • http://www.mcconnellgroup.ca Shawn McConnell

    Thank you for sharing Chris, I find it to be beneficial to sometimes not use Jq Some times,

    How did you come to the 24Kb savings?

  • http://www.eastdevonit.co.uk Dan

    Hi

    Great tutorial, thanks a bundle!

  • http://jason.karns.name Jason

    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.

  • http://www.webton.nl Webton webdesign

    Thanks for the tip!

    I’ll have to try and remember to use Modernizer on one of my next web projects.

    Keep on the good job!

  • http://gabri.me Gabri

    nice post Chris, but i want to ask why you added the focus styling using JS instead of CSS , so that if JS is disabled focus styling will be working too ?

  • Ade H

    Ah, at last! Someone who realises that if a default input value (e.g. "Search") is used, it should be added into the DOM by JS rather than hard-coded into the HTML.

    I hate tabbing to a search box and finding that I have to delete the default value first before I can use it. That happens so often.

    A good article, Chris (as usual) and good practice.