Select Dropdown in HTML5

How to use select element to create drop down in HTML5?

Dropdown list box :

Dropdown list is used to select the items in the list, It is used to select the single item in a list, In case we want to select the multiple items we need to add multiple

 <h3><i>Dropdown list to select the single item</i></h3>
    <select name=" website">
        <optgroup label="TechFunda">
            <option value="1">AngularJS</option>
            <option value="2">Javascript</option>
            <option value="3">Bootstrap</option>
            </optgroup>
        <optgroup label="DotNetFunda">
            <option value="4">Articles</option>
            <option value="5">Forums</option>
            <option value="6">Codes</option>
        </optgroup>
    </select>

In the above code snippet we used the <select> element to create a drop down and also used <option> tag with value attribute to create list items in the drop down.

<optgroup label="TechFunda"> - It is used to create the heading of the option values

<option value> - It is used to create the values in a list

output

List box to select multiple items:

It is used to select the multiple items in list box

 <h3><i><b>List to select the Multiple item</b></i></h3>
    <select name=" website" multiple="multiple">
        <option value="1">TechFunda</option>
        <option value="2">Dotnetfunda</option>
        <option value="3">ITfunda</option>
        <option value="4">Kidsfunda</option>
        <option value="5">Farming funda</option>
        <option value="6">Fundoo video</option>
    </select>

List Box to select the multiple items

In the above code snippet we used the <select> element to create a list boxand also used <option> tag with value attribute to create list items.

<multiple> - is used to select multiple items in a dropdown listbox

output

Dropdown list box to select the single item in multiple items

It is used to select the single item in a multiple lists

 <h4><i>Size is used to display the given nmuber list and other after scrolling </i></h4>
    <select name="website" size="4">     
        <option value="1">Dotnetfunda</option>      
        <option value="2">Techfunda</option>     
        <option value="3">ITFunda</option> 
        <option value="4">Kidsfunda</option>  
        <option value="5">Farming funda</option>      
        <option value="6">Fundoo video</option>    
     </select>

ListBox to select the single item

In the above code snippet we used the <select> element to create a list box and also used <option> tag with value attribute to create list items.

<Size = "4"> - It is used to display the given size number of lists on the screen and other after scrolling

output

Disabling the list box

It is used to disable the list box

 <h4><i>Disable is used to disable the selected item </i></h4>
    <select name="website" size="4" multiple="multiple">     
        <option value="1" disabled>Dotnetfunda</option>      
        <option value="2">Techfunda</option>     
        <option value="3">ITFunda</option> 
        <option value="4" disabled>Kidsfunda</option>  
        <option value="5">Farming funda</option>      
        <option value="6">Fundoo video</option>    
     </select>

Disable

In the above code snippet we used the <select> element to create a list box and also used <option> tag with value attribute to create list items.

<size="4"> - It is used to display the given size number of lists on the screen and other after scrolling

<multiple> - It is used to select the multiple values

<disable> - It is used to disable the selected value

output