Guidance portal

World of Guidance and Education

Insert Dropdown List

In this chapter we will learn to insert list dropdowns and readable list.

There are many types of lists some are shown below.

  • Dropdown when clicked
  • Dropdown without click
  • Readable only (disable)

Mostly, the "dropdown list when clicked" is used but we will learn both. Lets start.

Dropdown List (Manu bar):

Dropdown lists offers a solution to insert lists without consuming the space of the webpage e.g. a list of languages or countries can be inserted without occupying unnecessary space for the users of webpage as the list will dropdown if required by the user otherwise remains hidden.

As usual, the syntax for inserting dropdown list is given below. Please read the code carefully. Two tags are used;

    <select name="this is the place of your list name">
    <option>your first option</option>
    <option>your second option</option>

Select Name

This tag will start the dropdown list as well as give the name to the list. Name of the list has nothing to do with webpage desing, this is useful only for programmer. Remember there is no closing tag for this.

Option

Option has both opening and closing tags. Start the opening tag (as shown above in syntax) then write the list item and close the tag. Your item has been listed. Now keep doing the same to insert all the items for a list.

For further understanding of the above, the complete syntax of the dropdown list (of Languages) has been given below along with the browser view.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <form name="form1" method="post" action="your required action">
    <select name="your language">
    <option>english</option>
    <option>japnese</option>
    <option>urdu</option>
    <option>madarian</option>
    <option>so on write the name of languages</option>
    </select><br>
    </form>
    </body>
    </html>

    Browser view


Note

The list does not perform any action on its own, you have to use "Forms" with suitable javascripts to perform a certain action if an option under the list is selected.

Insert List (without drop down):

List without dropdown when clicked consumes the space of webpage therefore such lists are used only to enlist when there are a few items of list e.g. some selected countries or some selected languages etcetera.

The syntax for inserting such lists is as follows.

    <select name="your list name" size="your list size">
    <option>your first option</option>
    <option>your second option</option>

You have noticed that the syntax has only one change if compared with the syntax of "lists with dropdown when clicked" that is "size".

Size

Written in the same tag of "select name", size determines the space the list will occupy on the webpage. The size can be determined upto the display limits of webpage size.

For an example, lets insert the list of selected countries and see how will it look like on the browser.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <form name="form1" method="post" action="your required action">
    <select name="your country" size="10">
    <option>amarica</option>
    <option>japan</option>
    <option>pakistan</option>
    <option>china</option>
    <option>so on write the name of countries</option>
    </select><br>
    </form>
    </body>
    </html>

    Browser view

Readable (disabled) List:

If you want to make a list that is only in your control (i.e. only readable to users) then make the list "disable". For this your code will slightly change as shown below. Note only disable will add in the "select name" tag.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <form name="form1" method="post" action="your required action">
    <select name="your country" size="10" disabled >
    <option>amarica</option>
    <option>japan</option>
    <option selected>pakistan</option>
    <option>china</option>
    <option>so on write the name of countries</option>
    </select><br>
    </form>
    </body>
    </html>

Browser view

 

comments powered by Disqus