Can i give a title to the select tag?

HTML & CSS
1

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 :


<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

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

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?

4

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

You could use <optgroup> to add a heading to one or more groups of options inside a select.

<select>
      <opgroup> Animals
      <option value="dogs"> dogs</option>
      <option value="cats"> cats</option></opgroup>
</select>
6

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.

7

I have just answered one just like this here.

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

8

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

Did you mean here ?(It looks like threads were merged)

10

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

For Firefox you could just hide it with display:none.


<!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 :slight_smile: