Home >Web Front-end >HTML Tutorial >Detailed explanation of graphic code for drop-down list selection in HTML

Detailed explanation of graphic code for drop-down list selection in HTML

黄舟
黄舟Original
2017-07-26 09:53:573464browse

Drop-down list in HTML:

Html code Detailed explanation of graphic code for drop-down list selection in HTML

<select>  
  <option value ="1">Volvo</option>  
  <option value ="2">Saab</option>  
  <option value="3">Opel</option>  
  <option value="4">Audi</option>  
</select>

where select is to display a drop down list (drop down list), option is the item in the drop down list, and the text content of option is the value displayed on the page in the drop down list item, and value is the value that actually needs to be submitted to Server value.
The display effect is as follows:


More complex drop-down list:

Html code Detailed explanation of graphic code for drop-down list selection in HTML

<select>  
  <optgroup label="Swedish Cars">  
    <option value="1">Volvo</option>  
    <option value="2">Saab</option>  
  </optgroup>  
  <optgroup label="German Cars">  
    <option value="3">Mercedes</option>  
    <option value="4">Audi</option>  
  </optgroup>  
</select>

This drop-down list contains an "item group", which cannot be selected. Yes, use the label tag to mark the literal content. What really works is the value attribute.
Look at this drop-down list containing "Project Group"


Parameters in option: selected ="selected"
If you need to open the page, an option will be selected by default. You need to use the selected parameter:

Html code Detailed explanation of graphic code for drop-down list selection in HTML

<select>  
  <option value="1">Volvo</option>  
  <option value="2">Saab</option>  
  <option value="3" selected="selected">Mercedes</option>  
  <option value="4">Audi</option>  
</select>

Parameters in option: disabled="disabled"
If you need to disable an item but don’t want to hide it, you can use the disabled attribute

Html Code Detailed explanation of graphic code for drop-down list selection in HTML

<select>  
  <option value="1">Volvo</option>  
  <option value="2">Saab</option>  
  <option value="3" disabled="disabled">Mercedes</option>  
  <option value="4">Audi</option>  
</select>

Parameters in option: title
If you need to place the mouse on an item When uploading, a prompt is given, you can use the title attribute

Html code Detailed explanation of graphic code for drop-down list selection in HTML

<select>  
  <option value="1">Volvo</option>  
  <option value="2">Saab</option>  
  <option value="3">Mercedes</option>  
  <option value="4" title="Audi, your best choice!">Audi</option>  
</select>

##In fact, title Can also be used in many other HTML tags!
##

The above is the detailed content of Detailed explanation of graphic code for drop-down list selection in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn