2

I am making an HTML form with multiple inputs. I am using mainly select inputs (as below),

<select>
<option></option>
<option></option>
</select>

and also some radio buttons. I each input represents a different category. I have one category with 20+ possible options. I need an HTML form to do this without taking up a lot of space. Radio buttons wouldn't work, and a select input with 20+ possible options seems a bit over-the-top. Any ideas on what type of input I should use? Or, is it possible to limit the length of the drop-down box, and have a scroll bar on the side?

  • possible duplicate of [limiting select box list length - adding scrollbars](http://stackoverflow.com/questions/5593004/limiting-select-box-list-length-adding-scrollbars) – DavidDomain Jul 18 '15 at 16:54

3 Answers3

5

As you asked:

Any ideas on what type of input I should use?

You could just use the size attribute of select:

<select size='5'>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
  <option>example</option>
</select>

However as you can see with this there is no longer a dropdown - but the options are still there, with a controllable limit and a scrollbar.

ᔕᖺᘎᕊ
  • 2,971
  • 3
  • 23
  • 38
0

Consider using a freeform text input box coupled to a <datalist> element that provides a list of suggested options once the user starts typing something in the box. You should provide a <select> fallback for browsers that do not yet support <datalist>, like so:

<input type="text" name="{NameOfYourField}" list="datalist-dogs" />
<datalist id="datalist-dogs">
    <select name="{NameOfYourField}">
        <option>Affenpinscher</option>
        <option>Afghan Hound</option>
        <option>Aidi</option>
        ...
    </select>
</datalist>

Be aware that users will be able to submit unique values. Unlikes radios and select boxes, input values are not restricted to the options provided in the datalist.

Further reading: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

kieranpotts
  • 1,510
  • 11
  • 8
0

You can use CSS styling on HTML forms to scale the size down, just make sure to give the specific form elements an ID. You can use width and height commands on most [not all] types of form content. If you need the form to be really small, but then expand the form based upon user interaction, you can use JavaScript "onclick" or "onmouseover" commands to cause the form elements to expand when the user either rolls the mouse over it or clicks on it. I'm gonna show you an example of what this looks like on a submit button. The same model works with any form element

HTML form could look like this:

 <input id="button" name="button" type="submit" value="Send">

CSS looks like this:

#button {
height:  5px;
width:  20px; 
};

How HTML looks like with required JavaScript commands:

<input id="button" name="button" type="submit" value="Send" onmouseover="this.style.height='50px', this.style.width='200px'>
Chris
  • 113
  • 4