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

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

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

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