Beanlogic

Back in ‘99, when I took my client-side software blinkers off and moved from C/C++/Java rich-application development to developing for the web I noticed a few things. Not least was the different disciplines that had to be learnt and design patterns employed. The one thing that I could immediately relate to was constructing user interfaces, especially forms. There are familiar elements here, such as text boxes, text areas, radio buttons & checkboxes, select boxes and combo boxes… oh hang on, that’s a lie. There are no combo boxes. In fact there has never been a standard browser implementation of a combo box (to my knowledge, please correct me if I’m wrong). Well, like blue Smarties, the combo box should come back and join the party.

The absence of the combo box in the web developers toolbox has always struck me as odd. Why implement all the other input elements and not a combo box? I suppose the line had to be drawn somewhere. In this article I’ll be exploring how the traditional web-based approach to simulating combo box functionality can be improved until it looks and feels like a combo box.

The traditional solution

<p>
  <label>How did you hear about us?</label><br/>
  <select name="referrer">
    <option>From a friend</option>
    <option>Found on Google</option>
    <option>From a magazine</option>
    <option>Other, please specify</option>
  </select><br/>
  <input name="referrer_other" value="" />
</p>

The traditional solution to providing combo box functionality has been the rather inelegant separate text box for the other option. This approach has two main problems in my opinion. One is that it just reminds me of the old paper forms. The web is superseding paper forms as a means of collecting information from people. That means it’s meant to be better! Well it isn’t.

The other problem with this traditional solution is that it’s always been an annoyance to validate or process. Some potentially very elegant code to iterate through the fields in your form to validate or process the information is confounded by the exception that in a certain condition we have to consult a different field of the form. That’s not major problem, I hear you say. True, problems like this are par for the course for web developers. We at Beanlogic like elegant, beautiful solutions however. Even if they are under the bonnet, never to be seen by anyone.

I could go through all the half-hearted steps one could take to improve, by increment both the visual and technical aspects of the traditional solution. I’m not going to. Any interim, partial improvement would perhaps have been relevant a few years ago. These days, with most browsers in in ubiquitous use supporting a decent level of scripting and standards compliance (even IE6, gasp!) and lightweight JavaScript libraries like Prototype standardising the programming interface, we can go straight to the optimal solution. Then I’ll show how it can be made scalable. Incidentally, if you’re interested in a ‘90s style solution look here ;-)

The solution

The first think I’m going to address is the visual shortcomings of the traditional approach. Let’s make it look like a combo box!

This bit is a fairly straight-forward use of CSS. We’re simply going to reposition our text box over the select box, giving the impression they are one and the same thing.

The CSS for repositioning our input elements

body {
  font-family: sans-serif; font-size: 12px; padding: 10px;  
}

p {
  line-height: 18px;
  position: relative;
}

select {
  width: 200px;
}

input {
  width: 178px;
  height: 16px;
  position: absolute;
  top: 20px;
  left: 2;
  border: none
}

The addition of this CSS makes our form look like this now.

It may now look like a combo box (in Firefox 3 on Ubuntu Hardy at least) but what we’ve actually done has rendered both elements unusable, at the very least confusing. Let’s make it behave like a combo box. For this next bit you should download Prototype , you’re going to need it. All of the things I’m going to be showing in this article and future articles on the subject can be done without Prototype but it’s easier and quicker with Prototype.

<script src="prototype.js" type="text/javascript"></script>

<!-- ... -->

<p>
  <label>How did you hear about us?</label><br/>
  <select name="referrer_select" onchange="$('Referrer').value = this.value">
    <option>From a friend</option>
    <option>Found on Google</option>
    <option>From a magazine</option>
  </select>

  <input name="referrer" id="Referrer" />
</p>

I’ve made a few changes here. I’ll try to explain them

1. The selection box now populates the text box with the value from the options selected using a little bit of JavaScript.
2. We’ve dropped the “Other, please specify” because it is implied in the functionality of the combo box.
3. Swapped the emphasis around for the naming of the elements. We’re now only really interested in the value saved in the text box, since all the selection box is there for is to feed values to the text box.

That’s it for now. This obviously isn’t rocket science. It certainly isn’t when applied to a single, known browser for a single use. In future articles on the subject I’ll be showing you how this approach can be scaled up for multiple use across all the browsers in use today. I’ll also show how we might elegantly process the information in the form and how we can degrade the functionality gracefully to less compliant or functional browsers.