Html 如何为html选择标签添加标题

How to add a title to a html select tag

提问by Alamin

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

当我访问该站点时，默认情况下它显示“悉尼”。但我想显示一个标题，例如，“你所在的城市叫什么名字？”

回答by kba

<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 selectedand disabledwill make "Choose one" be the default selected value, but also make it impossible for the user to actually select the item, like so:

使用selectedanddisabled将使“选择一个”成为默认选择值，但也会使用户无法实际选择项目，如下所示：

回答by b3tac0d3

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

回答by user5035605

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.

您的下拉标题将被选择，用户无法选择。

回答by kiran puppala

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>

回答by Jothi Kannan

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>

回答by Amir Hossein Khateri

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

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

使用selected和display: none;用于列表中的隐藏项。

回答by MitulP91

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

您可以option在其他标签上添加一个没有值的标签，并显示如下提示：

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

或者将其留空，而不是说“如果需要，请选择一个”。

回答by Vincent Duprez

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>

回答by aizaz

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>

回答by Zlocorp

You can create dropdown title | labelwith 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>