[thelist] Design question for Web control user interface

Sam Carter scforum at iness.com
Mon Feb 16 15:17:26 CST 2004


 I've got a form page that allows users to select a "text" value from a
list. One value can be selected. I think I use

<select NAME="CenterIDSearch" onChange="putf('form1')">

<!-- 11 Elements in list -->
<option VALUE='0' selected> All Centers
<option VALUE='2711'>EMPTY (0)
<option VALUE='1411'>ABC (783)
<option VALUE='1111'>DEF (2187)
<option VALUE='1511'>GHI (1086)
<option VALUE='1311'>JKLM (1197)
<option VALUE='1011'>NOPE (396)
<option VALUE='2811'>QRORST (0)
<option VALUE='2911'>WROXY (0)
<option VALUE='1211'>MOXEY (519)
<option VALUE='1611'>BOXEY (885)
<option VALUE='1711'>ORA (3899)
</select>

This is great, but I want to allow users to enter a new value if it doesn't
appear in the list. 

The FORM layout for this problem that occurs to me: Add an input text box -
aside/above/below to the drop-down list. If the text box is not empty, use
the value there, instead of the drop-down. 

This solution doesn't seem elegant since it requires two controls to achieve
a single input value, so I'm chancing a post here to see if anyone has come
across a better method. A single control for the input that provides the two
functions doesn't seem to be in the HTML recommendation.

There may be a way to CSS - style the two HTML controls (input textbox /
drop down list) so together they appear as one, using :focus to make the
drop-down list appear or disappear. Maybe there's a 3rd party JavaScript
that does something for this problem?

Sam 




More information about the thelist mailing list