How to add a title to a html select tag

Question

How would I go about setting a title in select tag  Here is my select box    lt select gt       lt option value  sydney  gt Sydney lt  option gt       lt option value  melbourne  gt Melbourne lt  option gt       lt option value  cromwell  gt Cromwell lt  option gt       lt option value  queenstown  gt Queenstown lt  option gt   lt  select gt    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

User · Answer

The first option s text will always display as default title       lt select gt           lt option value     gt What is the name of your city  lt  option gt           lt option value   sydney  gt Sydney lt  option gt           lt option value   melbourne  gt Melbourne lt  option gt           lt option value   cromwell  gt Cromwell lt  option gt           lt option value   queenstown  gt Queenstown lt  option gt      lt  select gt

User · Answer

You can create dropdown title   label with selected  hidden and style for old or unsupported device    lt select name  city   gt   lt option selected hidden style  display none  gt What is your city lt  option gt      lt option value  1  gt Sydney lt  option gt      lt option value  2  gt Melbourne lt  option gt      lt option value  3  gt Cromwell lt  option gt      lt option value  4  gt Queenstown lt  option gt   lt  select gt

User · Answer

lt select name  city  gt      lt option value   0  gt What is your city lt  option gt      lt option value   1  gt Sydney lt  option gt      lt option value   2  gt Melbourne lt  option gt      lt option value   3  gt Cromwell lt  option gt      lt option value   4  gt Queenstown lt  option gt   lt  select gt    You can use the unique id for the value instead

User · Answer

I think that this would help        lt select name  select 1  gt       lt optgroup label  First optgroup category  gt         lt option selected  selected  value  0  gt Select element lt  option gt         lt option value  2  gt Option 1 lt  option gt         lt option value  3  gt Option 2 lt  option gt         lt option value  4  gt Option 3 lt  option gt       lt  optgroup gt       lt optgroup label  Second optgroup category  gt         lt option value  5  gt Option 4 lt  option gt         lt option value  6  gt Option 5 lt  option gt         lt option value  7  gt Option 6 lt  option gt       lt  optgroup gt   lt  select gt

User · Answer

You can add an option tag on top of the others with no value and a prompt like this    lt select gt           lt option value    gt Choose One lt  option gt           lt option value   sydney  gt Sydney lt  option gt           lt option value   melbourne  gt Melbourne lt  option gt           lt option value   cromwell  gt Cromwell lt  option gt           lt option value   queenstown  gt Queenstown lt  option gt   lt  select gt    Or leave it blank instead of saying Choose one if you want

User · Answer

lt select gt       lt optgroup label    quot Choose One quot  gt       lt option value   quot sydney quot  gt Sydney lt  option gt       lt option value   quot melbourne quot  gt Melbourne lt  option gt       lt option value   quot cromwell quot  gt Cromwell lt  option gt       lt option value   quot queenstown quot  gt Queenstown lt  option gt       lt  optgroup gt   lt  select gt

User · Answer

You can use the following    lt select data-hai  whatup  gt         lt option label  Select your city  gt Select your city lt  option gt         lt option value  sydney  gt Sydney lt  option gt         lt option value  melbourne  gt Melbourne lt  option gt         lt option value  cromwell  gt Cromwell lt  option gt         lt option value  queenstown  gt Queenstown lt  option gt   lt  select gt

User · Answer

You can combine it with selected and hidden   lt select class  dropdown  style  width  150px  height  26px  gt           lt option selected hidden gt What is your name  lt  option gt           lt option value  michel  gt Michel lt  option gt           lt option value  thiago  gt Thiago lt  option gt           lt option value  Jonson  gt Jonson lt  option gt   lt  select gt    Your dropdown title will be selected and cannot chose by the user

User · Answer

lt select gt       lt option selected disabled gt Choose one lt  option gt       lt option value  sydney  gt Sydney lt  option gt       lt option value  melbourne  gt Melbourne lt  option gt       lt option value  cromwell  gt Cromwell lt  option gt       lt option value  queenstown  gt Queenstown lt  option gt   lt  select gt    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

User · Answer

Typically  I would suggest that you use the  lt optgroup gt  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   lt optgroup gt    But  since an  lt optgroup gt  cannot be a selected value  you can make an  lt option selected disabled gt  and then stylize it with CSS so that it behaves like an  lt optgroup gt       x000D   x000D   optionGroup       font-weight  bold      font-style  italic    x000D   lt select gt       lt option class  optionGroup  selected disabled gt Choose one lt  option gt       lt option value  sydney  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Sydney lt  option gt       lt option value  melbourne  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Melbourne lt  option gt       lt option value  cromwell  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Cromwell lt  option gt       lt option value  queenstown  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Queenstown lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

lt option value    selected style  display none  gt Please select one item lt  option gt    Using selected and using display  none   for hidden item in list

User · Answer

With a default option having selected attribute   lt select gt           lt option value    selected gt Choose your city lt  option gt           lt option value   sydney  gt Sydney lt  option gt           lt option value   melbourne  gt Melbourne lt  option gt           lt option value   cromwell  gt Cromwell lt  option gt           lt option value   queenstown  gt Queenstown lt  option gt   lt  select gt

[html] How to add a title to a html select tag

Examples related to html