Understanding the Web
How to create a website
Parts of an HTML page
Structure of an HTML Document
- The Outer Structure of an HTML Document
- Parents, Children, Descendants and Siblings
- Setting Up the Basic Document Structure
Creating and viewing a WEB PAGE
Text formatting in HTML
- Basic text formatting elements
- Creating Breaks
- Abbreviations, Definitions, Quotations and Citations
- Working with language elements
- Other text elements
- More formatting elements
Organising information using lists
Structure content with tables
Data collection with forms
- How a form looks like?
- Creating forms
- Input tags
- Text fields
- Password fields
- Checkboxes and radio buttons
- Hidden fields
- File upload fields
- Drop-down list fields
- Multiline text boxes
- Submit and Reset buttons
Navigation with links
Drop-down lists are a great way to give users lots of options in a small amount of screen space.
You use two tags to create a drop-down list:
- <select> creates the list. Use a name attribute with the <select> element to name your list.
- A collection of <option> elements identifies individual list options. The value attribute assigns a unique value for each <option> element.
Here’s a markup example for a drop-down list:
<!DOCTYPE html> <html> <head> </head> <body> <form method="post"> <p>What is your favorite food?</p> <select name="food"> <option value="pizza">Pizza</option> <option value="icecream">Ice Cream</option> <option value="eggsham">Green Eggs and Ham</option> </select> </form> </body> </html>
What is your favorite food?
Pizza Ice Cream Green Eggs and Ham
The browser turns this markup into a drop-down list with three items.
You can also enable users to select more than one item from a drop-down list by changing the default settings of your list:
- If you want your users to be able to choose more than one option (by holding down the Ctrl [Windows] or ⌘ [Mac] key while clicking options in the list), add the multiple attribute to the <select> tag. The value of multiple is multiple. If you give a stand-alone attribute a value, that value must be the same as the name for the attribute itself (that is, both multiple and multiple=”multiple” are legal).
- By default, the browser displays only one option until the user clicks the drop-down menu arrow to display the rest of the list. Use the size attribute with the <select> tag to specify how many options to show. If you specify fewer than the total number of options, the browser includes a scroll bar with the drop-down list.
You can specify that one of the options in the drop-down list be already selected when the browser loads the page, just as you can specify a check box or radio button to be selected. Simply add the selected attribute for the <option> tag you want as the default. Use this when one choice is very likely, knowing that users can override your default selection quickly and easily.