HTML Select and Text Input

Question

We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.

Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?

Solution 1

An editable combobox might be a good alternative. The challenge is to style it in such a way that it is clear to the user that he can actually edit the contents of the control, rather than only selecting the provided default contents.

Solution 2

You could use datalist. Example:

<input list="cookies" placeholder="Type of Cookie"/>

<datalist id="cookies">
    <option value="Chocolate Chip"/>
    <option value="Peanut Butter"/>
    <option value="Raisin Oatmeal"/>
</datalist>

Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/

This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.

My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.

Solution 3

That's a fairly common way to design a form both on paper and on the web. I'm not quite sure exactly what you mean with a better way to do so...

If you're worried about the hidden field not appearing if the user has javascript disabled, I'll suggest you hide the field using javascript or have a duplicate "If other please specify" text area in a noscript block:

<select><!-- implemented something like rahul showed  -->
<noscript>
   <label for="ifOtherInput">If other please specify</label>
   <input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
    <!-- Here we know the user selected other so we can just have this label: -->
    <label for="ifOtherInputJs">Please specify</label> 
   <input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>

The backend must handle that the input in the noscript block may be missing. Or you could add the javascript version of the input to the page of the input using javascript (so both cannot possibly appear simultaniously so that they can have the same name.

Comments

[Vijay Dev]

I dont want the user to edit the options available in the dropdown.

[Daan]

That's not what I mean by 'editable combobox'. The control does show a dropdown with options, like a regular combobox, but in the topmost part, next to the 'dropdown-arrow', the user can fill in a custom value.

[Vijay Dev]

can you explain with an example?

[Daan]

Here is an example of what I mean in Flash: polygeek.com/… Here is another example using javascript: dhtmlx.com/docs/products/dhtmlxCombo

[Vijay Dev]

thanks! The one in polygeek looks good for me. Will try that.

[rep_movsd]

Thanks, this is exactly what was needed