SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    can i give a title to the select tag?

    hey all,
    my question is, can i give some kind of title to the select tag so it will appear in the select but when opening the drop down menu it will not be one of the options?

    for example atm i use this :
    Code:
    <select>
          <option value="0"> Select </option>
          <option value="dogs"> dogs</option>
          <option value="cats"> cats</option>
    </select>
    I want the Select to be the title of the select tag and have the dogs / cats as opinions, any ideas?

    ps. no optgroup tag, thats not what i maent.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I'm not aware of anything that enables you to have dummy text in the select box that isn't one of the options. What you would need to do is to validate the input so that when the surfer tries to submit the form, if they haven't changed it from "Please select..." to one of the other options, the form is rejected and they are asked to complete that entry.

  3. #3
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    It's not possible using HTML. The question is whether you want to do it. Most users know how select form elements work. Rather than having a dummy value, why not use the value most commonly selected as the default, saving the majority of the users a little time?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Probably the nearest is to use the attributes: selected="selected" and disabled="disabled" of course you would have to be happy with a disabled item appearing by default.

    Alternatively something like: <option selected="selected" disabled="disabled" value="none">XYZZY</option>

    Possibly the above would work but whether is is sensible is another matter but it should prevent 'successful' passing of the value.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could use <optgroup> to add a heading to one or more groups of options inside a select.

    Code:
    <select>
          <opgroup> Animals 
          <option value="dogs"> dogs</option>
          <option value="cats"> cats</option></opgroup>
    </select>
    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="^$">

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Some browsers (such as Internet Explorer 8) doesn't display the optgroup title if it's the first on the list, so that won't (always) work.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have just answered one just like this here.

    http://www.sitepoint.com/forums/showthread.php?t=721775

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey all,

    thanks for the responses, seems like there's no proper solution for this so ill just stick to how the way it is now, and just put some check if the value of the option tags is different than "select" , or like C. Ankerstjerne suggested, i'll just put the most common selection first

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AllanP View Post
    I have just answered one just like this here.

    http://www.sitepoint.com/forums/showthread.php?t=721775
    Did you mean here ?(It looks like threads were merged)

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Like I said above if it has the attributes 'disabled' and 'selected'; it would be both the "default" option and won't be able to pass on data. Thus the normal user could NOT post or select that value in the first place. Neither would it allow focus and doesn't require the user to have JavaScript enabled to function correctly.

    Not "ideal" but covers all the major points in the original question. Obviously you'll still need server-side validation at a bare minimum anyway.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    For Firefox you could just hide it with display:none.
    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">
    option.first{
        display:none;
        height:0;
        visibility:hidden;
        overflow:hidden;
    }
    </style>
    </head>
    
    <body>
    <form action="">
    <fieldset>
    <legend>Select one</legend>
      <select name="favoritefood">
        <option class="first" >Select one...</option>
        <optgroup label="Dairy products">
          <option>Cheese</option>
          <option>Egg</option>
        </optgroup>
        <optgroup label="Vegetables">
          <option>Cabbage</option>
          <option>Lettuce</option>
          <option>Beans</option>
          <option>Onions</option>
          <option>Courgettes</option>
        </optgroup>
      </select>
    </fieldset>
    </form>
    </body>
    </html>
    Doesn't work in other browsers though so is not much use - but interesting


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
  •