How to add a title to a html select tag

Html

Html Problem Overview

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?"

Html Solutions

Solution 1 - Html

<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

Solution 2 - Html

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

Solution 3 - Html

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.

Solution 4 - Html

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>

Solution 5 - Html

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>

Solution 6 - Html

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

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

Solution 7 - Html

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.

Solution 8 - Html

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

Solution 9 - Html

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>

Solution 10 - Html

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>

Solution 11 - Html

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>

Solution 12 - Html

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>

Solution 13 - Html

<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

Categories
Recommended Html Solutions

Previous Solution:

Using SimpleXML with Android and Gradle

AndroidGradleAndroid StudioSimple FrameworkDex

Next Solution:

Could not find a version that satisfies the requirement pytz

PythonPipVirtualenvPytz

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlaminView Question on Stackoverflow
Solution 1 - HtmlkbaView Answer on Stackoverflow
Solution 2 - Htmlb3tac0d3View Answer on Stackoverflow
Solution 3 - Htmluser5035605View Answer on Stackoverflow
Solution 4 - HtmlJothi KannanView Answer on Stackoverflow
Solution 5 - Htmlkiran puppalaView Answer on Stackoverflow
Solution 6 - HtmlAmir Hossein KhateriView Answer on Stackoverflow
Solution 7 - HtmlMitulP91View Answer on Stackoverflow
Solution 8 - HtmlHoldOffHungerView Answer on Stackoverflow
Solution 9 - HtmlaizazView Answer on Stackoverflow
Solution 10 - HtmlVincent DuprezView Answer on Stackoverflow
Solution 11 - HtmlZlocorpView Answer on Stackoverflow
Solution 12 - HtmljaimeninoView Answer on Stackoverflow
Solution 13 - HtmltuxView Answer on Stackoverflow