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

黄舟
Release: 2017-07-26 09:53:57
Original
3374 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!