SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A better way to display form fields

    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
    Attached Images Attached Images

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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>

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.)

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SEMMatt View Post
    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>

  8. #8
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all who chimed in with great tips. Matt

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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)

  10. #10
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •