A better way to display form fields

**SEMMatt** · Oct 22, 2009, 11:27

Please view the attachment and let me know if you know of a way to display these form fields better. In other words, so that the display area or display box is smaller while at the same time, users are still able to make multiple selections.

Thanks, matt

**felgall** · Oct 22, 2009, 14:23

You should have posted this question in the CSS forum since CSS is how you change the appearance. Perhaps a moderator will move it for you.

**SEMMatt** · Oct 22, 2009, 17:13

Originally Posted by felgall

You should have posted this question in the CSS forum since CSS is how you change the appearance. Perhaps a moderator will move it for you.

I'm not sold on having to use CSS to solve this. Perhaps there is a different kind of form field that I don't know about. That's why I started this in the HTML forum. Thanks.

**Paul O'B** · Oct 23, 2009, 09:58

You can size it with CSS but that's about as much as you can do cross browser as the select element has limited styling capabilities.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#select {
    width:200px;
    height:125px;
    background:#dddccc;
    border:1px solid #000;
    font-size:12px;
}
#select option {
    padding:2px 5px;/* wont work in most browsers*/
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div>
        <label for="select"></label>
        <select name="select"  multiple="multiple" id="select">
            <option value="a1">Item 1</option>
            <option value="a2">Item 2 </option>
            <option value="a3">Item 3 </option>
            <option value="a4">Item 4 </option>
            <option value="a5">Item 5 </option>
            <option value="a6">Item 6 </option>
            <option value="a7">Item 7 </option>
            <option value="a8">Item 8 </option>
            <option value="a9">Item 9 </option>
            <option value="a10">Item 10 </option>
        </select>
    </div>
</form>
</body>
</html>

**gary.turner** · Oct 23, 2009, 18:34

The select element also has the size attribute, which sets the number of options to show. The rest are scrolled. Stealing Paul's example,

Code:

<form id="form1" method="post" action="">
  <fieldset>
    <label for="select"></label>
    <select name="select"  
            multiple="multiple" 
            id="select"
            size= "4">
      <option value="a1">Item 1 </option>
      <option value="a2">Item 2 </option>
      <option value="a3">Item 3 </option>
      <option value="a4">Item 4 </option>
      <option value="a5">Item 5 </option>
      <option value="a6">Item 6 </option>
      <option value="a7">Item 7 </option>
      <option value="a8">Item 8 </option>
      <option value="a9">Item 9 </option>
      <option value="a10">Item 10 </option>
    </select>
  </fieldset>
</form>

cheers,

gary

**ralph.m** · Oct 23, 2009, 22:46

That's a useful tip, Gary. I tried it with Paul's example, and noticed that the size attribute only worked if the CSS height setting was removed. (A no-brainer, I guess, but perhaps still worth pointing out... for no-brainers like me.)

**ralph.m** · Oct 23, 2009, 22:53

Originally Posted by SEMMatt

so that the display area or display box is smaller while at the same time, users are still able to make multiple selections.

Since no one has mentioned it, a select list like this will just be "one line tall" (so to speak), and the options will only appear when the user clicks on the list, if the select setting is changed from something like:

Code:

<select name="select" id="select" size="4" multiple="multiple">

to

Code:

<select name="select" id="select">

E.g (to use Paul's example):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#select {
    width:200px;
    background:#dddccc;
    border:1px solid #000;
    font-size:12px;
}
#select option {
    padding:2px 5px;/* won't work in most browsers*/
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div>
        <label for="select"></label>
            <select name="select" id="select">
            <option value="a1">Item 1</option>
            <option value="a2">Item 2 </option>
            <option value="a3">Item 3 </option>
            <option value="a4">Item 4 </option>
            <option value="a5">Item 5 </option>
            <option value="a6">Item 6 </option>
            <option value="a7">Item 7 </option>
            <option value="a8">Item 8 </option>
            <option value="a9">Item 9 </option>
            <option value="a10">Item 10 </option>
        </select>
    </div>
</form>
</body>
</html>

**SEMMatt** · Oct 25, 2009, 19:51

Thanks to all who chimed in with great tips. Matt

**Stomme poes** · Oct 28, 2009, 06:23

There's a problem setting a size or a CSS width on these dropdown selects...

in some browsers (notably IE) the width really will stay that width. Not only of the select itself but also the part that drops down. If your width is less than the longest item, the longest item gets cut off. You can't read it.

In FF and other browsers the drop-down box will be wide enough.

In a page where I needed to really limit the width of the dropdowns, but had very long names inside (country names), I ended up adding a title to the longest ones. This isn't really the best solution but it worked for the browsers who were hiding the text. Still doesn't help keyboarders though.

(in case the OP was also referring to width and not just height)

**SEMMatt** · Oct 28, 2009, 17:57

First, thanks everyone for the CSS tip provided above. It works great on my form menu.

I have another requests regarding the form.

1. Does anyone know how to control the tab function between the form elements?

**ralph.m** · Oct 28, 2009, 19:33

I'm not sure you can do this on all form elements, but you can add tabindex="1" etc. on inputs:

e.g.

Code:

<input id="email" type="text" tabindex="1" value="" name="email"/>

Is that what you mean?

EDIT:

As always, it's useful to search the excellent SitePoint Reference on this. Here's a useful page: http://reference.sitepoint.com/html/select/tabindex

**Stomme poes** · Oct 29, 2009, 02:56

Be really careful with those. You may end up forcing someones first tab on the whole page to the form. Tabindex isn't locally scoped : )

Normally you can set the form questions in the desired, logical order and change placement with CSS, which means tab order naturally follows correctly.

The SitePoint Forums have moved.

User Tag List

Thread: A better way to display form fields

Thread Tools

Display

A better way to display form fields

Bookmarks

Bookmarks

Posting Permissions