CODEWITHSUNDEEP
html
Alamin
Alamin

Reputation: 887

How to add a title to a html select tag

How would I go about setting a title in select tag? Here is my select box:

<select>
    <option value="sydney">Sydney</option>
    <option value="melbourne">Melbourne</option>
    <option value="cromwell">Cromwell</option>
    <option value="queenstown">Queenstown</option>
</select>

When I visit the site, by default it shows "Sydney". But I want to display a title, such as, "What is the name of your city?"

Upvotes: 62

Views: 189649

Answers (14)

Bhushan Borse
Bhushan Borse

Reputation: 1

The option disabled

<select id="county">
  <option value='japan' disabled>Japan</option>
  <option value='india'> India</option>
  <option value='kuwait'> Kuwait</option>
  <option value='Malaysia'> Malaysia</option>
  <option value='maldives'> Maldives</option>
</select>

Upvotes: 0

jaimenino
jaimenino

Reputation: 64

I added a <div> and it worked fine

<div title="Your title here!">
    <select>
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
        <option value="queenstown">Queenstown</option>
    </select>
</div>

Upvotes: 0

HoldOffHunger
HoldOffHunger

Reputation: 20891

Typically, I would suggest that you use the <optgroup> option, as that gives some nice styling and indenting to the element.

The HTML element creates a grouping of options within a element. (Source: MDN Web Docs: <optgroup>.

But, since an <optgroup> cannot be a selected value, you can make an <option selected disabled> and then stylize it with CSS so that it behaves like an <optgroup>....

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
<select>
    <option class="optionGroup" selected disabled>Choose one</option>
    <option value="sydney" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Queenstown</option>
</select>

Upvotes: 4

b3tac0d3
b3tac0d3

Reputation: 908

<select>
    <optgroup label = "Choose One">
    <option value ="sydney">Sydney</option>
    <option value ="melbourne">Melbourne</option>
    <option value ="cromwell">Cromwell</option>
    <option value ="queenstown">Queenstown</option>
    </optgroup>
</select>

Upvotes: 42

Zlocorp
Zlocorp

Reputation: 314

You can create dropdown title | label with selected, hidden and style for old or unsupported device.

<select name="city" >
<option selected hidden style="display:none">What is your city</option>
   <option value="1">Sydney</option>
   <option value="2">Melbourne</option>
   <option value="3">Cromwell</option>
   <option value="4">Queenstown</option>
</select>

Upvotes: 0

Amir Hossein Khateri
Amir Hossein Khateri

Reputation: 61

<option value="" selected style="display:none">Please select one item</option>

Using selected and using display: none; for hidden item in list.

Upvotes: 5

kiran puppala
kiran puppala

Reputation: 787

I think that this would help: 

<select name="select_1">
    <optgroup label="First optgroup category">
      <option selected="selected" value="0">Select element</option>
      <option value="2">Option 1</option>
      <option value="3">Option 2</option>
      <option value="4">Option 3</option>
    </optgroup>
    <optgroup label="Second optgroup category">
      <option value="5">Option 4</option>
      <option value="6">Option 5</option>
      <option value="7">Option 6</option>
    </optgroup>
</select>

Upvotes: 7

Jothi Kannan
Jothi Kannan

Reputation: 3358

You can use the following 

<select data-hai="whatup">
      <option label="Select your city">Select your city</option>
      <option value="sydney">Sydney</option>
      <option value="melbourne">Melbourne</option>
      <option value="cromwell">Cromwell</option>
      <option value="queenstown">Queenstown</option>
</select>

Upvotes: 8

user5035605
user5035605

Reputation: 321

You can combine it with selected and hidden

<select class="dropdown" style="width: 150px; height: 26px">
        <option selected hidden>What is your name?</option>
        <option value="michel">Michel</option>
        <option value="thiago">Thiago</option>
        <option value="Jonson">Jonson</option>
</select>

Your dropdown title will be selected and cannot chose by the user.

Upvotes: 32

aizaz
aizaz

Reputation: 3062

The first option's text will always display as default title.

   <select>
        <option value ="">What is the name of your city?</option>
        <option value ="sydney">Sydney</option>
        <option value ="melbourne">Melbourne</option>
        <option value ="cromwell">Cromwell</option>
        <option value ="queenstown">Queenstown</option>
   </select>

Upvotes: 0

kba
kba

Reputation: 19466

<select>
    <option selected disabled>Choose one</option>
    <option value="sydney">Sydney</option>
    <option value="melbourne">Melbourne</option>
    <option value="cromwell">Cromwell</option>
    <option value="queenstown">Queenstown</option>
</select>

Using selected and disabled will make "Choose one" be the default selected value, but also make it impossible for the user to actually select the item, like so:

Dropdown menu

Upvotes: 164

tux
tux

Reputation: 1287

<select name="city">
   <option value ="0">What is your city</option>
   <option value ="1">Sydney</option>
   <option value ="2">Melbourne</option>
   <option value ="3">Cromwell</option>
   <option value ="4">Queenstown</option>
</select>

You can use the unique id for the value instead

Upvotes: -2

Vincent Duprez
Vincent Duprez

Reputation: 3892

With a default option having selected attribute

<select>
        <option value="" selected>Choose your city</option>
        <option value ="sydney">Sydney</option>
        <option value ="melbourne">Melbourne</option>
        <option value ="cromwell">Cromwell</option>
        <option value ="queenstown">Queenstown</option>
</select>

Upvotes: 0

MitulP91
MitulP91

Reputation: 1325

You can add an option tag on top of the others with no value and a prompt like this:

<select>
        <option value="">Choose One</option>
        <option value ="sydney">Sydney</option>
        <option value ="melbourne">Melbourne</option>
        <option value ="cromwell">Cromwell</option>
        <option value ="queenstown">Queenstown</option>
</select>

Or leave it blank instead of saying Choose one if you want.

Upvotes: 2

Related Questions