HTML form input select
From w3cyberlearnings
Contents |
HTML - Select Field
Select Field is a drop down list for single or multiple select option.
HTML - Syntax Select Field Tag
<select name="NAME"> <option value="v1"> List label 1</option> <option value="v2"> label 2.....</option> <option value="v3"> label 3.....</option> <option value="v4"> label 4.....</option> <option value="v5"> label 5.....</option> </select
Example - Attributes
| Attributes | Value | Example | Description |
|---|---|---|---|
| disabled | disabled | <select disabled="disabled"></select> <select><option value="33" disabled="disabled">V33</option></select> |
Disable a drop down list |
| size | number | <select size="3">...</select> | defines the size of the options in the drop down to be visible |
| name | text | <select name="citydrop"></select> | name the select field |
| multiple | multiple | <select multiple="multiple"></select> | allow multiple select at once |
| selected | selected | <option value="v330" selected="selected">Selected</option> | default select value |
Example 1 TRY-IT
<html> <head> <title>Select drop down</title> </head> <body> <select name="checkout" size="3" multiple="multiple"> <option value="select">Select..</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7" disabled="disabled">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> <option value="10">Ten</option> </select> </body> </html>
Output
Example 2 TRY-IT
With default selected option and disabled option.
<html> <head> <title>Select drop down</title> </head> <body> <select name="checkout" size="10" multiple="multiple"> <option value="select">Select..</option> <option value="1">One</option> <option value="2">Two</option> <option value="3" selected="selected">Three</option> <option value="4" selected="selected">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7" disabled="disabled">Seven</option> <option value="8" selected="selected">Eight</option> <option value="9">Nine</option> <option value="10">Ten</option> </select> </body> </html>
Output
